FetchEvent

Este tipo de evento para el evento "fetch" enviado en el  service worker global. Esto contiene la información sobre la búsqueda (fetch), incluyendo la petición y el receptor tratará la respuesta (response).

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

Constructor

new FetchEvent()

Crea un objecto  FetchEvent. Tradicionalmente no usado – el navegador crea estos objetos por si mísmos y proporciona el evento callbacks "fetch" .

Propiedades

Hereda propiedades del ancestro, Event.

fetchEvent.clientId Read only

El id del mismo origen client que inicio 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 del navegador intenta crear.

Métodos

Herada métodos del padre, ExtendableEvent.

fetchEvent.respondWith()

Evitar el manejo por defecto del buscador del navegador, y provee (una promesa para) una respuesta para ti.

extendableEvent.waitUntil()

Exitiendo el tiempo de vida del evento. Usado para notificar al navegador de tareas que extienda más alla del retorno de una respuesta, tanto como un streaming y caching.

Ejemplos

Este evento fetch, permite al navegador hacer este asunto por defecto para peticiones non-GET. Para peticiones GET  esto intenta retornar una partida en el cache, y  cae denuevo en la red. Si buscas una partida en el cache, lo 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 manipular la 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 partica en el cache, lo retorna, pero también
      // actualiza la entrada en el cache en segundo plano.
      event.waitUntil(cache.add(event.request));
      return cachedResponse;
    }

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

Especificaciones

Compatibilidad de Navegadores

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

Ver también

• Promise
• Fetch API