Service Worker通过缓存策略提升性能，支持缓存优先、网络优先和 stale-while-revalidate 模式，结合 install、activate、fetch 生命周期实现资源预缓存、旧缓存清理与请求拦截，确保离线访问与数据更新平衡。
Service Worker 是一种运行在浏览器后台的脚本，独立于网页主线程，能够实现资源缓存、离线访问、消息推送等功能。其中最常用的能力之一就是缓存管理，通过它你可以控制页面加载时从网络还是缓存中获取资源，从而显著提升性能和用户体验。
Service Worker 缓存的基本原理
Service Worker 本质上是一个可编程的网络代理，可以拦截和处理页面发出的网络请求。你可以在其中定义缓存策略，决定哪些资源需要缓存、如何更新缓存、以及在离线时如何响应请求。
关键点包括：
- 注册并安装 Service Worker 后，它会监听 fetch 事件来拦截网络请求
- 使用 Cache API 存储和读取请求/响应对
- 支持多种缓存策略：缓存优先、网络优先、网络回退到缓存等
常见的缓存策略实现方式
根据不同的业务需求，可以选择合适的缓存策略。以下是几种典型模式：
立即学习“Java免费学习笔记（深入）”；
1. 缓存优先（Cache First）优先从缓存读取资源，只有缓存中没有才发起网络请求。适合静态资源如图片、CSS、JS 文件。
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request);
})
);
});
2. 网络优先（Network First）
总是尝试从网络获取最新内容，失败时再使用缓存。适合动态内容如用户数据。
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match(event.request);
})
);
});
3. 缓存+网络并行（Stale-While-Revalidate）
先返回缓存内容（即使过期），同时发起网络请求更新缓存。兼顾速度与数据新鲜度。
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cached) => {
const fetched = fetch(event.request).then((networkResponse) => {
if (networkResponse) {
caches.open('dynamic-cache').then((cache) => {
cache.put(event.request, networkResponse.clone());
});
}
return networkResponse;
}).catch(() => cached);
return cached || fetched;
})
);
});
生命周期与缓存管理
理解 Service Worker 的生命周期对正确管理缓存至关重要。主要阶段包括：
- install：安装阶段，通常在这里预缓存核心资源
- activate：激活阶段，可用于清理旧缓存，避免占用过多空间
- fetch：每次网络请求都会触发，用于动态缓存或返回缓存内容
示例：在 activate 阶段清除过期缓存
self.addEventListener('activate', (event) => {
const currentCaches = ['static-v2', 'dynamic-cache'];
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (!currentCaches.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
基本上就这些。合理利用 Service Worker 的缓存机制，能让你的 Web 应用更快速、更可靠，尤其是在网络不稳定的情况下表现更佳。不复杂但容易忽略的是缓存版本管理和更新逻辑，务必确保用户能及时获取新内容。
