Estoy usando un service worker para recuperar un archivo desde la cache y poder mostrar la página fuera de línea. Ahora, mi duda es la siguiente:
async function cachedResponse(request){
const respuestaEnCache = await caches.match(request.url);
if(respuestaEnCache) return respuestaEnCache;
return fetch(request);
}
self.addEventListener("fetch", e=>{
e.respondWith(cachedResponse(e.request));
})
al hacer una función y llamarla desde dentro de la escucha del fetch
todo funciona al 100%, pero mi duda es esto que sigue:
e.respondWith( async function(){
const respuestaEnCache = await caches.match(e.request.url);
if(respuestaEnCache) return respuestaEnCache;
return e.request;
})
al momento de hacer la misma función pero como función flecha dentro del respondWith
, la página solo me carga una vez y luego sale que el sitio no está disponible por el momento. ¿A qué se debe esto?
this
.Las arrow function mantienen el contexto delthis
mientras que las funciones aplican althis
el contexto desde el que son llamadas. El manejo delthis
en JS es importante (y un dolor de cabeza importante también). Hay mucha información al respecto (incluso aquí en SOes) en la web, te recomiendo que le eches un buen vistazo :)