I am trying to make an offline PWA planner targeted to phones and I have no need at all for user data or interaction with my home page after installation.

Everything works fine on my PC and Lighthouse gives a clean bill of health, but on my phone (S8) the PWA does not work as expected in Chrome and Firefox when I am offline. Minimizing the app and tapping the installed icon works in Chrome as long as I am online, but occasionally gives a black screen in Firefox, especially if the app has lost focus for a while.
Going offline causes Chrome to ignore the cached files and complain about lack of connectivity if reloaded, for example after a phone restart or closing all apps. Firefox just hangs with a white or black screen.

I cache my index.html file and have a suspicion that reinstalling the service worker on reload will flush the cache if offline, but despite extensive searches I haven't been able to find a way around this - or even a mentioning.
I experience the same problem on a Samsung S5 and on an iPad.

Included below is the script in my html header:

    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>

And my service worker code:

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);
    })
  );
})

I'd appreciate an explanation of where I have made a rookie mistake :-)

The full project is at https://github.com/HappyDustbunny/FuzzyPlan