Service Worker缓存策略是PWA核心，通过Cache First、Network First等策略提升离线可用性与加载速度，结合版本控制与Workbox工具实现高效缓存管理。
要实现一个高效可靠的PWA（渐进式Web应用），Service Worker 的缓存策略是核心环节之一。它决定了应用在离线或弱网环境下的可用性与加载速度。合理的缓存机制不仅能提升用户体验，还能减少服务器压力。
理解Service Worker的作用
Service Worker 是一个运行在浏览器后台的脚本，独立于网页主线程，具备拦截和处理网络请求的能力。通过注册并激活 Service Worker，你可以自定义资源的获取方式，优先从缓存读取内容，从而实现离线访问。
关键特性包括：
- 可编程的网络代理：能拦截 fetch 请求并返回缓存响应
- 生命周期管理：经历注册、安装、激活等阶段，适合做缓存初始化
- 事件驱动：响应 fetch、push、sync 等事件
常见缓存策略及其适用场景
根据资源类型和更新频率，可以选择不同的缓存策略组合使用：
1. Cache Only（仅缓存）直接从缓存中读取资源，不发起网络请求。适用于已知稳定不变的静态资源，如框架文件、图标、初始HTML。
2. Network Only（仅网络）每次都从网络获取最新数据，不使用缓存。适合实时性要求高的内容，比如用户私有数据或动态API接口。
3. Cache First（缓存优先）先尝试从缓存读取，命中则返回；未命中再发起网络请求，并将结果存入缓存。非常适合静态资源（CSS、JS、图片）和版本化文件。
可在安装阶段预缓存核心资源：
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => cache.addAll([
'/',
'/styles/main.css',
'/scripts/app.js'
]))
);
});
4. Network First（网络优先）
优先请求网络，成功则返回并更新缓存；失败时回退到缓存。适合内容常变但需保证离线可用的数据，如文章列表或新闻页。
5. Stale-While-Revalidate（缓存可用时先返回，再异步更新）立即返回缓存内容（即使过期），同时发起网络请求更新缓存。兼顾速度与数据新鲜度，适合头像、配置信息等非关键数据。
缓存更新与版本控制
为避免旧缓存导致用户无法获取新功能，必须设计良好的版本升级机制：
- 通过更改缓存名称（如 cache-v1 → cache-v2）标识新版本
- 在 activate 事件中清理旧缓存，释放存储空间
- 利用 webpack 或 Workbox 自动生成缓存清单，降低手动维护成本
示例：清除过期缓存
self.addEventListener('activate', event => {
const expectedCaches = ['v2'];
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.map(key => {
if (!expectedCaches.includes(key)) {
return caches.delete(key);
}
})
)
)
);
});
结合工具提升开发效率
手动编写 Service Worker 容易出错且难以维护。推荐使用 Workbox 这类官方工具库：
- 提供声明式路由和多种内置缓存策略
- 支持预缓存、后台同步、推送通知等高级功能
- 集成构建工具（如 Webpack、Vite），自动处理资源哈希与版本更新
基本上就这些。选对策略、管好版本、善用工具，才能让 PWA 在各种网络条件下都表现稳定。
