FetchEvent

FetchEvent() (en-US)

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

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

fetchEvent.clientId (en-US) Только для чтения

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

fetchEvent.preloadResponse (en-US) Только для чтения

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

fetchEvent.request (en-US) Только для чтения

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

fetchEvent.replacesClientId (en-US) Только для чтения

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

fetchEvent.resultingClientId (en-US) Только для чтения

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

Данный класс наследует методы класса ExtendableEvent (en-US).

fetchEvent.respondWith() (en-US)

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

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