service worker 是运行在浏览器后台的事件驱动型脚本，支持离线缓存、网络请求拦截与推送通知。需 https 注册，生命周期为注册→安装→激活→等待→控制页面，无法访问 dom，依赖 fetch/cache api 实现预缓存与运行时缓存策略。
Service Worker 是运行在浏览器后台的脚本，独立于网页主线程，能拦截和处理网络请求、管理缓存、推送通知，并让 Web 应用具备离线能力。
Service Worker 的核心特性
它不是普通 JS 脚本，而是一个可被注册、安装、激活的事件驱动型 worker：
- 必须通过 HTTPS（本地开发时 localhost 也允许）才能注册
- 生命周期由浏览器控制：注册 → 安装 → 激活 → 等待 → 控制页面
- 无法直接访问 DOM 或 window 对象，只能通过 postMessage 和页面通信
- 支持 fetch、cache API，是实现离线体验的关键基础设施
如何用 Service Worker 实现离线体验
关键在于“预缓存 + 运行时缓存”策略，让资源在首次加载时存入 Cache Storage，后续请求优先从缓存读取：
-
预缓存静态资源：在 install 阶段把 HTML、CSS、JS、图标等核心文件写入指定缓存（如
static-v1） - 拦截 fetch 请求：在 fetch 事件中检查请求是否命中缓存；有则返回缓存响应，无则发起网络请求并缓存结果
- 缓存更新策略：install 阶段清旧缓存，fetch 阶段用 stale-while-revalidate 等模式平衡新鲜度与可用性
-
兜底页面：当网络不可用且缓存未命中时，返回一个离线专用 HTML 页面（如
/offline.html）
一个最小可行示例
注册 sw.js：
立即学习“Java免费学习笔记（深入）”；
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(reg => {
console.log('SW registered:', reg.scope);
});
}
sw.js 内容简版：
const CACHE_NAME = 'my-app-v1';
const PRECACHE_URLS = ['/index.html', '/style.css', '/app.js'];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(PRECACHE_URLS))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(cached => {
return cached || fetch(e.request);
})
);
});
注意事项与常见陷阱
实际部署中容易踩坑：
