Service Worker 是浏览器后台运行的网络拦截器，可拦截请求、缓存资源、实现离线访问；需注册、安装预缓存、拦截响应三步完成离线能力，支持多策略缓存与推送通知，但须 HTTPS 环境且注意生命周期控制。
Service Worker 是浏览器中运行在后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源、推送消息，并让 Web 应用具备离线能力。它不是普通 JS 脚本，不能直接操作 DOM，也不在页面上下文中执行，而是作为网络代理和资源调度中心存在。
Service Worker 的核心能力
它本质是一个可编程的网络拦截器：
- 可捕获页面发起的所有 fetch 请求（包括 HTML、JS、CSS、图片、API 接口）
- 能决定是走网络、读缓存、返回兜底内容，还是组合策略（如缓存优先 + 后台更新）
- 支持后台同步、推送通知、静默更新等增强体验的功能
- 生命周期由浏览器控制：注册 → 安装 → 激活 → 等待 → 控制页面
实现离线应用的三步关键操作
要让网站真正“断网可用”，需完成注册、安装缓存、拦截请求三个环节：
-
注册 Service Worker：在主页面 JS 中调用
navigator.serviceWorker.register('./sw.js')。注意 sw.js 必须与页面同源，且建议放在根目录（作用域才覆盖整个站点） -
安装阶段预缓存静态资源：在 sw.js 的
install事件里用cache.addAll(['/', '/index.html', '/app.js', '/style.css'])把关键文件存入 Cache Storage -
拦截请求并响应缓存：监听
fetch事件，对匹配的请求先查缓存caches.match(req)，命中则返回；未命中再 fetch 网络并存入缓存（可选），同时 fallback 到一个离线页（如/offline.html）
实用缓存策略示例
不同资源适合不同策略，常见组合如下：
立即学习“Java免费学习笔记（深入）”；
-
静态资源（HTML/JS/CSS）：采用“缓存优先 + 更新时替换”——安装时预加载，后续请求直接走缓存；新版本安装成功后，在
activate阶段清理旧缓存 - 图片或字体：可设为“网络优先，失败降级缓存”，避免缓存过期图片
- API 数据：推荐“网络优先 + 缓存兜底”，比如 fetch 失败时返回上一次缓存的数据，并显示“数据可能已过期”提示
-
离线兜底页：所有未匹配路由统一返回
/offline.html，确保用户始终看到有意义的内容而非空白页或报错
注意事项与避坑点
Service Worker 强大但行为严谨，容易因细节出错：
- HTTP 环境下无法注册（开发时可用 localhost，但部署必须用 HTTPS）
- 每次修改 sw.js 文件内容，浏览器会视为新版本并触发重新安装——靠文件内容哈希或时间戳更新可避免误判
- 页面首次加载不会被刚注册的 SW 控制，需刷新一次或调用
skipWaiting()+clients.claim()主动接管 - 调试时勾选 Chrome DevTools → Application → Service Workers 中的 “Update on reload” 和 “Offline” 可快速验证效果
