service-worker - 识别 FetchEvent 请求的来源/来源

Question

ServiceWorker 有什么方法可以识别 no-cors/opaque FetchEvent.Request 的来源吗？或者我们可以显式地将标识信息/数据从 HTML 传递到可用于识别 FetchEvents 来源的 ServiceWorker 吗？我使用查询字符串参数编写了一个解决方案，但我正在寻找比这更原生或更优雅的解决方案:

HTML

<img id="img1" src="image.jpg?imgId=img1" />
<img id="img2" src="image.jpg?imgId=img2" />

服务人员

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if(url.pathname.endsWith('/image.jpg')) {
    // get Element ID that initated the FetchEvent
    const imgId = url.searchParams.get('imgId');

    // Notify document that the fetch started
    clients.get(event.clientId)
    .then(client => client.postMessage({imgId}));
  }
})

Answer 1

首先，从 Service Worker 的角度来看fetch处理程序，该请求有一个 mode的'no-cors'不应该改变任何东西。 Opaque responses是为了防止第三方服务器的信息泄漏，但是当您谈论源自您自己的页面的请求被您自己的 Service Worker 拦截时，就没有同样担心信息泄露。

因此，一般来说，问题是是否有办法让浏览器向它为 DOM 中引用的任何子资源隐式创建的请求添加额外的标识信息。查看 Request object 中暴露的字段，除了 url 之外，真的没有其他任何东西了。您可以控制并可能设置一些有用的内容来识别您的传出请求。 (您将无法控制用于 DOM 中引用的子资源的隐式创建请求的 headers。)

如果您想防止使用参数将识别信息添加到url的“噪音” ，您应该能够摆脱使用哈希片段的问题，例如

<img id="img1" src="image.jpg#img1">
<img id="img2" src="image.jpg#img2">

service worker specification states哈希片段应包含在 request.url 中已传递到您的 fetch处理程序，因此您可以从那里读取它，但它实际上不会发送到远程服务器。

(如果您想区分用于图像、字体、脚本等的请求，您可以获得的东西之一是 destination 对象的 Request 。但这不会让您识别哪个特定的 <img> 负责给定的图像请求。)