2

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

1 回答 1

2

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

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

如果您想防止使用参数将识别信息添加到url.

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

服务工作者规范声明哈希片段应该包含在request.url传递给您的fetch处理程序的内容中，因此您可以从那里读取它，但它实际上不会被发送到远程服务器。

（如果您想区分将用于图像、字体、脚本等的请求，您可以获得destination的其中一件事是Request对象。但这不允许您确定哪个具体<img>负责给定图像请求。）

于 2018-02-27T15:11:12.903 回答