1

En un curso de PWA que estoy realizando, se hizo un ejercicio sobre la construccion de esta APP.

Cuando coloco el codigo, igual al manual de la MDN, me aparece la informacion que se escribe en la clase, sin embargo, cuando ejecuto el programa, me sale el siguiente error

Uncaught (in promise) TypeError: Failed to execute 'Cache' on 'addAll': Request failed

Parece un simple error de syntxis, pero las referencias del MDN estan iguales al codigo. Dejo mi codigo y las referencias del MDN que estoy utilizando. Referencia del MDN que estoy utilizando https://developer.mozilla.org/en-US/docs/Web/API/Cache/addAll

Alguno sabe que puede estar sucediendo o donde esta el error? Esoty usando chrome como navegador.

const nombreCache = 'apv-v1';
const archivos = [
    '/',
    '/index.html',
    '/css/bootstrap.css',
    '/css/styles.css',
    '/js/app.js',
    '/js/apv.js'
];


// cuando se instala el Service Worker
self.addEventListener('install', e => {
    console.log('instalado el Service Worker');

    e.waitUntil(

        caches.open(nombreCache) 
            .then( cache => {
                console.log('cacheando');
                return cache.addAll(archivos);
            }) )
    

});

self.addEventListener('activate', e => {
    console.log('Service Worker Activado');

    console.log(e);


});


// Evento fetch para descargar archivos estaticos

self.addEventListener('fetch', e => {
    console.log('Fetch...', e);

})

Si parece un poco confusa mi peticion, dejo aqui el link del proyecto para que pueda correrlo y revisarlo. No esta en repositorio aun, es de ejercicio.

https://we.tl/t-3e9Z5WwA2a

3 respuestas 3

2
const archivos = [
'./',
'./index.html',
'./css/bootstrap.css',
'./css/styles.css',
'./js/app.js',
'./js/apv.js'];

En mi caso con solo agregar el punto ".", antes de de todos los archivos que se van a guardar en el Cache.

Lo que el "punto" hace es, convertir de una dirección absoluta a una dirección relativa.

Por ejemplo: suponiendo que el Web Server corre sobre el puerto 5500, y tu proyecto esta dentro de una carpeta llamada "mypwa" y dentro de ella están todos los archivos de tu aplicación (index.html, manifest.json, service-worker.js, etc).

Para correr tu app en el buscador, seria como http://localhost:5500/mypwa/index.html. esto va a cargar la App.

Y cuando el buscador carga "service-worker.js" y no le colocas el "punto" antes, la función de cache.addAll intenta buscar el archivo "/css/styles.css" de la siguiente forma. http://localhost:5500/css/styles.css Y el buscador no va a encontrar nada, porque esa dirección no existe.

Pero cuando usas el punto. El buscador busca los archivos en el directorio actual. En este caso "mypwa". Por lo tanto la dirección seria http://localhost:5500/mypwa/css/styles.css

1

Amigo, el problema radica en que en tu arreglo de archivos, por lo menos uno de ellos no esta siendo resuelto por el cache y sospecho que es el ./css/bootstrap.css. Tuve el mismo problema e intente cachear uno por uno y asi di con el error. Entonces ubica el archivo que que no debe estar en tu arreglo y ejecuta nuevamente. Espero me hayas entendido.

Saludos!!!

0

El problema es que no encuentra alguna ruta de los archivos que estás cargando a caché, verifica que las rutas de

'/index.html',
'/css/bootstrap.css',
'/css/styles.css',
'/js/app.js',
'/js/apv.js'

estén bien nombradas

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.