FetchEvent

new FetchEvent() (en-US)

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".

Hereda propiedades del ancestro, Event.

fetchEvent.clientId (en-US) Read only

El id (en-US) del mismo origen client (en-US) que inició el "fetch".

fetchEvent.preloadResponse (en-US) 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 (en-US) Read only

La Request que el navegador intenta crear.

Herada métodos del padre, ExtendableEvent (en-US).

fetchEvent.respondWith() (en-US)

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

extendableEvent.waitUntil() (en-US)

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é.

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.

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);
    })(),
  );
});

• Promise
• Fetch API