Service Worker 是运行在浏览器后台、独立于主线程的 JavaScript 脚本，用于拦截请求、管理缓存、推送通知并实现离线体验；它不是普通页面脚本（无法操作 DOM），也不是服务器端 Node.js 服务。
Service Worker 是什么？不是什么？
它不是普通页面脚本，不能直接操作 DOM；也不是 Node.js 服务，不运行在服务器上。它是一个受控的、事件驱动的代理层，生命周期由浏览器管理——注册后需等待安装（install）、激活（activate），之后才能监听 fetch 事件。
- 必须通过 HTTPS（
localhost除外）才能注册，否则navigator.serviceWorker.register()会静默失败 -
作用域默认为注册脚本所在路径，想控制整个站点？注册时传入
{scope: '/'} - 每次页面加载不会重新执行 SW 全局代码，而是复用已激活的实例——所以
console.log在 SW 文件里可能只出现一次
如何用 fetch + Cache API 实现离线访问
核心逻辑是：在 install 阶段预缓存关键资源，在 fetch 阶段优先从缓存读取，回退到网络。不是“一键离线”，而是你明确决定哪些资源可离线使用。
-
cache.addAll()只接受 URL 字符串数组，不支持 glob 或正则；路径必须精确匹配后续fetch请求的request.url - 缓存名建议带版本号（如
'static-v1'），避免旧缓存污染；升级 SW 时，旧缓存不会自动删除，得在activate里手动清理 - 对 HTML 文件，通常不建议全量缓存（因内容易变），更稳妥的做法是用
Stale-While-Revalidate策略：先返回缓存，再后台更新
self.addEventListener('install', event => {
event.waitUntil(
caches.open('static-v1').then(cache =>
cache.addAll([
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js'
])
)
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response =>
response || fetch(event.request)
)
);
});
常见离线失败原因
用户点开页面显示 “You are offline” 并不等于 Service Worker 没生效——很可能只是缓存没命中或策略写错了。
- 打开 DevTools → Application → Service Workers，确认状态是
activated and is running；若显示waiting，说明有新版本未激活，可点击Skip Waiting - 检查
caches.keys()是否真有缓存项（在 Console 里执行）；如果caches.match()返回undefined，八成是 URL 不一致（比如带了 query 参数、大小写差异、末尾斜杠缺失） - 导航请求（即地址栏输入或链接跳转）默认触发
fetch事件，但某些资源（如<img>的 src）也可能被拦截——别忘了处理 404 场景，否则离线时图片直接挂掉
它不能解决所有离线问题
Service Worker 本身不存储结构化数据，也不持久保存用户生成内容。需要本地数据库？得配合 IndexedDB；要同步表单草稿？得自己设计冲突解决逻辑；想让 PWA 安装后首次启动就离线可用？注册时机必须早于任何资源加载（通常放在 <head> 最顶部）。
立即学习“Java免费学习笔记（深入）”；
最常被忽略的一点：缓存策略和激活时机强耦合。一个没处理好 activate 清理逻辑的 SW，可能让新旧缓存并存数月，导致用户始终看不到更新——这不是 bug，是你没写清楚“换代规则”。
