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 配置正确
基本上就这些。Cache API 给开发者精细控制缓存的能力，关键在于设计清晰的版本管理和更新逻辑，平衡性能与内容新鲜度。