FetchEvent: метод respondWith()

Метод respondWith() объекта FetchEvent предотвращает обработку запроса браузером по умолчанию и позволяет вам предоставить обещание для Response.

В большинстве случаев вы можете предоставить любой ответ, который понимает получатель. Например, если запрос инициирует элемент <img>, ответ должен содержать данные изображения. По соображениям безопасности есть несколько глобальных правил:

• Вы можете возвращать только объекты Response типа type "opaque" если объект fetchEvent.request имеет значение mode равное "no-cors". Это предотвращает утечку конфиденциальных данных.
• Вы можете возвращать только объекты Response типа type "opaqueredirect" если объект fetchEvent.request имеет значение mode равное "manual".
• Вы не можете возвращать объекты Response типа type "cors" если объект fetchEvent.request имеет значение mode равное "same-origin".

Начиная с Firefox 59, когда сервис-воркер предоставляет Response для FetchEvent.respondWith(), значение Response.url будет распространено на перехваченный сетевой запрос в качестве окончательного разрешенного URL. Если значение Response.url пустое, то используется FetchEvent.request.url как окончательный URL.

Раньше FetchEvent.request.url использовался в качестве окончательного URL во всех случаях. Предоставленное значение Response.url фактически игнорировалось.

Это означает, например, что если сервис-воркер перехватывает запрос на загрузку стилей или скрипта рабочего процесса, то предоставленное значение Response.url будет использоваться для разрешения любых относительных @import или importScripts() подресурсов (баг Firefox 1222008).

Для большинства типов сетевых запросов это изменение не имеет последствий, поскольку вы не можете наблюдать окончательный URL. Однако существуют случаи, когда это важно:

• Если перехватывается запрос fetch(), то вы можете наблюдать окончательный URL в свойстве Response.url результата.
• Если перехватывается скрипт рабочего процесса, то окончательный URL используется для установки значения self.location и используется в качестве базового URL для относительных URL-адресов в скрипте рабочего процесса.
• Если перехватывается запрос на стили, то окончательный URL используется в качестве базового URL для разрешения относительных @import загрузки.

Обратите внимание, что запросы на навигацию для Windows и iframes НЕ используют окончательный URL. Способ, которым спецификация HTML обрабатывает перенаправления для навигации, в итоге использует URL запроса для полученного Window.location. Это означает, что сайты по-прежнему могут предоставлять «альтернативный» вид веб-страницы при отключении сети, не изменяя отображаемый пользователю URL.

response

Объект Response или обещание Promise, которое разрешается в объект Response. В противном случае Fetch возвращает ошибку сети.

Ничего (undefined).

NetworkError DOMException

Возвращается, если возникает ошибка сети при определенных сочетаниях значений FetchEvent.request.mode и Response.type, как указано в «глобальных правилах» выше.

InvalidStateError DOMException

Возвращается, если событие ещё не было вызвано или метод respondWith() уже был вызван.

Это событие fetch пытается вернуть ответ из кэша API, в противном случае обращаясь к сети.

addEventListener("fetch", (event) => {
  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cachedResponse = await caches.match(event.request);
      // Return it if we found one.
      if (cachedResponse) return cachedResponse;
      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});

• Использование Service Workers
• Fetch API