什么是 Service Worker 以及它的主要作用是什么？

什么是 Service Worker？

Service Worker 是一种运行在浏览器后台的独立 JavaScript 线程，充当 Web 应用程序与浏览器和网络之间的代理服务器。

主要作用

1. 离线体验

• 拦截网络请求并缓存资源
• 实现离线访问 Web 应用
• 提供降级体验（当网络不可用时显示缓存内容）

2. 网络性能优化

• 智能缓存策略（Cache First、Network First、Stale While Revalidate 等）
• 减少网络请求，提升页面加载速度
• 实现资源的预缓存和运行时缓存

3. 后台功能

• 接收推送通知（Push Notifications）
• 后台同步（Background Sync）
• 定期后台同步（Periodic Background Sync）

4. 渐进式 Web 应用（PWA）核心

• 使 Web 应用具备原生应用般的体验
• 支持添加到主屏幕
• 实现应用壳架构（App Shell Architecture）

生命周期

1. 注册（Register）：在主线程中注册 Service Worker
2. 安装（Install）：首次下载并安装，可缓存静态资源
3. 激活（Activate）：清理旧缓存，接管页面控制
4. 空闲（Idle）：等待 fetch 或 message 事件
5. 终止（Terminate）：浏览器自动回收资源

注意事项

• 必须在 HTTPS 环境下运行（localhost 除外）
• 无法直接操作 DOM
• 通过 postMessage 与主线程通信
• 具有独立的执行上下文和作用域