Service Worker通过拦截网络请求实现离线访问与性能优化，需先注册并安装，预缓存关键资源；激活时清理旧缓存并接管页面；采用分层缓存策略如静态资源缓存优先、主文档网络优先；更新依赖内容变更并配合skipWaiting和clients.claim生效，结合DevTools调试确保离线可用性。
Service Worker 是现代 Web 应用中实现离线访问、资源缓存和性能优化的关键技术。它本质上是一个运行在浏览器后台的脚本，独立于网页主线程，能够拦截网络请求、管理缓存，并支持推送通知等功能。在实际开发中，合理使用 Service Worker 可显著提升用户体验，尤其是在弱网或无网环境下。
Service Worker 的基本注册与安装
要在项目中启用 Service Worker，首先需要在主页面中注册它。注册过程通常放在入口 JavaScript 文件中：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('SW registered: ', registration);
})
.catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
接着创建 sw.js 文件，定义安装逻辑。安装阶段适合预缓存关键资源：
const CACHE_NAME = 'v1';
const PRECACHE_URLS = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(() => self.skipWaiting())
);
});
通过 caches.open 创建命名缓存池，并使用 addAll 预加载指定资源。调用 skipWaiting() 确保新 Service Worker 能立即激活，避免等待旧版本释放控制权。
立即学习“Java免费学习笔记（深入）”；
激活与缓存清理
当 Service Worker 更新时，会进入激活阶段。此时应清理旧缓存，防止冗余数据堆积：
self.addEventListener('activate', event => {
const expectedCaches = [CACHE_NAME];
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.map(key => {
if (!expectedCaches.includes(key)) {
return caches.delete(key);
}
})
)
).then(() => self.clients.claim())
);
});
clients.claim() 让新 Service Worker 立即接管所有客户端页面，确保缓存策略一致。这一步对保证用户访问的是最新资源非常重要。
网络请求的缓存策略
通过监听 fetch 事件，可以自定义资源加载逻辑。常见的策略包括缓存优先、网络优先或 stale-while-revalidate 模式：
例如，对静态资源采用缓存优先：
self.addEventListener('fetch', event => {
const { request } = event;
const url = new URL(request.url);
// 静态资源走缓存优先
if (url.origin === location.origin && /\.(css|js|png|jpg)$/.test(url.pathname)) {
event.respondWith(
caches.match(request).then(cached =>
cached || fetch(request).then(response =>
caches.open(CACHE_NAME).then(cache => {
cache.put(request, response.clone());
return response;
})
)
)
);
return;
}
// 主文档走网络优先，失败后 fallback 到缓存
if (request.mode === 'navigate') {
event.respondWith(
fetch(request).catch(() =>
caches.match('/offline.html')
)
);
return;
}
});
这种分层策略兼顾了速度与内容新鲜度。图片、样式等变动少的资源从缓存读取，而页面内容尝试获取最新版本，无法联网时再展示离线页。
更新机制与调试建议
Service Worker 的更新依赖脚本内容哈希变化。即使只改一行代码，浏览器也会识别为新版本并触发 install 流程。但要注意：更新不会立刻生效，除非设置 skipWaiting 和 clients.claim。
开发过程中建议：
- 使用 Chrome DevTools 的 Application 面板查看 Service Worker 状态
- 开启“Update on reload”或“Skip waiting”手动测试更新行为
- 本地调试时可勾选“Disable cache”避免干扰
上线前务必验证离线场景下的可用性，确保关键路径不依赖网络。
基本上就这些。掌握 Service Worker 的生命周期和缓存控制，就能构建出真正可靠、快速响应的 PWA 应用。虽然初期配置略复杂，但带来的用户体验提升是值得的。
