FetchEvent

Это тип событий 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 попробует найти ответ в кеше, а в случае его отсутствия получит данные с сервера. Также, он асинхронно обновит данные в кеше.

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

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

Спецификация Статус Комментарии
Service Workers
Определение 'FetchEvent()' в этой спецификации.
Рабочий черновик Изначальное определение.

Совместимость

BCD tables only load in the browser

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