Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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

Especificación Estado Comentario
Service Workers
The definition of 'FetchEvent' in that specification.
Editor's Draft Definición inicial.

Compatibilidad de Navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte Básico 40 44.0 (44.0)[1] No support 24 No support
Propiedad preloadResponse  59 ? ? 46 ?
Característica Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Soporte Básico 40 40 44.0 (44.0) (Yes) No support ? No support
Propiedad preloadResponse  59 59 ? ? ? 46 ?

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

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: fasalgad
 Última actualización por: fasalgad,