Question

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

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

我非常确定服务工作者是否正确设置，因为我确实检测到资源请求被触发的事件（如/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")
    );
  }
}

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

3 个答案: