Service Worker 中常用的缓存策略有哪些？

Service Worker 缓存策略详解

缓存策略是 Service Worker 的核心功能，决定了如何处理网络请求和缓存资源。

1. Cache First（缓存优先）

策略描述：优先从缓存获取，缓存不存在则请求网络。

适用场景：静态资源（CSS、JS、图片等），不经常变化的内容。

javascript
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

优点：加载速度快，离线可用 缺点：可能返回过期内容

2. Network First（网络优先）

策略描述：优先请求网络，失败时回退到缓存。

适用场景：实时性要求高的数据（API 请求、用户数据）。

javascript
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match(event.request);
    })
  );
});

优点：获取最新数据 缺点：网络慢时体验差

3. Cache Only（仅缓存）

策略描述：只从缓存获取，不请求网络。

适用场景：预缓存的静态资源。

javascript
self.addEventListener('fetch', event => {
  event.respondWith(caches.match(event.request));
});

4. Network Only（仅网络）

策略描述：只请求网络，不使用缓存。

适用场景：实时性要求极高的数据（支付、敏感操作）。

javascript
self.addEventListener('fetch', event => {
  event.respondWith(fetch(event.request));
});

5. Stale While Revalidate（过期时重新验证）

策略描述：先返回缓存，同时后台更新缓存。

适用场景：需要快速响应但又要保持更新的内容。

javascript
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('dynamic-cache').then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      });
    })
  );
});

优点：快速响应 + 后台更新 缺点：用户可能看到旧数据

6. 自定义策略组合

根据请求类型选择不同策略：

javascript
self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);
  
  // 静态资源 - Cache First
  if (request.destination === 'style' || 
      request.destination === 'script' ||
      request.destination === 'image') {
    event.respondWith(cacheFirst(request));
  }
  // API 请求 - Network First
  else if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(request));
  }
  // 页面导航 - Stale While Revalidate
  else if (request.mode === 'navigate') {
    event.respondWith(staleWhileRevalidate(request));
  }
});

缓存策略对比表

策略	速度	实时性	离线可用	适用场景
Cache First	⭐⭐⭐	⭐	✅	静态资源
Network First	⭐	⭐⭐⭐	✅	实时数据
Stale While Revalidate	⭐⭐⭐	⭐⭐	✅	平衡场景
Cache Only	⭐⭐⭐	⭐	✅	预缓存资源
Network Only	⭐	⭐⭐⭐	❌	敏感操作

最佳实践

1. 分层缓存：静态资源 Cache First，API 请求 Network First
2. 缓存版本控制：使用版本号管理缓存，便于更新
3. 缓存大小限制：定期清理过期缓存，避免存储溢出
4. 错误处理：网络失败时提供优雅的降级方案