识别 FetchEvent 请求的来源/来源

Question

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

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

首先，从服务工作者的fetch 处理程序的角度来看，请求具有mode 或'no-cors' 的事实不应该改变任何东西。 Opaque responses 是为了防止第三方服务器的信息泄漏，但是当您谈论源自您自己的页面的请求被您自己的服务人员拦截时，有对信息泄露的担忧不一样。

因此，一般来说，问题在于是否有办法让浏览器将额外的识别信息添加到它为 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 表示哈希片段应该包含在传递给您的 fetch 处理程序的 request.url 中，因此您可以从那里读取它，但它实际上不会被发送到远程服务器。

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