Service Worker 的生命周期和主要用途是什么？

Service Worker：浏览器在后台独立于网页运行的脚本，充当网络代理，实现离线缓存、消息推送、后台同步等功能。

生命周期：

注册(register) → 安装(install) → 激活(activate) → 空闲(idle) → 终止(terminated)
                              ↕                           ↕
                           更新(update)               fetch/sync/push 事件唤醒

1. 注册：

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

2. install 事件：预缓存静态资源

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/', '/index.html', '/app.js', '/style.css'])
    )
  );
  self.skipWaiting(); // 立即激活新版本
});

3. activate 事件：清理旧缓存

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
    )
  );
  self.clients.claim(); // 立即接管所有页面
});

4. fetch 事件：拦截网络请求

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});

应用场景：

• 离线应用（完整离线体验）
• 静态资源缓存加速
• 消息推送（Push API）
• 后台同步（Background Sync）