FetchEvent

FetchEvent()

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

Данный класс наследует все свойства класса Event.

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

Идентификатор клиента того же источника, отправившего запрос.

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

Промис для запроса, или же пустой промис, если не произошла навигация или предзагрузка навигации отключена.

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

Запрос (Request) от браузера.

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

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

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

Идентификатор клиента, заменившего прошлый клиент при навигации.

Данный класс наследует методы класса ExtendableEvent.

fetchEvent.respondWith()

Перехватывает запрос и отправляет промис с ответом.

extendableEvent.waitUntil()

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

В данном примере все не-GET запросы будут обрабатываться стандартными средствами браузера. В случае GET запросов, service worker попробует найти ответ в кеше, а в случае его отсутствия получит данные с сервера. Также, он асинхронно обновит данные в кеше.

self.addEventListener("fetch", (event) => {
  // В случае не-GET запроса браузер должен сам обрабатывать его
  if (event.request.method != "GET") return;

  // Обрабатываем запрос с помощью логики service worker
  event.respondWith(
    (async function () {
      // Пытаемся получить ответ из кеша.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // Если кеш был найден, возвращаем данные из него
        // и запускаем фоновое обновление данных в кеше.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // В случае, если данные не были найдены в кеше, получаем их с сервера.
      return fetch(event.request);
    })(),
  );
});

• Promise
• Fetch API