Service Worker'fetch'事件当前正在提供的页面的URL

Question

如何获取服务工作者的'fetch'事件所服务的网页的完整网址？

“self.location”属性似乎只引用站点的根URL。例如，如果页面https://example.com/folder/pagename.html正在执行服务工作者正在拦截的提取，则服务工作者的“self.location”属性将返回“https://example.com”。

event.currentTarget.location和event.explicitOriginalTarget.location，event.originalTarget和event.target都返回服务工作者.js文件的URL。

如何获取触发fetch事件的页面的完整URL？

Answer 1

您有两种常规方法，具体取决于您希望获得的方式：

使用“Referer”标题信息

如果请求是针对子资源并且包含Referer标头，那么该标头的值很可能是发出请求的页面的URL。 （有一些警告;请阅读this background info以深入研究。）

在fetch处理程序中，您可以使用以下内容读取该标头的值：

self.addEventListener('fetch', event => {
  const clientUrl = event.request.referrer;
  if (clientUrl) {
    // Do something...
  } 
});

使用clientId值

另一种方法是使用（可能）在clientId上公开的FetchEvent值，然后使用clients.get(id)或循环浏览clients.matchAll()的输出来查找匹配WindowClient。然后，您可以阅读url的{​​{1}}属性。

使用这种方法的一个警告是，查找WindowClient的方法都是异步的，并返回promise，所以如果你以某种方式使用客户端窗口的URL来确定你是否想要调用WindowClient，你运气不好（当首次调用event.respondWith()处理程序时，需要同步做出决定。）

为了使这种方法起作用，需要支持不同的组合，我不确定哪些浏览器目前支持我提到的所有内容。我知道Chrome 67确实存在（因为我刚刚在那里进行了测试），但如果此功能对您很重要，您应该在其他浏览器中查看。

FetchEvent