Service Worker fetch报错求助：禁用请求缓存仍保留PWA功能

嘿，这个错误我太熟悉了——浏览器明确要求only-if-cached缓存模式必须和same-origin请求模式一起使用，你之前的代码大概率没满足这个规则，再加上你不想缓存动态变化的页面内容，那我们直接调整fetch事件的处理逻辑就好，同时还能保住PWA的核心功能（离线支持、静态资源缓存加速这些）。

下面是修改后的sw.js代码，我给你分了动态请求和静态资源两种处理逻辑，你可以根据自己的业务调整：

self.addEventListener('fetch', (event) => {
  // 处理动态请求：直接走网络，不缓存，避免缓存动态变化的内容
  if (isDynamicContent(event.request)) {
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          // 网络失败时返回离线备用页面，保留PWA离线体验
          return caches.match('/offline.html');
        })
    );
    return;
  }

  // 处理静态资源：用缓存优先策略，提升加载速度，保留PWA性能优势
  event.respondWith(
    caches.match(event.request)
      .then((cachedRes) => {
        // 优先返回缓存的静态资源，同时后台更新缓存
        return cachedRes || fetch(event.request)
          .then((networkRes) => {
            caches.open('static-assets-v1')
              .then((cache) => {
                cache.put(event.request, networkRes.clone());
              });
            return networkRes;
          })
          .catch(() => {
            // 静态资源也离线时，返回对应的备用资源（比如占位图）
            return caches.match('/fallback-static.png');
          });
      })
  );
});

// 自定义函数：判断是否为需要跳过缓存的动态请求
function isDynamicContent(request) {
  const requestUrl = new URL(request.url);
  // 这里的判断规则你可以根据实际情况修改：
  // 比如POST请求、包含/api/的接口、用户专属动态路径等
  return request.method !== 'GET' ||
         requestUrl.pathname.includes('/api/') ||
         requestUrl.pathname.includes('/user-specific/');
}

关键说明： #

• 动态请求完全走网络：这样就彻底避开了only-if-cached的使用场景，自然不会触发那个错误，同时保证用户看到的都是最新的动态内容。
• 静态资源保留缓存策略：CSS、JS、图片这些不会频繁变化的资源，用缓存优先策略既提升了页面加载速度，也是PWA的核心优势之一。
• 离线 fallback 处理：不管是动态还是静态请求，网络失败时都有对应的备用内容，保证PWA的离线可用性。

你只需要把isDynamicContent里的判断规则改成符合你业务的路径或请求特征就行，比如把你的动态页面URL、接口地址加进去。

内容的提问来源于stack exchange，提问作者GIA