FetchEvent

Este es el tipo de evento para eventos "fetch" despachados en el scope global del service worker (en-US). 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() (en-US), el cúal nos permite proporcionar una respuesta a esta búsqueda (fetch).

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

[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

• Promise
• Fetch API