Javascript 未调用服务工作者获取事件

我有以下代码

index.js

if (navigator.serviceWorker) {
  navigator.serviceWorker.register("/cache.js", {
    scope: "/",
  })
}

const cacheName = "app";

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.open(cacheName).then((cache) => {
      return fetch(event.request).then((response) => {
        cache.put(event.request, response.clone());
        return response;
      }).catch(() => {
        return cache.match(event.request);
      });
    }),
  );
});

self.addEventListener("activate", () => {
  self.clients.claim();
});

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(
        [
          "/",
          "/index.js",
          "/index.css",
          "/manifest.webmanifest",
          "/favicon.ico",
        ],
      );
    })
  );
});

cache.js

if (navigator.serviceWorker) {
  navigator.serviceWorker.register("/cache.js", {
    scope: "/",
  })
}

const cacheName = "app";

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.open(cacheName).then((cache) => {
      return fetch(event.request).then((response) => {
        cache.put(event.request, response.clone());
        return response;
      }).catch(() => {
        return cache.match(event.request);
      });
    }),
  );
});

self.addEventListener("activate", () => {
  self.clients.claim();
});

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(
        [
          "/",
          "/index.js",
          "/index.css",
          "/manifest.webmanifest",
          "/favicon.ico",
        ],
      );
    })
  );
});

调用每个事件时都不会出错，除了根本不会调用的

fetch

。我在做这一切。有人知道为什么这不起作用吗？我看过很多相关的帖子，他们只是让我走到了这一步