Service Worker 是运行在主线程外的可编程网络代理，支持离线访问、消息推送等，需 HTTPS 部署（localhost 除外），通过 install/fetch 事件实现缓存与离线响应。
Service Worker 是浏览器里一个可编程的网络代理，它运行在主线程之外，能拦截和处理网络请求，让网页实现离线访问、消息推送、后台同步等能力。它不是直接操作 DOM 的脚本，而是一个独立的、事件驱动的 worker，生命周期由浏览器控制，必须通过 HTTPS（本地开发时 localhost 除外）启用。
Service Worker 的核心特点
• 它是 JavaScript 文件，但运行在自己的线程中，不阻塞页面渲染或交互
• 只能通过 HTTPS 部署（开发时 localhost 被豁免）
• 一旦注册成功，它会持续存在，即使关闭标签页甚至浏览器，只要没被系统清除，下次打开仍可能激活
• 默认不持有页面上下文（没有 window、document），也不能直接操作 DOM
• 通过 postMessage 和页面通信，用 fetch + cache API 实现资源缓存与离线响应
三步完成基础离线应用
1. 创建并注册 Service Worker 文件（如 sw.js）
在网页的 JavaScript 中调用 navigator.serviceWorker.register()：
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered', reg))
.catch(err => console.error('SW registration failed', err));
}
</script>
立即学习“Java免费学习笔记（深入）”；
2. 在 sw.js 中监听 install 和 fetch 事件
安装阶段缓存关键资源；请求阶段优先返回缓存，再回退到网络：
const CACHE_NAME = 'my-offline-cache-v1';
const urlsToCache = ['/','/index.html','/style.css','/app.js'];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(response => response || fetch(e.request))
);
});
3. 处理更新与缓存清理（可选但推荐）
每次修改 sw.js，浏览器会自动下载新版本并触发 waiting → activating 流程。可在 activate 事件中清理旧缓存：
self.addEventListener('activate', e => {
const cacheWhitelist = [CACHE_NAME];
e.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys.map(key => {
if (!cacheWhitelist.includes(key)) {
return caches.delete(key);
}
}));
}))
);
});
常见注意事项
• 缓存策略要按需选择：Cache First、Network First、Stale-While-Revalidate 等，不能一概而论
• 动态请求（如 API）建议单独缓存并设置合理过期逻辑，避免数据陈旧
• 页面首次加载时 SW 还未生效，需二次刷新才真正离线可用
• 开发调试时勾选 DevTools → Application → Service Workers 中的 “Update on reload” 和 “Bypass for network” 更方便
• 不支持 IE，现代浏览器基本都支持（Chrome、Firefox、Edge、Safari 16.4+）
基本上就这些。Service Worker 不复杂但容易忽略细节，关键是理解它的生命周期和缓存时机——写对 install 和 fetch，离线体验就有了骨架。
