服务工作者“获取”事件当前正在服务的页面的URL

Question

如何获取由服务人员的“获取”事件提供服务的页面的完整URL？

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

事件当前目标。地点和活动。明确目标。地点、事件。原始目标和事件。target all返回服务工作者的URL。js文件。

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

Answer 1

根据你想参与的程度，你有两种一般的方法：

如果请求是针对子资源的，并且包含Referer标头，那么该标头的值很有可能是发出请求的页面的URL。（有一些警告；请阅读此背景信息以深入了解。）

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

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

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

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

为了使这种方法发挥作用，需要支持不同的东西的组合，我不确定哪些浏览器目前支持我提到的所有内容。例如，我知道Chrome67可以（因为我刚刚在那里测试了它），但是如果这个功能对你很重要，你应该检查其他浏览器。

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...
      }
    }
  }
});