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

Question

如何获取服务工作者的“获取”事件正在服务的页面的完整 URL？

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

event.currentTarget.location 和 event.explicitOriginalTarget.location、event.originalTarget 和 event.target 都返回 service worker .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值

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

使用这种方法的一个警告是，查找 WindowClient 的方法都是异步的，并返回承诺，所以如果您以某种方式使用客户端窗口的 URL 来确定是否要调用 @ 987654334@，你运气不好（这个决定需要同步做出，当FetchEvent处理程序第一次被调用时）。

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

self.addEventListener('fetch', async event => {
  const clientId = event.clientId;
  if (clientId) {
    if ('get' in clients) {
      const client = await clients.get(clientId);
      const clientUrl = client.url;
      // Do something...
    } else {
      const allClients = await clients.matchAll({type: 'window'});
      const filtered = allClients.filter(client => client.id === clientId);
      if (filtered.length > 0) {
        const clientUrl = filtered[0].url;
        // Do something...
      }
    }
  }
});