FetchEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

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

Конструктор

FetchEvent()

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

Свойства

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

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

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

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

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

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

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

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

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

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

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

Методы

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

fetchEvent.respondWith()

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

extendableEvent.waitUntil()

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

Примеры

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

js
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);
    })(),
  );
});

Спецификации

Specification
Service Workers
# fetchevent-interface

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также