javascript - Service Worker 当前正在服务的页面的 URL 'fetch' 事件

Question

如何获取服务工作人员的“获取”事件所服务页面的完整 URL？

“self.location”属性似乎仅指站点的根 URL。例如，如果页面 https://example.com/folder/pagename.html正在执行 service worker 正在拦截的获取，service worker 的“self.location”属性返回“https://example.com”。

event.currentTarget.location 和 event.explicitOriginalTarget.location、event.originalTarget 和 event.target 都返回 service worker .js 文件的 URL。

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

Answer 1

您有两种通用方法，具体取决于您希望参与的程度:

使用“Referer” header 信息

如果请求是针对子资源的并且包含 Referer header ，那么该 header 的值很可能是发出请求的页面的 URL。 (有一些注意事项；阅读 this background info 以深入研究。)

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

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 的方法都是异步的，并且返回 promise ，所以如果您以某种方式使用客户端窗口的 URL 来确定是否你想调用 event.respondWith()，你运气不好(这个决定需要同步做出，当 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...
      }
    }
  }
});