Service Worker 是运行在浏览器后台、独立于主线程的脚本，通过 navigator.serviceWorker.register() 在 HTTPS（或 localhost）*册，经历 installing、waiting、active 三阶段，可拦截 fetch 实现离线缓存、页面与 SW 通信、后台同步及推送通知。
Service Worker 是一段运行在浏览器后台的 JavaScript 脚本，独立于网页主线程，能拦截网络请求、管理缓存、实现离线访问和消息推送等功能。它不是直接通过 new ServiceWorker() 创建的，而是通过 注册机制 挂载到指定作用域（通常是网站
根路径）上。
怎么注册并激活 Service Worker
必须在 HTTPS 环境下（本地开发时 localhost 也允许），且脚本需放在网站根目录或其子目录中（作用域限制）。注册代码写在主页面的 JS 中：
- 调用
navigator.serviceWorker.register('./sw.js')，浏览器会下载、解析并尝试安装该脚本 - 首次注册后，Service Worker 进入 installing 状态，触发
install事件，常用来预缓存核心资源 - 安装成功后进入 waiting 状态，直到当前页面所有标签页关闭或执行
skipWaiting() - 激活后进入 active 状态，开始响应
fetch、message等事件
它最常用的功能：离线缓存与网络代理
Service Worker 的核心能力是拦截 fetch 请求，决定是从网络获取还是返回缓存内容。比如实现“网络优先，失败回退缓存”策略：
- 监听全局
fetch事件：self.addEventListener('fetch', event => { ... }) - 用
event.respondWith()拦截响应，内部可调用caches.match()查缓存，或fetch()发真实请求 - 缓存名建议按版本命名（如
'v1-static'），更新时创建新缓存并清理旧缓存，避免脏数据 - 注意：HTML 页面默认不被缓存（因需实时性），但可通过手动添加到缓存列表中
还能做什么：消息通信与后台同步
Service Worker 不只是“缓存中间件”，它还支持更高级的场景：
-
页面 ↔ SW 通信：用
postMessage()双向传数据，比如页面通知 SW 更新缓存，SW 向页面广播消息 - 后台同步（Background Sync）：用户提交表单失败时，SW 可在联网后自动重发（需用户交互触发注册）
- 推送通知（Push API）：配合 Push Service，即使页面关闭也能接收服务端推送（需用户授权）
- 注意：这些功能都有权限和生命周期限制，比如后台同步只在 Chrome/Firefox 支持，且不能保证立即执行
基本上就这些。它不是万能胶，但对提升 PWA 体验、优化首屏加载、支持弱网/离线场景非常关键。写的时候注意作用域、缓存策略、版本升级逻辑，不然容易缓存不更新或白屏。
