Service Worker 是运行在浏览器后台的可编程代理层，支持离线访问、请求拦截与消息推送；需 HTTPS 注册、事件驱动、无法操作 DOM，通过 postMessage 与页面通信。
Service Worker 是浏览器中运行在后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源、推送消息，并实现真正的离线访问能力。它不是普通 JS 脚本，而是一个可编程的代理层。
Service Worker 的核心特点
它必须通过 HTTPS（本地 localhost 除外）注册；生命周期由浏览器控制，不依赖页面存在；不能直接操作 DOM；通过 postMessage 与页面通信；支持事件驱动（install、activate、fetch 等）。
注册并安装 Service Worker
先在主页面中注册：
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered', reg))
.catch(err => console.error('SW registration failed', err));
}
然后在 sw.js 中处理安装逻辑，缓存关键静态资源：
立即学习“Java免费学习笔记（深入）”；
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/app.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
拦截请求并返回缓存
在 activate 后，fetch 事件会触发，你可以决定从缓存还是网络加载：
self.addEventListener('fetch', event => {event.respondWith(
caches.match(event.request)
.then(response => {
if (response) return response;
return fetch(event.request);
})
);
更健壮的做法是结合缓存优先 + 网络回退（cache-first），或网络优先 + 缓存兜底（network-first），甚至 stale-while-revalidate 模式。
更新缓存与清理旧版本
修改 sw.js 文件内容后，浏览器会自动下载新版本并在下次页面打开时触发 install；但旧缓存不会自动删除。需要在 activate 阶段清理：
self.addEventListener('activate', event => {const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
基本上就这些。Service Worker 实现离线功能不复杂但容易忽略细节：缓存策略要匹配业务场景，版本管理要主动清理，调试时记得勾选 “Update on reload” 并跳过等待（skip waiting）来快速测试新逻辑。
