Cache API结合Service Worker可实现离线访问与性能优化，通过缓存优先、网络优先、预缓存等策略适配不同资源类型，并借助版本控制管理缓存生命周期，提升PWA用户体验。
在 PWA 应用中，Cache API 是实现离线访问和提升加载速度的核心工具。通过合理使用 Cache API 配合 Service Worker，可以制定灵活、高效的资源缓存策略，从而优化用户体验。
理解 Cache API 的基本能力
Cache API 允许你在 Service Worker 中显式地存储和读取网络请求的响应。它支持对 request-response 对的增删改查，适用于静态资源（如 HTML、CSS、JS、图片）以及部分动态数据。
常用方法包括：
- caches.open(cacheName) ：打开指定名称的缓存存储空间
- cache.put(request, response) ：将请求和响应存入缓存
- cache.match(request) ：从缓存中查找匹配的响应
- cache.delete(request) ：删除缓存中的某项
实现常用的缓存策略
根据资源类型和更新频率，可以选择不同的缓存策略：
1. 缓存优先，网络回退（Cache First）适用于不常变动的静态资源，比如框架文件、图标、样式表等。
Service Worker 尝试从缓存读取资源，找不到时再发起网络请求，并将新响应加入缓存。
self.addEventListener('fetch', event => {
if (event.request.destination === 'script' || event.request.destination === 'style') {
event.respondWith(
caches.match(event.request).then(cached => {
return cached || fetch(event.request).then(response => {
const responseClone = response.clone();
caches.open('static-cache').then(cache => {
cache.put(event.request, responseClone);
});
return response;
});
})
);
}
});
2. 网络优先，缓存备用（Network First with Fallback）
适合内容频繁变化的页面或接口数据，优先获取最新内容，失败时使用旧缓存。
self.addEventListener('fetch', event => {
if (event.request.url.includes('/api/')) {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match(event.request);
})
);
}
});
3. 持久化核心资源（Install 时预缓存）
在 Service Worker 安装阶段，提前缓存关键资源，确保应用可离线运行。
const CORE_ASSETS = [
'/',
'/index.html',
'/app.js',
'/styles.css',
'/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open('core-v1').then(cache => {
return cache.addAll(CORE_ASSETS);
})
);
});
结合版本控制与缓存清理
为避免缓存过期或占用过多空间，应引入缓存版本管理。
每次更新应用时升级缓存名称（如从 core-v1 到 core-v2），并在 activate 阶段清除旧缓存。
self.addEventListener('activate', event => {
const expectedCaches = ['core-v2', 'static-cache'];
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.map(key => {
if (!expectedCaches.includes(key)) {
return caches.delete(key);
}
})
)
)
);
});
这样可以保证用户始终使用最新资源，同时避免冗余缓存堆积。
基本上就这些。通过组合不同策略，你可以为 PWA 构建出智能、可靠的资源缓存机制，显著提升性能和离线体验。关键是根据资源特性选择合适的方式，并做好缓存生命周期管理。
