javascript - 用于请求根路径的 Service Worker "fetch"事件从不触发

Question

我正在尝试设置我的 Service Worker以便它拦截对主页的请求(即主页，如 www.mywebsite.com/)，这最终将允许我返回一个缓存的模板。到目前为止，我的代码看起来像这样:

主要.js:

navigator.serviceWorker.register('/sw.js')

sw.js:

self.addEventListener('fetch', function(event) {
  console.log(event.request.url)
  /**
   * only ever detects requests for resources but never the route itself..
   *
   * logged:
   * https://www.mywebsite.com/main.js
   * https://www.mywebsite.com/myimage.png
   *
   * not logged:
   * https://www.mywebsite.com/
   */
})

我很确定 service worker 设置正确，因为我确实检测到为资源请求(如 /main.js 或 /myimage.png)触发的事件)。但是，问题是只有 资源的事件会被触发，即使我希望触发请求路由本身 (/) 的事件。我是否遗漏了什么，或者我应该监听不同的事件？

谢谢

Answer 1

我发现对根路径的请求实际上被拦截了。我从未注意到这一点的原因是因为请求发生在页面加载之前(即甚至在没有要登录的控制台之前)。如果我在 Chrome DevTools 中打开 Preserve log 功能，我会注意到根路径请求的日志。