FetchEvent

Это тип события для fetch событий, отправленных в глобальном контексте сервис-воркера. Оно содержит информацию о запросе, включая сам запрос и то, как получатель обработает ответ. Оно предоставляет метод event.respondWith(), позволяющий предоставить ответ на этот запрос.

FetchEvent()

Создаёт новый объект FetchEvent. Этот конструктор обычно не используется. Браузер создаёт эти объекты и предоставляет их обработчикам событий fetch.

Наследует свойства от предка, Event.

FetchEvent.clientId Только для чтения

Идентификатор id клиента с тем же происхождением, который инициировал запрос.

FetchEvent.handled Только для чтения

Обещание, которое находится в ожидании, пока событие не обработано, и выполняется, как только оно обработано.

FetchEvent.isReload Только для чтения Устаревший Нестандартный

Возвращает true если событие было вызвано пользователем, пытающимся перезагрузить страницу, и false в противном случае.

FetchEvent.preloadResponse Только для чтения

Обещание Promise для Response, или undefined если этот запрос не является навигацией, или предварительная загрузка навигации не включена.

FetchEvent.replacesClientId Только для чтения

Идентификатор id заменяемого клиента во время навигации по странице.

FetchEvent.resultingClientId Только для чтения

Идентификатор id клиента, который заменяет предыдущего клиента во время навигации по странице.

FetchEvent.request Только для чтения

Запрос Request, который браузер намерен выполнить.

Наследует методы от родителя, ExtendableEvent.

FetchEvent.respondWith()

Предотвращает обработку запроса по умолчанию браузером и предоставляет (обещание для) свой ответ.

ExtendableEvent.waitUntil()

Удлиняет срок жизни события. Используется для уведомления браузера о задачах, которые выходят за рамки возвращения ответа, таких как потоковая передача и кэширование.

Это событие Fetch использует настройки браузера по умолчанию для запросов, отличных от GET. Для запросов GET оно пытается найти совпадение в кэше и, если не находит, обращается к сети. Если совпадение найдено, оно асинхронно обновляет кэш на будущее.

self.addEventListener("fetch", (event) => {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method !== "GET") return;

  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // If we found a match in the cache, return it, but also
        // update the entry in the cache in the background.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});

• fetch событие
• Promise
• Fetch API