Service Worker 是什么？它的生命周期和主要功能有哪些？

Service Worker 是 PWA 的核心技术之一，它是一个运行在浏览器后台的独立线程，主要功能包括：

Service Worker 的生命周期

1. 注册（Registration）

javascript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => console.log('SW registered'))
    .catch(error => console.log('SW registration failed'));
}

1. 安装（Installing）

• 触发 install 事件
• 预缓存静态资源
• 调用 self.skipWaiting() 可以跳过等待阶段

1. 激活（Activating）

• 触发 activate 事件
• 清理旧缓存
• 调用 self.clients.claim() 立即控制所有页面

1. 已激活（Activated）

• 开始拦截网络请求
• 处理 fetch 事件

Service Worker 的核心功能

1. 网络请求拦截

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

2. 资源缓存策略

Cache First（缓存优先）

• 优先从缓存读取
• 缓存不存在时再请求网络
• 适用于静态资源

Network First（网络优先）

• 优先请求网络
• 网络失败时使用缓存
• 适用于动态内容

Stale While Revalidate（缓存同时更新）

• 立即返回缓存
• 同时请求网络更新缓存
• 平衡速度和新鲜度

Network Only（仅网络）

• 不使用缓存
• 适用于实时数据

Cache Only（仅缓存）

• 仅从缓存读取
• 适用于离线场景

3. 离线支持

• 缓存关键资源
• 提供离线页面
• 离线时返回缓存内容

4. 推送通知

• 接收服务器推送
• 显示通知
• 处理通知点击

Service Worker 的限制

1. HTTPS 要求：必须在 HTTPS 环境下运行（localhost 除外）
2. 作用域限制：只能控制注册路径及其子路径
3. 存储限制：浏览器对缓存大小有限制
4. 生命周期管理：需要手动更新和清理
5. 调试困难：运行在独立线程，调试相对复杂

最佳实践

1. 版本控制：为缓存添加版本号，便于更新
2. 缓存清理：在 activate 事件中清理旧缓存
3. 错误处理：妥善处理网络请求失败
4. 性能优化：合理设置缓存过期时间
5. 渐进增强：在不支持 Service Worker 的浏览器中优雅降级