Определить источник / источник запроса 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' не должно ничего менять. Непрозрачные ответы - это вещь, предотвращающая утечку информации со сторонних серверов, но когда вы говорите о том, чтозапрос, исходящий с вашей собственной страницы, перехвачен вашим работником службы, то не возникает такой же проблемы утечки информации.,

Итак, в общем, вопрос заключается в том, есть ли способ заставить браузер добавлять дополнительную идентифицирующую информацию к запросам, которые он неявно создает для любого подресурса, на который есть ссылка в вашей DOM. Взгляните на поля, выставленные вRequest объект, на самом деле нет ничего, кромеurlчто вы можете контролировать и потенциально можете установить что-то полезное для идентификации ваших исходящих запросов. (Вы не сможете контролироватьheadersдля неявно созданных запросов, используемых для подресурсов, на которые есть ссылки в вашей DOM.)

Если вы хотите предотвратить "шум" использования параметров, чтобы добавить идентификационную информацию вurl, вы должны быть в состоянии уйти с использованием фрагментов хеша, как

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

Спецификация сервисного работника гласит, что хеш-фрагмент должен быть включен вrequest.urlэто передано вашемуfetchобработчик, так что вы можете прочитать его оттуда, но на самом деле он не будет отправлен на удаленный сервер.

(Одна из вещей, которые вы можете получить, этоdestination из Request объект, если вы хотите различать запросы, которые будут использоваться для изображений, шрифтов, скриптов и т. д. Но это не позволит вам определить, какие именно <img> был ответственным за данный запрос изображения.)