Estoy tratando de hacer un planificador de PWA fuera de línea dirigido a teléfonos y no necesito datos de usuario ni interacción con mi página de inicio después de la instalación.
Todo funciona bien en mi PC y Lighthouse da un buen estado de salud, pero en mi teléfono (S8) el PWA no funciona como se esperaba en Chrome y Firefox cuando no estoy conectado. Minimizar la aplicación y tocar el ícono instalado funciona en Chrome siempre que esté en línea, pero ocasionalmente aparece una pantalla negra en Firefox, especialmente si la aplicación ha perdido el foco por un tiempo.
Al desconectarse, Chrome ignora los archivos en caché y se queja de la falta de conectividad si se vuelve a cargar, por ejemplo, después de reiniciar el teléfono o cerrar todas las aplicaciones. Firefox simplemente se cuelga con una pantalla blanca o negra.
Guardo en caché mi archivo index.html y tengo la sospecha de que reinstalar el trabajador del servicio en la recarga vaciará el caché si está fuera de línea, pero a pesar de las búsquedas exhaustivas, no he podido encontrar una forma de evitar esto, ni siquiera mencionarlo.
Experimento el mismo problema en un Samsung S5 y en un iPad.
A continuación se incluye el script en mi encabezado html:
if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/FuzzyPlan_serviceWorker.js', { scope: '/' }).then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); }); }); } </script>
Y mi código de trabajador de servicio:
let CACHED_URLS = [ '200px-A_SVG_semicircle_heart_empty.svg.png', '200px-A_SVG_semicircle_heart.svg.png', '200px-Flag_of_Denmark.png', '200px-Flag_of_the_United_Kingdom.png', 'FuzzyPlan20211002.css', 'FuzzyPlan20211002.js', 'apple-touch-icon.png', 'favicon.ico', 'favicon.png', 'icon.svg', 'index.html', 'instructions_dk.html', 'instructions.html', 'manifest.json', 'favicons/maskable_192.png', 'favicons/favicon-512.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(FP_CACHE).then(function(cache) { return cache.addAll(CACHED_URLS); }) ); }); self.addEventListener('fetch', function(event) { console.log('Fetch request for: ', event.request.url); event.respondWith( caches.match(event.request, {ignoreVary: true}).then( // ignoreVary should make the cache match ignore flags and stuff that can make a mathc fail unintentionally function(response) { return response || fetch(event.request); }).catch(function(error) { console.log('FuzzyPlan serviceWorker responded with error', error); }) ); })
Agradecería una explicación de dónde he cometido un error de novato :-)
El proyecto completo está en https://github.com/HappyDustbunny/FuzzyPlan
Se responde la pregunta original: la parte PWA funciona bien.
Una persona amable probó la PWA en su teléfono y no encontró ningún problema, lo que me llevó a probar más a fondo en teléfonos distintos al mío, y parece que la parte de la PWA funciona como debería.
Lo que me engañó fue haber probado versiones anteriores en otros teléfonos que no funcionaban.
La parte PWA de la última actualización funciona , pero tiene otra falla, aún no identificada.
Esta falla no es fácilmente reproducible, pero después de encontrar una pantalla blanca en Chrome, conecté el teléfono a la computadora a través de USB y usé Chrome DevTools (escribiendo chrome://inspect/#devices en la línea de dirección) para separar las entrañas de la aplicación
Todo estaba ahí (worker de servicio, manifiesto, caché, DOM,…) y podía interactuar con el javascript en la consola, pero la pantalla estaba en blanco. Tanto en el teléfono como en DevTools. (Sugerencias bienvenidas!!!)
Incluso registró eventos de deslizamiento en la consola, un esfuerzo de depuración anterior que olvidé eliminar.
Sospecho que el culpable soy yo tratando de tomar el control de la navegación a través del botón Atrás en la parte inferior de cada teléfono (el triángulo) y estropeándolo de alguna manera.
Tendré que probar esto más por mi cuenta y abrir una nueva pregunta si me quedo atascado.