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

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(() =>
      caches.match(event.request)
    )
  );
});
</font>

仅缓存（Cache Only）

直接从缓存返回资源，不发起网络请求。适用于已知必须离线可用的内容。

AI视频剪辑工具

注意：需提前预缓存关键资源。

常见于：

• PWA 的离线页面
• 核心 JS 和 CSS 入口文件

示例：

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

网络与缓存结合（Stale While Revalidate）

先返回缓存内容以保证速度，同时发起网络请求更新缓存。用户体验流畅，内容保持相对新鲜。

推荐用于：

• API 接口数据
• 用户头像、配置信息等低频变动资源

实现逻辑：

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

基本上就这些。选择合适的缓存策略要根据资源类型、更新频率和用户体验需求来定。混合使用多种策略往往效果最佳。注意版本管理缓存名称，避免旧资源无法更新。注册 Service Worker 后记得处理更新逻辑，确保客户端及时获取新版本。不复杂但容易忽略细节。