URL-адрес страницы, которая в данный момент обслуживается событием 'Работник сервиса'

Question

Как я могу получить полный URL-адрес страницы, которая обслуживается событием 'fetch' работника сервиса?

Кажется, что свойство self.location относится только к корневому URL сайта. Например, если страница https://example.com/folder/pagename.html выполняет выборку, которую перехватывает работник службы, свойство self.location работника службы возвращает "https://example.com".

event.currentTarget.location и event.explicitOriginalTarget.location, event.originalTarget и event.target все возвращают URL-адрес рабочего файла .js работника сервиса.

Как я могу получить полный URL страницы, которая вызвала событие извлечения?

Answer 1

У вас есть два основных подхода, в зависимости от того, насколько вы хотите участвовать:

Использовать информацию заголовка 'Referer'

Если запрос относится к подресурсу и содержит заголовок Referer, то вполне вероятно, что значением этого заголовка является URL-адрес страницы, которая сделала запрос. (Есть некоторые предостережения; прочитайте эту справочную информацию , чтобы углубиться в это.)

Из обработчика fetch вы можете прочитать значение этого заголовка следующим образом:

self.addEventListener('fetch', event => {
  const clientUrl = event.request.referrer;
  if (clientUrl) {
    // Do something...
  } 
});

Использовать значение clientId

Другой подход состоит в том, чтобы использовать значение clientId, которое (может) быть выставлено на FetchEvent, а затем использовать clients.get(id) или пройти через вывод clients.matchAll(), чтобы найти соответствующее WindowClient. Затем вы можете прочитать свойство url этого WindowClient.

Одно предостережение при таком подходе заключается в том, что все методы, которые ищут WindowClient, являются асинхронными и возвращают обещания, поэтому, если вы каким-то образом используете URL-адрес окна клиента, чтобы определить, хотите ли вы вызвать event.respondWith(), вам не повезло (это решение должно приниматься синхронно, когда впервые вызывается обработчик FetchEvent).

Для того, чтобы этот подход работал, требуется сочетание разных вещей, и я не уверен, какие браузеры в настоящее время поддерживают все, что я упомянул. Я знаю, что Chrome 67, например, (потому что я только что протестировал его там), но вы должны проверить в других браузерах, важна ли эта функция для вас.

self.addEventListener('fetch', async event => {
  const clientId = event.clientId;
  if (clientId) {
    if ('get' in clients) {
      const client = await clients.get(clientId);
      const clientUrl = client.url;
      // Do something...
    } else {
      const allClients = await clients.matchAll({type: 'window'});
      const filtered = allClients.filter(client => client.id === clientId);
      if (filtered.length > 0) {
        const clientUrl = filtered[0].url;
        // Do something...
      }
    }
  }
});