服务工作者是运行在浏览器后台的脚本，独立于主线程，可拦截请求、管理缓存、推送通知并实现离线能力；它通过HTTPS注册，基于事件驱动，受限访问API，需预缓存静态资源并在fetch中定制缓存策略。
服务工作者（Service Worker）是运行在浏览器后台的脚本，独立于网页主线程，能拦截和处理网络请求、管理缓存、推送通知，并让 Web 应用具备离线能力。它不是直接操作 DOM 的工具，而是一个“代理”或“中间层”，关键在于它把控制权从服务器部分转移到了客户端本地。
服务工作者的核心特性
它必须通过 HTTPS（本地开发时 localhost 例外）注册；一旦激活，就完全脱离页面生命周期——即使关闭标签页，只要还有关联的页面或后台任务，它仍可运行；它不能访问 window 或 document，只能使用 self、cache、fetch、clients 等受限 API。
- 基于事件驱动：响应
install、activate、fetch、message等事件 - 可编程缓存：不依赖浏览器默认缓存策略，开发者决定哪些资源存、怎么存、何时更新
- 请求拦截能力：在资源到达页面前，就能决定是走网络、读缓存，还是合成响应
如何用服务工作者实现离线可用
核心思路是：在安装阶段预缓存关键静态资源（如 HTML、CSS、JS、图标），再在运行时对动态请求（如 API 数据、用户上传图片）采用合适的缓存策略（如 Cache-First、Network-First 或 Stale-While-Revalidate）。
-
预缓存（Precaching）：在
install事件中调用cache.addAll([...])，把构建时已知的资源存进命名缓存（如'static-v1'） -
拦截 fetch 请求：监听
fetch事件，用event.respondWith()返回缓存响应（cache.match()）或发起网络请求（fetch()），甚至 fallback 到兜底页面（如/offline.html） -
缓存更新与清理：在
activate阶段删除旧缓存，避免残留过期资源干扰新版本逻辑
一个极简离线示例逻辑
假设你有一个单页应用，入口是 index.html，样式是 style.css，脚本是 app.js：
立即学习“Java免费学习笔记（深入）”；
- 注册服务工作者：
navigator.serviceWorker.register('sw.js') - 在
sw.js的install中缓存这三个文件 - 在
fetch中优先匹配缓存；若没命中且请求的是 HTML，则返回缓存的index.html（保证主页面总能加载） - 这样即使断网，刷新页面依然能显示完整 UI，只是动态内容可能需提示“当前离线”
注意事项与常见误区
服务工作者不是“一装就灵”。它有明确的生命周期，升级需要两次访问才能生效（第一次注册并激活旧版，第二次才启用新版）；缓存策略选错会导致白屏或数据陈旧；未处理好跨域请求或 opaque 响应可能使缓存失败。
- 始终检查
self.skipWaiting()和clients.claim()是否调用，否则新 SW 可能无法立即接管页面 - 避免在
fetch中无条件return fetch(event.request)—— 这等于绕过所有离线逻辑 - 调试时善用 Chrome DevTools 的 Application → Service Workers 面板，可手动 skip waiting、unregister、update on reload
