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

Question

我正在尝试设置我的 Service Worker 以便它拦截对主页的请求（即主页，如 www.mywebsite.com/），最终允许我 return 一个缓存的模板。到目前为止，我的代码如下所示：

main.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

您可以将 .then() 链接到。 .register() 调用然后检查 location.href 以确定 ServiceWorker 已注册的页面

  navigator.serviceWorker.register("sw.js")
  .then(function(reg) {
    if (location.href === "https://www.mywebsite.com/") {
      // do stuff
      console.log(location.href, reg.scope);
    }
  })
  .catch(function(err) {
    console.error(err);
  });

Answer 2

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

Answer 3

在 https://livebook.manning.com/book/progressive-web-apps/chapter-4/27 的帮助下，我刚刚弄明白了这一点。这是我的服务人员的简短版本：

const cacheName = "Cache_v1";

const urlsToCache = [
 "Offline.html"
  // styles, images and scripts
 ];
 
self.addEventListener('install', (e) => 
{
  e.waitUntil(
    caches.open(cacheName).then((cache) => 
    {
      return cache.addAll(urlsToCache);   
    })
  );
});

self.addEventListener('fetch', (e) => 
{ 
  if (e.request.url == "https://<DOMAIN_NAME>/")
  {
    console.log("root");
    e.respondWith(
      fetch("offline.html")
    );
  }
}

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

Service Worker "fetch" event for requesting the root path never fires

javascript

service-worker

service-worker-events