Service Worker 是运行在浏览器后台的 JavaScript 脚本，可拦截网络请求、实现离线缓存与消息推送；它无 DOM 访问权限，需 HTTPS 启用，通过 install/fetch 事件预缓存资源并按策略响应请求。
Service Worker 是 JavaScript 的一种特殊脚本，它运行在浏览器后台，独立于网页主线程，能拦截和处理网络请求，从而实现离线缓存、消息推送、后台同步等能力。它本身不是 Web Worker，但类似——没有 DOM 访问权限，生命周期由浏览器控制，必须通过 HTTPS（或 localhost）启用。
Service Worker 的核心作用：接管网络请求
它像一个“中间代理”，在页面发起 fetch 请求时，可以决定是走网络、读取缓存，还是返回自定义响应。这正是实现离线体验的关键。
- 注册后，Service Worker 会安装（install）、激活（activate），之后就能监听 fetch 事件
- 在 install 阶段，通常预缓存关键资源（如 HTML、CSS、JS、图标）
- 在 fetch 事件中，可按策略（Cache First / Network First / Stale-While-Revalidate）响应请求
如何用 Service Worker 实现离线可用
基本流程是：注册 → 安装并缓存 → 拦截请求并返回缓存内容。例如：
- 注册时调用 navigator.serviceWorker.register('sw.js')，浏览器下载并启动 sw.js
- 在 sw.js 的 install 事件中，用 caches.open('v1').then(cache => cache.addAll([...])) 缓存静态资源
- 在 fetch 事件中，先尝试 cache.match(request)，命中则返回缓存；未命中再 fetch 网络，并把响应存入缓存供下次使用
需要注意的关键限制
Service Worker 并非万能，它的行为受严格约束：
立即学习“Java免费学习笔记（深入）”；
- 无法访问 window、document 等 DOM 对象，只能通过 postMessage 和页面通信
- 不保证长期驻留：浏览器可能终止空闲的 Service Worker，也不保证 fetch 事件一定执行完
- 更新机制特殊：新版本只有在页面重新加载且旧版无激活客户端时才会激活
- 不支持同步 API（如 localStorage），需用 IndexedDB 或 Cache API 替代
一个最小可行的离线示例逻辑
假设你有一个单页应用 index.html，希望它在断网时仍能打开：
