Service Workers 是运行在浏览器后台的脚本，独立于主线程，支持拦截请求、缓存管理、离线访问和推送通知；必须通过 HTTPS（localhost 除外）注册且仅对同源页面生效。
Service Workers 是运行在 浏览器 后台的脚本，独立于网页主线程，能拦截网络请求、管理缓存、实现离线访问和推送通知等功能。关键在于它必须通过 HTTPS（本地开发时 localhost 除外）注册，并且只对同源页面生效。
注册 Service Worker
注册是启用它的第一步，通常放在主页面的 JavaScript 中，且建议在页面加载后尽早执行：
- 检查浏览器是否支持：
if ('serviceWorker' in navigator) - 调用
navigator.serviceWorker.register('./sw.js')，路径需为绝对路径或相对于站点根目录 - 注册成功后返回一个 Promise，可监听
registration对象，用于后续控制更新或缓存 - 注意：每次页面加载都会尝试注册，但浏览器会自动去重；若 sw.js 内容有变化，浏览器会在下次页面加载时静默安装新版本
缓存静态资源（Cache API）
Service Worker 可以在安装阶段预缓存 HTML、CSS、JS、图片等资源，让应用首次加载后即可离线使用：
- 在
install事件中调用event.waitUntil()确保安装完成前缓存就绪 - 使用
caches.open('v1')创建缓存空间，再用cache.addAll([……urls])批量添加资源 - 在
fetch事件中，先尝试从缓存匹配caches.match(request)，命中则直接返回，未命中再发起网络请求并可选择存入缓存 - 避免缓存动态接口（如带查询参数的 API），除非明确需要；静态资源建议加哈希命名，便于版本控制
拦截与定制网络请求
借助 fetch 事件，Service Worker 能完全掌控页面发出的请求，实现自定义响应逻辑：
立即学习“Java 免费学习笔记（深入）”；
- 可通过
request.url、request.method或request.destination判断请求类型（如 script、image、json） - 返回自定义响应：例如用
new Response('Offline', { status: 503})拦截失败请求并展示友好提示 - 可结合缓存策略做“缓存优先”、“网络优先”或“Stale-while-revalidate”——比如先返回缓存内容，再后台拉取更新并更新缓存
- 注意：跨域请求默认不携带 cookie，如需发送凭据，服务端需设置
Access-Control-Allow-Credentials: true，前端 fetch 需加credentials: 'include'
更新与生命周期管理
Service Worker 有明确的生命周期（installing → waiting → active），更新机制不同于普通脚本：
- 修改 sw.js 文件内容后，新版本会在下次页面加载时进入
installing阶段，但不会立即激活，旧版仍控制当前页面 - 要立即激活新版，可在
waiting状态下调用skipWaiting()；要让新版立即接管所有客户端，可调用clients.claim() - 可通过
navigator.serviceWorker.getRegistration()获取当前注册信息，配合update()主动检查更新 - 调试时可打开 Chrome DevTools 的 Application → Service Workers 面板，勾选“Update on reload”和“Skip waiting”加速测试流程
