Service Worker通过拦截网络请求实现离线访问，首先注册sw.js文件，在install事件中缓存静态资源，activate时清理旧缓存，fetch事件中优先返回缓存响应并动态缓存新资源，通过版本号更新缓存并使用skipWaiting和clients.claim实现快速激活。
Service Worker 是现代 Web 应用中实现离线访问、资源缓存和后台任务的关键技术。它本质上是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、管理缓存、推送消息等。下面从实际应用场景出发，带你一步步掌握 Service Worker 的核心用法。
注册并激活 Service Worker
要在页面中启用 Service Worker，首先需要在主 JavaScript 文件或 HTML 的脚本中注册它。
注册代码通常放在页面加载时：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('SW 注册成功，作用域为:', registration.scope);
})
.catch(error => {
console.log('SW 注册失败:', error);
});
});
}
这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后注册根目录下的 sw.js 文件。注意：Service Worker 文件必须能被正确访问，且处在有效的作用域路径下（通常为网站根目录或子目录）。
立即学习“Java免费学习笔记（深入）”；
缓存静态资源实现离线访问
最常见的用途是缓存关键静态资源（如 HTML、CSS、JS、图片），让用户在无网络时仍可访问页面。
在 sw.js 中监听 install 和 activate 事件：
const CACHE_NAME = 'my-site-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('activate', event => {
// 清理旧缓存
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.filter(key => key !== CACHE_NAME)
.map(key => caches.delete(key))
)
)
);
});
install 阶段打开缓存并预加载资源；activate 阶段清理过期缓存，避免占用用户存储空间。
拦截请求并返回缓存内容
通过监听 fetch 事件，可以控制每个网络请求的响应策略。
常用策略：优先读取缓存，若无则发起网络请求并缓存结果。
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(cachedResponse => {
// 如果缓存中有，直接返回
if (cachedResponse) {
return cachedResponse;
}
// 否则发起网络请求
return fetch(event.request).then(response => {
// 只缓存成功响应，且仅限同源请求
if (!response || response.status !== 200 || !isSameOrigin(event.request)) {
return response;
}
// 克隆响应流并缓存
const responseToCache = response.clone();
caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, responseToCache);
});
return response;
});
})
);
});
// 判断请求是否同源
function isSameOrigin(request) {
const url = new URL(request.url);
return url.origin === self.location.origin;
}
这样配置后，用户第二次访问时资源将从缓存加载，显著提升加载速度，并支持离线使用。
更新缓存版本与热更新机制
当应用更新时，需确保 Service Worker 能检测到变化并升级缓存。
关键是修改 CACHE_NAME 版本号，例如改为 my-site-v2。浏览器会发现新的 SW 文件内容不同，触发 install 新实例。
注意：新 Service Worker 安装完成后不会立即接管页面，直到所有已打开的页面关闭旧 SW 控制的会话。可通过跳过等待（skipWaiting）和客户端控制（clients.claim）加速切换：
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
);
// 安装完成后立即激活，跳过 waiting 状态
self.skipWaiting();
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.map(key => {
if (key !== CACHE_NAME) return caches.delete(key);
}))
)
);
// 激活后立即控制所有客户端
self.clients.claim();
});
这能让新版本快速生效，适合频繁迭代的应用。
基本上就这些。Service Worker 强大但需谨慎使用，合理设计缓存策略才能真正提升用户体验。调试时建议使用 Chrome DevTools 的 Application 面板查看缓存和 SW 状态。不复杂但容易忽略细节，比如路径问题、缓存更新逻辑、跨域处理等。掌握之后，PWA 就近在眼前了。
