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.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Este es el tipo de evento para eventos "fetch" despachados en el scope global del service worker. Contiene información sobre la búsqueda (fetch), incluyendo la petición (request) y cómo el receptor tratará la respuesta (response).

Provee el método event.respondWith(), el cúal nos permite proporcionar una respuesta a esta búsqueda (fetch).

Constructor

new FetchEvent()

Crea un nuevo objecto FetchEvent. Este constructor no se usa normalmente. El propio navegador crea estos objetos y los proporciona a los callbacks de eventos "fetch".

Propiedades

Hereda propiedades del ancestro, Event.

fetchEvent.clientId Read only

El id del mismo origen client que inició el "fetch".

fetchEvent.preloadResponse Read only

Un Promise para un Response, o vacío si este no es una navegación, o navigation preload no esta habilitado.

fetchEvent.request Read only

La Request que el navegador intenta crear.

Métodos

Herada métodos del padre, ExtendableEvent.

fetchEvent.respondWith()

Evita el manejo de búsqueda predeterminado del navegador y proporciona (una promesa) una respuesta usted mismo.

extendableEvent.waitUntil()

Extiende el tiempo de vida del evento. Se usa para notificar al navegador las tareas que van más allá de la devolución de una respuesta, como la transmisión y el almacenamiento en caché.

Ejemplos

Este evento fetch, permite al navegador hacer esta acción por defecto para peticiones non-GET. Para peticiones GET esto intenta retornar una coincidencia en el cache, y vuelve de nuevo a la red. Si busca una concidencia en el cache, actualiza asincronicamente el cache para la próxima vez.

js
addEventListener("fetch", (event) => {
  // Permite al navegador hacer este asunto por defecto
  // para peticiones non-GET.
  if (event.request.method != "GET") return;

  // Evita el valor predeterminado, y manejar solicitud nosostros mismos.
  event.respondWith(
    (async function () {
      // Intenta obtener la respuesta de el cache.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // Si encontramos una coincidencia en el cache, lo devuelve, pero también
        // actualizar la entrada en el cache en segundo plano.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // Si no encontramos una coincidencia en el cache, usa la red.
      return fetch(event.request);
    })(),
  );
});

Especificaciones

Specification
Service Workers
# fetchevent-interface

Compatibilidad con navegadores

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.

Ver también