Dom FetchEvent.respondWith ejemplo

los respondWith() método de FetchEvent previene el manejo de recuperación predeterminado del navegador y le permite proporcionar una promesa para un Response tú mismo.

En la mayoría de los casos, puede proporcionar cualquier respuesta que comprenda el receptor. Por ejemplo, si un

• Solo puedes regresar Response objetos de type “opaque” Si el fetchEvent.request objetos mode es “no-cors“. Esto evita la filtración de datos privados.
• Solo puedes regresar Response objetos de type “opaqueredirect” Si el fetchEvent.request objetos mode es “manual“.
• No puedes regresar Response objetos de type “cors” Si el fetchEvent.request objetos mode es “same-origin“.

Especificar la URL final de un recurso

Desde Firefox 59 en adelante, cuando un trabajador del servicio proporciona un Response para FetchEvent.respondWith(), los Response.url El valor se propagará a la solicitud de red interceptada como la URL final resuelta. Si el Response.url el valor es el vacío string, entonces el FetchEvent.request.url se utiliza como URL final.

En el pasado el FetchEvent.request.url se utilizó como URL final en todos los casos. El proporcionado Response.url fue efectivamente ignorado.

Esto significa, por ejemplo, si un trabajador del servicio intercepta una hoja de estilo o un script de trabajador, entonces el Response.url se utilizará para resolver cualquier relativo @import o importScripts() cargas de subrecursoserror 1222008).

Para la mayoría de tipos de solicitud de red este cambio no tiene ningún impacto porque no puede observar la URL final. Sin embargo, hay algunos en los que sí importa:

• Si un fetch() es interceptado, entonces puede observar la URL final en el resultado Response.url.
• Si se intercepta una secuencia de comandos de trabajador, se utiliza la URL final para configurar self.location y se utiliza como la URL base para las URL relativas en la secuencia de comandos del trabajador.
• Si se intercepta una hoja de estilo, la URL final se utiliza como URL base para resolver @import cargas.

Tenga en cuenta que las solicitudes de navegación para Windows y iframes NO use la URL final. La forma en que la especificación HTML maneja los redireccionamientos para navegaciones termina usando la URL de solicitud para el resultado Window.location. Esto significa que los sitios aún pueden proporcionar una vista “alternativa” de una página web cuando están desconectados sin cambiar la URL visible para el usuario.

Sintaxis

fetchEvent.respondWith(// Promise that resolves to a Response.);

Parámetros

A Response o un Promise que se resuelve en un Response. De lo contrario, se devuelve un error de red a Fetch.

Valor devuelto

undefined.

Excepciones

Ejemplos de

Este evento de recuperación intenta devolver una respuesta de la API de caché, recurriendo a la red en caso contrario.

addEventListener('fetch',event=>// Prevent the default, and handle the request ourselves.
  event.respondWith(asyncfunction()// Try to get the response from a cache.const cachedResponse =await caches.match(event.request);// Return it if we found one.if(cachedResponse)return cachedResponse;// If we didn't find a match in the cache, use the network.returnfetch(event.request);()););

Nota: caches.match() es un método de conveniencia. Funcionalidad equivalente es llamar cache.match() en cada caché (en el orden devuelto por caches.keys()) hasta un Response es regresado.

Especificaciones

Compatibilidad del navegador

Ver también

• Usar trabajadores de servicio
• ¿Está listo ServiceWorker?
• Promise
• Obtener API