Cache API 是现代缓存管理的核心，取代已废弃的 AppCache，结合 Service Worker 实现离线访问与动态缓存。通过 install 事件预缓存资源、activate 事件清理旧缓存、fetch 事件实现网络优先策略，并采用版本化缓存名称确保更新。最佳实践包括使用内容哈希命名静态资源、合理设置动态内容缓存策略、借助 DevTools 调试及处理 CORS 限制，以平衡性能与数据新鲜度。
HTML5 提供了多种方式来管理应用缓存，其中主要涉及 Application Cache（AppCache） 和现代的 Cache API。需要注意的是，AppCache 已被废弃，推荐使用基于 Service Worker 和 Cache API 的方案进行缓存管理。
Cache API 简介
Cache API 是现代浏览器提供的一种强大工具，允许 JavaScript 显式地存储和读取网络请求和响应对象。它通常与 Service Worker 配合使用，实现离线访问、资源预加载和动态缓存策略。
常用操作包括：- 打开缓存：caches.open('cache-name')
- 添加资源：cache.add('/styles.css')
- 匹配请求：cache.match(request)
- 删除旧缓存：caches.delete('old-cache')
Cache API 的更新策略
缓存更新的核心在于控制何时获取最新资源，避免用户长期使用过期内容。以下是几种常见的更新策略：
1. 安装阶段预缓存最新资源
立即学习“前端免费学习笔记（深入）”；
在 Service Worker 的 install 事件中，可以缓存最新版本的静态资源。当 Service Worker 更新时，新缓存会被安装，确保用户获取新版文件。
示例代码：
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v2').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css?v=2',
'/app.js'
]);
})
);
});
2. 激活阶段清理旧缓存
在 activate 事件中清除旧版本缓存，防止缓存堆积。
示例代码：
self.addEventListener('activate', event => {
const currentCaches = ['v2'];
event.waitUntil(
caches.keys().then(names => {
return Promise.all(
names.map(name => {
if (!currentCaches.includes(name)) {
return caches.delete(name);
}
})
);
})
);
});
3. 网络优先 + 后台更新缓存
优先从网络获取最新内容，成功后更新缓存，保证用户看到最新数据的同时提升下次加载速度。
示例策略：
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).then(response => {
// 将最新响应存入缓存
caches.open('dynamic').then(cache => {
cache.put(event.request, response.clone());
});
return response;
}).catch(() => {
// 失败时读取缓存
return caches.match(event.request);
})
);
});
4. 版本化缓存名称
通过在缓存名称中加入版本号或哈希值（如 'assets-v1.2.3'），强制更新缓存。只要 Service Worker 脚本发生变化，就会触发 install 流程，从而加载新缓存。
最佳实践建议
- 避免使用已废弃的 AppCache，改用 Cache API + Service Worker
- 为静态资源使用内容哈希命名（如 style.a1b2c3.css），便于长期缓存
- 对动态内容采用合理的过期或重新验证策略
- 在开发时利用 Chrome DevTools 的 Application 面板调试缓存行为
- 注意跨域请求的缓存限制，确保 CORS 配置正确
