无需登录 数据私有 本地保存

Service Worker 生命周期演示器 - 安装/激活/更新

12
0
0
0

Service Worker 生命周期演示器

可视化演示 Service Worker 从解析到冗余的完整生命周期

未注册 scope: /
生命周期阶段
解析 安装中 等待中 激活中 已激活 冗余
📄 解析 Parsed
🔧 安装中 Installing
⏳ 已安装/等待 Installed
⚡ 激活中 Activating
✅ 已激活 Activated
❌ 冗余 Redundant
控制面板
点击 注册 SW 开始演示，或点击 自动演示 观看完整流程。
实时信息
当前状态
未注册
Scope
-
版本
-
控制页面数
0
等待中的SW
无
模式
模拟演示
事件日志
--:--:--🟢 演示器已就绪。Service Worker 生命周期演示器启动。
--:--:--💡 点击「注册 SW」开始，或点击「自动演示」观看完整流程。
Service Worker 脚本示例
// Service Worker 生命周期示例
const VERSION = 'v1.0.0';

// 📄 解析阶段：浏览器下载并解析SW脚本

self.addEventListener('install', (event) => {
  // 🔧 安装中 (Installing)
  console.log('[SW] install 事件触发');
  event.waitUntil(
    caches.open('my-cache-v1').then(cache => {
      return cache.addAll(['/index.html', '/style.css', '/app.js']);
    })
  );
  // 可调用 skipWaiting() 跳过等待
  // self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  // ⚡ 激活中 (Activating)
  console.log('[SW] activate 事件触发');
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(
        keys.filter(k => k !== 'my-cache-v1').map(k => caches.delete(k))
      );
    })
  );
  // 立即控制所有页面
  // clients.claim();
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});
常见问题 & 知识点

Service Worker 的生命周期主要包括：解析（Parsed）→ 安装中（Installing）→ 已安装/等待中（Installed/Waiting）→ 激活中（Activating）→ 已激活（Activated）→ 冗余（Redundant）。每个阶段都有对应的状态和事件，理解生命周期是掌握 Service Worker 的关键。新安装的 SW 会等待所有页面关闭后才激活，除非调用 skipWaiting()。

install 事件：SW 首次注册或更新时触发，通常用于预缓存静态资源（HTML、CSS、JS、图片等）。安装成功后进入 waiting 状态。
activate 事件：SW 激活时触发，通常用于清理旧版本缓存、数据库迁移等操作。在 activate 中调用 clients.claim() 可立即控制所有页面。

skipWaiting() 在 install 事件中调用，可以让新安装的 SW 跳过等待阶段，立即进入激活流程。默认情况下，新 SW 会等待所有使用旧 SW 的页面关闭后才激活。适用场景：需要立即推送更新的情况。注意：跳过等待可能导致页面资源版本不一致，需配合 clients.claim() 使用。

clients.claim() 在 activate 事件中调用，让新激活的 SW 立即接管所有已打开的页面，无需等待页面刷新。默认情况下，激活的 SW 只控制之后打开的页面。结合 skipWaiting() 可实现 SW 的无缝更新，让用户始终使用最新版本。

更新 SW 需要满足以下条件：1) SW 脚本文件内容发生变化（哪怕一个字节）；2) 浏览器检测到变化后会下载新脚本；3) 新 SW 进入 installing → waiting 状态；4) 可通过 skipWaiting() 或关闭所有页面来激活新版本。也可手动调用 registration.update() 来触发更新检查。

Scope（作用域）定义了 SW 可以控制哪些页面。Scope 默认是 SW 脚本所在目录，只能设置为同级或子级路径，不能向上扩展。例如：/app/sw.js 的默认 scope 是 /app/，可控制 /app/ 下的所有页面。可通过 register('/sw.js', {scope: '/app/'}) 显式指定。合理设置 scope 可以精确控制 SW 的影响范围。

Redundant（冗余）表示 SW 已失效，不再控制任何页面。常见触发场景：1) 新版本 SW 激活后，旧版本变为 redundant；2) install 或 activate 事件中发生严重错误导致失败；3) 手动调用 registration.unregister() 注销 SW；4) SW 脚本 URL 返回 404 或其他错误。

Service Worker 是 Web Worker 的一种特殊类型，主要区别：1) SW 独立于页面生命周期，浏览器关闭后仍可运行（用于推送通知等）；2) SW 可以拦截网络请求（fetch 事件）；3) SW 有生命周期管理；4) SW 需要 HTTPS 环境；5) Web Worker 随页面销毁而终止，主要用于计算密集型任务。

调试 SW 的方法：1) Chrome DevTools → Application → Service Workers，可查看状态、手动更新、注销；2) 勾选「Update on reload」可在每次刷新时强制更新 SW；3) 在 SW 脚本中使用 console.log()，日志会显示在 DevTools 的 console 中；4) 使用 chrome://serviceworker-internals/ 查看所有已注册的 SW；5) 在 DevTools → Sources 中可以直接在 SW 脚本中设置断点。

Service Worker 是实现 PWA（渐进式 Web 应用）的核心技术，主要用途包括：离线缓存（Cache API）、后台同步（Background Sync）、推送通知（Push API）、网络请求拦截与优化、资源预缓存提升加载速度、离线回退页面等。它让 Web 应用获得类似原生应用的体验。
🔧 相关工具