Service Worker无法拦截fetch请求，已配置仍无效求助

我尝试从/worker.js加载Service Worker，目标是让它拦截所有指向/localzip/*的fetch请求，但fetch事件始终未触发。

注册Service Worker的代码： #

navigator.serviceWorker.register(
    "worker.js",
    { scope: "/localzip/" }
);

Service Worker激活逻辑： #

我在激活时调用了clients.claim()，确保立即控制当前页面，并且确认Service Worker已激活、该方法执行成功：

self.addEventListener("activate", (e) => {
    // Important! Start processing fetches for all clients immediately.
    //
    // MDN: "When a service worker is initially registered, pages won't use it
    // until they next load. The claim() method causes those pages to be
    // controlled immediately."
    e.waitUntil(clients.claim());
});

Chrome开发者工具显示Service Worker状态正常，作用域也正确：

fetch事件处理函数： #

self.addEventListener("fetch", (e) => {
    console.log("Trying to make fetch happen!");
});

测试请求： #

等Worker激活后，我发起了如下请求，但该请求直接触发浏览器向服务器发起请求（返回404），并未触发fetch事件：

const response = await fetch("/localzip/lol.jpg");

已尝试的操作： #

• 确保运行的是最新版本的Worker代码
• 禁用/清除缓存，避免fetch请求被浏览器缓存处理
• 使用HTTPS服务器托管（开发环境下Chrome支持明文localhost运行Service Worker）

还有什么我没考虑到的？

在线演示说明：演示中作用域略有不同，fetch请求通过创建<img>标签触发。

可能的原因及解决方法 #

1. 页面不在Service Worker作用域内，未被控制
   Service Worker的作用域/localzip/默认仅控制URL属于该路径下的页面。如果你的测试页面在根目录（如http://localhost:3000/），即便调用clients.claim()，页面也不会被该Service Worker控制，发起的请求自然无法被拦截。

解决方式：

• 将测试页面移至/localzip/路径下
• 把Service Worker的作用域改为根目录"/"（需确保worker.js在根目录，浏览器允许脚本控制更大的作用域）
• 若需保留原有作用域，可在服务器配置中添加Service-Worker-Allowed响应头，允许worker.js控制更大范围（如Service-Worker-Allowed: /）

2. 请求使用了绕过Service Worker的模式
   如果fetch请求设置了mode: "no-cors"，这类请求会跳过Service Worker的拦截逻辑。检查请求代码，确保使用默认的same-origin或cors模式。

3. 页面未确认被Service Worker控制
   在浏览器控制台执行navigator.serviceWorker.controller，若返回null，说明页面未被控制。可在注册后监听controllerchange事件，确认控制状态后再发起请求：

navigator.serviceWorker.register("worker.js", { scope: "/localzip/" })
  .then(registration => {
    navigator.serviceWorker.addEventListener("controllerchange", () => {
      if (navigator.serviceWorker.controller) {
        console.log("页面已被Service Worker控制");
        // 在此发起测试请求
      }
    });
  });

4. Service Worker更新未生效
   除清除缓存外，可在注册脚本时添加版本参数强制更新：

navigator.serviceWorker.register(
    "worker.js?v=1",
    { scope: "/localzip/" }
);

同时在Chrome开发者工具的Application面板中点击“Update”按钮，确保新版本Worker完成安装激活。

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