Cache API 在 Service Worker 中如何实现离线缓存策略？

Cache API：浏览器提供的请求-响应缓存存储机制，与 Service Worker 配合实现离线功能。

基本操作：

// 打开缓存
const cache = await caches.open('my-cache-v1');
// 添加
await cache.add('/api/data');      // fetch 后缓存
await cache.put(url, response);    // 手动放入
// 读取
const res = await cache.match('/api/data');
// 删除
await cache.delete('/api/data');
// 遍历
const keys = await cache.keys();

常见缓存策略：

1. Cache First（缓存优先）：有缓存则直接返回，否则请求网络并缓存

event.respondWith(
  caches.match(event.request).then(cached => {
    return cached || fetch(event.request).then(res => {
      return caches.open('v1').then(cache => {
        cache.put(event.request, res.clone());
        return res;
      });
    });
  })
);

2. Network First（网络优先）：优先请求网络，失败时用缓存 3. Stale-While-Revalidate：先返回缓存，同时更新缓存供下次使用 4. Network Only：始终请求网络 5. Cache Only：仅用缓存

使用场景：

• 静态资源（CSS/JS/图片）→ Cache First
• API 数据 → Network First 或 Stale-While-Revalidate
• 离线页面 → Cache First