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()' в этой спецификации.
Рабочий черновик Изначальное определение.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
FetchEvent
Экспериментальная
Chrome Полная поддержка 40Edge Полная поддержка ≤18Firefox Полная поддержка 44
Замечания
Полная поддержка 44
Замечания
Замечания Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Нет поддержки НетOpera Полная поддержка 27Safari Нет поддержки НетWebView Android Полная поддержка 40Chrome Android Полная поддержка 40Firefox Android Полная поддержка 44Opera Android Полная поддержка 27Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 4.0
FetchEvent() constructor
Экспериментальная
Chrome Полная поддержка 40Edge Полная поддержка ≤18Firefox Полная поддержка 44
Замечания
Полная поддержка 44
Замечания
Замечания Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Нет поддержки НетOpera Полная поддержка 27Safari Нет поддержки НетWebView Android Полная поддержка 40Chrome Android Полная поддержка 40Firefox Android Полная поддержка 44Opera Android Полная поддержка 27Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 4.0
client
ЭкспериментальнаяУстаревшаяНестандартная
Chrome Полная поддержка 42Edge Полная поддержка ≤79Firefox Полная поддержка 44IE Нет поддержки НетOpera Полная поддержка 27Safari Нет поддержки НетWebView Android Полная поддержка 42Chrome Android Полная поддержка 44Firefox Android Нет поддержки НетOpera Android ? Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 4.0
clientId
Экспериментальная
Chrome Полная поддержка 49Edge Полная поддержка ≤79Firefox Полная поддержка 45
Замечания
Полная поддержка 45
Замечания
Замечания Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Нет поддержки НетOpera Полная поддержка 36Safari Нет поддержки НетWebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 45Opera Android Полная поддержка 36Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 5.0
isReload
ЭкспериментальнаяУстаревшая
Chrome Полная поддержка 45Edge Полная поддержка 17Firefox Нет поддержки 44 — 74
Замечания
Нет поддержки 44 — 74
Замечания
Замечания Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Нет поддержки НетOpera Полная поддержка 32Safari Нет поддержки НетWebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 44Opera Android Полная поддержка 32Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 5.0
navigationPreload
Экспериментальная
Chrome Полная поддержка 59Edge Полная поддержка ≤79Firefox ? IE Нет поддержки НетOpera Полная поддержка 46Safari Нет поддержки НетWebView Android Полная поддержка 59Chrome Android Полная поддержка 59Firefox Android ? Opera Android Полная поддержка 43Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
preloadResponse
Экспериментальная
Chrome Полная поддержка 59Edge Полная поддержка 18Firefox ? IE Нет поддержки НетOpera Полная поддержка 46Safari Нет поддержки НетWebView Android Полная поддержка 59Chrome Android Полная поддержка 59Firefox Android ? Opera Android Полная поддержка 43Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
replacesClientIdChrome Нет поддержки НетEdge Нет поддержки 18 — 79Firefox Полная поддержка 65IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 65Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
request
Экспериментальная
Chrome Полная поддержка ДаEdge Полная поддержка ≤79Firefox Полная поддержка 44IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android ? Opera Android Полная поддержка ДаSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
respondWith
Экспериментальная
Chrome Полная поддержка 42
Замечания
Полная поддержка 42
Замечания
Замечания NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960.
Edge Полная поддержка ≤79
Замечания
Полная поддержка ≤79
Замечания
Замечания NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960.
Firefox Полная поддержка 59
Замечания
Полная поддержка 59
Замечания
Замечания NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008).
Полная поддержка 44
Замечания
Замечания Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE Нет поддержки НетOpera Полная поддержка 29Safari Нет поддержки НетWebView Android Полная поддержка 42
Замечания
Полная поддержка 42
Замечания
Замечания NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960.
Chrome Android Полная поддержка 42
Замечания
Полная поддержка 42
Замечания
Замечания NetworkError thrown if request mode is same-origin and response type is cors (see bug 1222008). This is being worked on - see https://www.chromestatus.com/feature/5694278818856960.
Firefox Android ? Opera Android Полная поддержка 29Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 4.0
resultingClientIdChrome Полная поддержка 72Edge Полная поддержка 18Firefox Полная поддержка 65IE Нет поддержки НетOpera Полная поддержка 60Safari Нет поддержки НетWebView Android Полная поддержка 72Chrome Android Полная поддержка 72Firefox Android Полная поддержка 65Opera Android Полная поддержка 50Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 11.0
targetClientIdChrome ? Edge ? Firefox ? IE Нет поддержки НетOpera ? Safari Нет поддержки НетWebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.

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