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.

* Some parts of this feature may have varying levels of support.

Это тип событий 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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FetchEvent
FetchEvent() constructor
clientId
handled
isReload
DeprecatedNon-standard
preloadResponse
request
respondWith
NetworkError thrown if the request mode is same-origin and the response type is cors
Change in behavior when specifying the final URL of a resource.
Experimental
resultingClientId

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

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