FetchEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since апрель 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);
    })(),
  );
});

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 3 авг. 2023 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

Service Worker API
FetchEvent
Конструктор
1. FetchEvent()
Свойства экземпляра
Методы экземпляра
1. respondWith()
Наследование
1. ExtendableEvent
2. Event
Похожие страницы для Service Workers API
Руководства
1. Использование Service Worker

FetchEvent

In this article

Конструктор

Свойства

Методы

Примеры

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

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

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

Help improve MDN