0

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?

1
  • 1
    Sin ver qué error te genera (deberías incluirlo en tu pregunta!) es imposible saber a ciencia cierta qué está pasando, pero imagino que es un problema con this.Las arrow function mantienen el contexto del this mientras que las funciones aplican al this el contexto desde el que son llamadas. El manejo del this 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 :)
    – Benito-B
    Commented el 2 nov. 2023 a las 11:50

1 respuesta 1

0

Una cosa es la función y otra es el retorno de esa función

En tu primer código

e.respondWith(cachedResponse(e.request));

Estas pasando el RETORNO de la función cachedResponse

Pero en el segundo esta pasando la función en si misma

e.respondWith( async function(){
     const respuestaEnCache = await caches.match(e.request.url);
     if(respuestaEnCache) return respuestaEnCache;
     return e.request;
})

Para pasar el retorno de una función anonima debes invocarla usado los (), asi:

e.respondWith( (async function(){
     const respuestaEnCache = await caches.match(e.request.url);
     if(respuestaEnCache) return respuestaEnCache;
     return fetch(e.request);
})() 

)
1
  • muchas gracias, era la explicacion que necesitaba ya lo puse a prueba y funciona al 100%, lo unica que hay que agregar extra es que al momento de devolver el e.request si no se ha conseguido respuesta del cache hay que agregarlo con un fetch es decir return fetch(e.request), asi me funciono Commented el 3 nov. 2023 a las 2:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.