如何实现PWA中URL的Cache First缓存策略并按需更新？

我看了下你的代码，问题出在当前的fetch事件逻辑是Network First（优先网络请求），而你想要的是Cache First（优先读取缓存）策略。你的代码里event.respondWith是先尝试网络请求，失败后才去缓存查找，这和你要的“优先从缓存读取”正好相反。

下面我给你调整代码，实现真正的Cache First，同时保留后台按需更新缓存的能力——也就是用户加载页面时先返回缓存内容，后台悄悄去网络拉取最新资源更新缓存，下次访问就能拿到最新版本。

修改后的Fetch事件代码 #

self.addEventListener("fetch", event => {
  // 只对GET请求应用缓存策略，跳过POST等动态请求
  if (event.request.method !== 'GET') return;

  const CACHE_NAME = 'your-cache-name'; // 替换成你的缓存名称

  // 定义缓存更新逻辑：后台拉取最新资源并更新缓存
  const updateCache = async (request) => {
    try {
      const cache = await caches.open(CACHE_NAME);
      const response = await fetch(request);
      // 只缓存成功的响应（status 200+）
      if (response.ok) {
        console.log(`[PWA] 更新缓存: ${response.url}`);
        await cache.put(request, response.clone());
      }
    } catch (error) {
      console.log(`[PWA] 更新缓存失败: ${error}`);
    }
  };

  // 核心逻辑：优先读取缓存，后台更新
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // 不管缓存有没有命中，都后台更新缓存（确保下次用最新的）
        event.waitUntil(updateCache(event.request));

        // 如果缓存有内容，直接返回；没有就去网络请求
        if (cachedResponse) {
          console.log(`[PWA] 从缓存返回: ${event.request.url}`);
          return cachedResponse;
        }

        // 缓存没命中，发起网络请求
        return fetch(event.request)
          .then(networkResponse => {
            // 网络请求成功，把响应存入缓存（备用）
            caches.open(CACHE_NAME)
              .then(cache => cache.put(event.request, networkResponse.clone()));
            console.log(`[PWA] 从网络返回: ${event.request.url}`);
            return networkResponse;
          })
          .catch(() => {
            // 网络和缓存都失败，返回自定义离线页面（可选）
            console.log(`[PWA] 网络和缓存都无法响应请求: ${event.request.url}`);
            // return caches.match('/offline.html'); // 如果你有离线页面的话
            return new Response('离线状态下无法访问此内容', { status: 503 });
          });
      })
  );
});

关键逻辑解释 #

• Cache First 核心：先调用caches.match(event.request)查找缓存，如果找到直接返回给用户，这就实现了“优先从缓存读取”的效果。
• 后台更新缓存：不管缓存是否命中，都通过event.waitUntil(updateCache(event.request))在后台发起网络请求更新缓存，这样用户当前加载的是缓存的旧内容，但下次访问时缓存已经是最新的了。
• 请求过滤：增加了if (event.request.method !== 'GET') return;，避免缓存POST等动态请求（这类请求通常不需要缓存）。
• 容错处理：网络请求失败时，会返回友好的离线提示（或者你可以替换成自定义的离线页面）。

为什么你的原代码没实现Cache First？ #

你的原代码中event.respondWith是先执行fetch(event.request)，只有当网络请求失败时才去缓存查找，这是典型的Network First策略，适用于需要实时更新的内容，但不符合你要的“优先缓存”需求。

内容的提问来源于stack exchange，提问作者s-leg3ndz