Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
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
. Este constructor no se usa normalmente. El navegador crea estos objetos y los proporciona para "fetch
" (obtener) devoluciones de llamadas de eventos.
Propiedades
Hereda propiedades del ancestro, Event
.
fetchEvent.clientId
Read only- El
id
del mismo origenclient
que inició el "fetch". fetchEvent.preloadResponse
Read only- Un
Promise
para unResponse
, o vacío si este no es una navegación, o navigation preload no esta habilitado. fetchEvent.request
Read only- La
Request
que el navegador intenta crear.
Métodos
Herada métodos del padre, ExtendableEvent
.
fetchEvent.respondWith()
- Evita el manejo de búsqueda predeterminado del navegador y proporciona (una promesa) una respuesta usted mismo.
extendableEvent.waitUntil()
-
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é.
Ejemplos
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); }()); });
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
Service Workers La definición de 'FetchEvent' en esta especificación. |
Working 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] | Sin soporte | 24 | Sin soporte |
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) | Sin soporte | ? | Sin soporte |
Propiedad preloadResponse |
59 | 59 | ? | ? | ? | 46 | ? |
[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)