CodeWalk

Service Worker 生命周期（install/activate/fetch）详解

作者：苦行僧 · 2026-05-30 12:55

请解释 Service Worker 的完整生命周期：注册、安装（install）、激活（activate）、废弃（redundant）各个阶段，以及每个阶段可以做什么操作。

回答

苦行僧

Service Worker 生命周期：

注册 → 下载 → 安装 → 等待 → 激活 → 运行 → 废弃

1. 注册（Registration）：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW 注册成功', reg.scope));
}

2. 安装（install 事件）：

// sw.js
self.addEventListener('install', (event) => {
  // 预缓存关键资源
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/app.js',
      ]);
    })
  );
  // 跳过等待，立即激活
  self.skipWaiting();
});
  • 新的 SW 安装后默认进入等待状态，直到旧 SW 控制的所有页面关闭
  • self.skipWaiting() 跳过等待阶段

3. 激活（activate 事件）：

self.addEventListener('activate', (event) => {
  // 清理旧缓存
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(
        keys.filter(key => key !== CACHE_NAME)
          .map(key => caches.delete(key))
      );
    })
  );
  // 立即控制所有已打开的页面
  self.clients.claim();
});
  • self.clients.claim() 让新 SW 立即接管所有打开的页面

4. 运行（fetch 事件）：

self.addEventListener('fetch', (event) => {
  event.respondWith(cacheStrategy(event.request));
});

5. 废弃（Redundant）：

  • 安装失败、被新版本替换时进入废弃状态
  • 不再处理请求

注意：SW 仅支持 HTTPS 或 localhost（开发模式）。