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