SvelteKit客户端load函数的Fetch请求无法被Service Worker拦截？

问题核心 #

SvelteKit客户端+page.ts的load函数发起的/api/allTeams请求，以及invalidateAll()触发的重新请求，均未触发Service Worker的fetch事件，即便Chrome DevTools显示请求已被缓存。

解决方案 #

1. 修正Service Worker的Install事件逻辑 #

当前install事件未等待缓存操作完成，可能导致缓存未成功添加，需确保异步操作的正确性：

self.addEventListener('install', async function (event) {
  event.waitUntil(
    (async () => {
      const cache = await caches.open("ccs-" + version);
      // 等待单个请求缓存完成
      await cache.add("/api/allTeams");
      // 等待静态资源缓存完成
      await cache.addAll(build);
    })()
  );
});

2. 确保SvelteKit的Fetch调用符合拦截条件 #

SvelteKit对fetch做了封装，默认参数可能导致Service Worker无法拦截。显式指定请求选项，强制使用浏览器原生Fetch行为：

export async function load(request: Request) {
  const searchQuery = new URL(request.url).searchParams.get("q");
  const apiUrl = new URL(request.url);
  apiUrl.pathname = "/api/allTeams";

  // 显式指定选项，确保请求可被Service Worker拦截
  const req = await fetch(apiUrl, {
    credentials: "same-origin",
    cache: "default",
    mode: "cors"
  });
  const data = await req.json();

  return { data, searchQuery };
}

3. 验证Service Worker激活状态 #

• 注册Service Worker后，需刷新页面才能让SW接管当前页面的请求（首次注册时，已加载的请求不会被拦截）。
• 在Chrome DevTools的Application > Service Workers面板，确认SW处于active状态，勾选Update on reload方便调试。

4. 测试基础Fetch请求是否被拦截 #

在浏览器控制台直接发起原生Fetch请求，验证Service Worker的fetch事件是否触发：

fetch("/api/allTeams").then(res => res.json());

如果此请求能触发SW的日志，说明问题出在SvelteKit的Fetch封装上，可在load函数中强制使用window.fetch：

const req = await window.fetch(apiUrl);

5. 检查请求缓存策略 #

若浏览器HTTP缓存优先于Service Worker，可在fetch事件中添加日志查看请求属性：

self.addEventListener('fetch', function (event) {
  console.log("Fetch intercepted:", event.request.url, "Cache mode:", event.request.cache);
  // 原有响应逻辑
});

若请求cache为only-if-cached，需调整load函数中的cache选项为default或no-store。

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