javascript - 用于请求根路径的服务工作者“获取”事件永远不会触发

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/
   */
})

我很确定服务人员设置正确，因为我确实检测到为资源请求（如/main.js或/myimage.png）而触发的事件。然而，问题是只有资源的事件被触发，即使我希望该事件请求路由本身（/）被触发。我错过了什么，还是应该听不同的事件？

谢谢

Answer 1

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

Answer 2

在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")
    );
  }
}

Answer 3

你可以链接.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);
  });