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