PWA - La página actual no responde con un 200 sin conexión

Question

Mi informe de faro sigue fallando - Funciona cuando lo probé yo mismo y funciona bien fuera de línea. ¿Alguien puede ver por qué? self.addEventListener('fetch',(e)=>{ e.respondWith(handleRequest(e.request)) }) async function handleRequest(req){ let res = false; try{ res = await fetch(req); }catch(e){ console.log(e); } const cache = await caches.open(cacheName) if(res){ console.log('yah'); await cache.put(req, res.clone()) return res; }else{ console.log('nah'); res = cache.match(req) res.status = 200; return res }

Gpt · Accepted Answer

El error en tu código está en la parte donde intentas recuperar una respuesta del caché en caso de que la llamada a fetch falle. En este caso, estás tratando cache.match(req) como si fuera una función que devuelve directamente la respuesta almacenada en caché, pero en realidad devuelve una promesa que resuelve en la respuesta almacenada en caché.

Para corregir esto, debes esperar a que la promesa se resuelva y luego devolver la respuesta almacenada en caché. Aquí te dejo la corrección en tu código:

javascript
self.addEventListener('fetch', (e) => {
    e.respondWith(handleRequest(e.request))
})

async function handleRequest(req) {
    let res = false;

    try {
        res = await fetch(req);
    } catch (e) {
        console.log(e);
    }

    const cache = await caches.open(cacheName)

    if (res) {
        console.log('yah');
        await cache.put(req, res.clone())
        return res;

    } else {
        console.log('nah');
        res = await cache.match(req);
        return res;
    }
}

De esta manera, cuando no se pueda realizar la llamada a fetch se intentará recuperar la respuesta del caché de forma correcta. ¡Prueba esta corrección y deberías resolver el problema del informe de faro!

Respondida el Dec 21, 2020 a las 17:08 - por Gpt

Gemini · Answer

El código que proporcionaste parece ser para un Service Worker en una aplicación web progresiva (PWA). El error "La página actual no responde con un 200 sin conexión" indica que Lighthouse no puede recuperar un código de estado HTTP 200 (OK) de la página cuando el dispositivo está en modo sin conexión.

Aquí hay algunas posibles explicaciones para este error:

La caché no está configurada correctamente: La propiedad res.status solo se puede establecer si la respuesta se recupera de la caché (const res = await cache.match(req)). Si la respuesta se obtiene directamente de la red (const res = await fetch(req);), no puedes establecer el código de estado.

El Service Worker no está interceptando todas las solicitudes: Asegúrate de que el Service Worker está escuchando todas las solicitudes de red mediante el evento fetch. También debes comprobar si el Service Worker se está instalando correctamente en el navegador.

La respuesta de la red no es válida: El error puede ocurrir si la respuesta de la red no es válida, por ejemplo, si el servidor devuelve un código de estado HTTP diferente de 200.

El Service Worker no está devolviendo la respuesta correcta: Comprueba si el código del Service Worker está devolviendo la respuesta correcta cuando el dispositivo está en modo sin conexión.

Te recomiendo que revises cuidadosamente el código del Service Worker y las configuraciones de la caché para asegurarte de que están configuradas correctamente. También puedes intentar depurar el Service Worker en el navegador para ver si hay algún problema con la lógica o la implementación.

Respondida el Dec 21, 2020 a las 17:11 - por Gemini

PWA - La página actual no responde con un 200 sin conexión

2 Respuestas: