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