Cache API 是 Service Worker 提供的缓存机制，实现缓存优先策略：先查缓存，命中则返回，否则请求网络并缓存响应；需注意版本化命名、过滤非200响应、避免缓存非幂等请求，且与 HTTP 缓存头并行。
在 JavaScript 中，Cache API 是 Service Worker 提供的核心缓存能力，专为 PWA 设计，能真正实现“缓存优先（Cache First）”策略：请求先查缓存，命中则直接返回；未命中再走网络，并把响应存入缓存供后续复用。
缓存优先策略的核心逻辑
缓存优先不是简单地“有就用、没有就拉”，而是明确将缓存作为第一响应源，仅在网络不可用或缓存缺失时才降级。它适合静态资源（如 HTML、CSS、JS）、低频变动接口（如用户配置、地区列表）等场景。
- 拦截 fetch 事件，在 Service Worker 中统一处理
- 调用 caches.match(request) 查找匹配缓存
- 若命中，直接返回 Response；否则发起 fetch，并在成功后用 cache.put() 存储响应副本
- 注意：Response 流只能读取一次，需用 response.clone() 分离副本用于缓存和返回
Service Worker 中的完整实现示例
以下代码注册一个缓存优先策略，针对所有 GET 请求生效：
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
<!-- 在 sw.js 中 -->
立即学习“Java免费学习笔记（深入）”；
self.addEventListener('fetch', event => {
if (event.request.method === 'GET') {
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request).then(response => {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
caches.open('my-cache-v1').then(cache => {
cache.put(event.request, responseToCache);
});
return response;
});
});
}
});
关键注意事项
- 缓存命名需版本化：如 'my-cache-v1'，更新策略或清旧缓存时可通过 install 事件删除旧缓存
- 只缓存安全响应：过滤 status !== 200 或 type === 'opaque' 的跨域不透明响应（无法缓存）
- 避免缓存 POST/PUT 等非幂等请求：Cache API 默认不建议缓存这些方法，且 fetch 的 cache 选项对它们无效
- 不替代 HTTP 缓存头：Cache API 是应用层控制，与 Cache-Control 并行存在；二者可协同，但逻辑独立
与 localStorage 缓存的本质区别
Cache API 缓存的是完整的 Request/Response 对象（含 headers、status、body），支持流式读取、跨域资源、Service Worker 全局拦截；而 localStorage 只能存字符串，需手动序列化/反序列化，无原生过期机制，也不参与 fetch 生命周期。前者是现代 Web 的标准缓存方案，后者适合轻量、业务侧的数据暂存。
