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 文件。
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
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 应用更快速、更可靠，尤其是在网络不稳定的情况下表现更佳。不复杂但容易忽略的是缓存版本管理和更新逻辑，务必确保用户能及时获取新内容。
