识别 Origin/Source 的 FetchEvent 请求

Question

ServiceWorker 有什么方法可以识别 no-cors/opaque FetchEvent.Request 的来源吗？或者我们可以明确地将识别 information/data 从 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

首先，从 Service Worker 的 fetch 处理程序的角度来看，请求的 mode 为 'no-cors' 这一事实不应改变任何内容。 Opaque responses 是为了防止信息从 third-party 服务器泄漏，但是当你谈论一个请求时，它源自你自己的页面被拦截你自己的 service worker，就不会再担心信息泄露了。

因此，一般来说，问题是是否有办法让浏览器在它为您的 DOM 中引用的任何子资源隐式创建的请求中添加额外的识别信息。查看 Request object 中公开的字段，除了 url 之外，您实际上没有其他任何东西可以控制并且可能设置为对识别您的传出请求有用的东西。（对于用于 DOM 中引用的子资源的隐式创建请求，您将无法控制 headers。）

如果你想防止 "noise" 使用参数将识别信息添加到 url，你应该可以使用散列片段，例如

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

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

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

识别 Origin/Source 的 FetchEvent 请求

Identify Origin/Source of FetchEvent Request

service-worker

fetch-api

service-worker-events