Muchas gracias por compartir tu conocimiento. Te comento que siguiendo tu tutorial lo hice funcionar en una app vue.js, así que te agradezco nuevamente. Saludos! 😄
Gracias a usted por sus comentarios. Es correcto, una vez "compilada" la app de Vue, solo hay que convertir la carpeta dist en una PWA y funcionará perfectamente. Saludos
Si trabajo en páginas web sencillas con html, css, javascript y php tendría que generar el serviceWorker cada ves que hay un cambio en mis archivos html o también cuando hay cambios en mis archivos php? O en que ocasiones tendría que actualizar el serviceWorker? Excelente video, muy rápido y sencillo.
Me parece que solo cada vez que modifique los archivos del frontend, es decir, CSS, HTML y JavaScript. Si los archivos PHP generan HTML, entonces también cada que cambien los PHP
Hola. Puede hacerla en cualquier punto, de hecho recomendaría hacerla al inicio para ver si las herramientas que usted utilizó van a funcionar correctamente al ser convertidas a PWA
Hola, soy un poco nuevo en lo que es PWA, y acabo de crear mi propia app con esto, solo que tengo dudas porque en el cache no me aparecen los archivos como tal. Extrañamente si me aparecen en lo que es el apartado de red como peticiones, alguien sabe si es normal que no me salga nada en el almacenamiento cache? este es mi sw.js: // Nombre del cache const nombreCache = 'apv-cache-v1-manuel'; // Nombre del cache... const assets = [ "/", "/index.html", "/error.html", "/css/boostrap.css", "/css/styles.css", "/js/app.js", "/js/apv.js", ]; //"purpose": "any maskable" // console.log(self); // Instalar el service Worker, no se puede utilizar window, por lo tanto se utiliza self self.addEventListener('install', e => { console.log('Instalado el Service Worker'); e.waitUntil( // Buen lugar para cachear - caches.open(nombreCache) .then( cache => { // Esta función es asincrona... console.log('cacheando...'); cache.addAll(assets); }).catch(error => { console.log(`ERROR AL GUARDAR CACHE...${error}`); }) ); // Revisar en App (Chrome) en Firefox en Almacenamiento }); // Activar el service worker... self.addEventListener("activate", (e) => { console.log("Service Worker Activado"); e.waitUntil( caches.keys() .then((keys) => { return Promise.all( //Analiza los tipos de caches que tenemos y los compara con el nombre del array de arriba y de una vez lo elimina keys .filter((key) => key !== nombreCache)//se lo salta y borra del cache todo lo no igual a nombreCache .map((key) => caches.delete(key))//aqui ya te tronas el "key" que en si es todo el cache antiguo ); }) ); }); // Fetch events para el CSS, HTML, imagenes JS, y hasta llamados a fetch.. self.addEventListener('fetch', e => { console.log('Fetch.. ', e); e.respondWith( caches.match(e.request) .then(respuestaCache => { return respuestaCache || fetch(e.request); }) .catch( () => caches.match('/error.html')) ); }); el manifest: { "name": "APV ", "short_name": "APV", "start_url": "/index.html", "display": "standalone", "background_color": "#D41872", "theme_color": "#D41872", "orientation": "portrait-primary", "icons": [ { "src": "img/icons/icon-72", "type": "image/png", "sizes": "72x72" }, { "src": "img/icons/icon-120.png", "type": "image/png", "sizes": "120x120" }, { "src": "img/icons/icon-128.png", "type": "image/png", "sizes": "128x128" }, { "src": "img/icons/icon-144.png", "type": "image/png", "sizes": "144x144" }, { "src": "img/icons/icon-152.png", "type": "image/png", "sizes": "152x152" }, { "src": "img/icons/icon-196.png", "type": "image/png", "sizes": "196x196", "purpose":"any maskable" }, { "src": "img/icons/icon-256.png", "type": "image/png", "sizes": "256x256" }, { "src": "img/icons/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } y aqui valide lo del serviceWorker: if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js' ) .then( registrado => console.log('Se instalo correctamente...', registrado)) .catch( error => console.log('Fallo la instalación', error)); } else { console.log('SW No soportados'); }
