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
