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
The original question is answered: the PWA part is working just fine.
A kind person tried the PWA on his phone and found no problem, which prompted me to test more thoroughly on phones other than my own, and it seems that the PWA part is working as it should.
What tricked me was having tested older versions on other phones that did not work.
The PWA part of latest update do work, but it has another – yet unidentified – glitch.
This glitch is not readily reproducible, but after encountering a white screen in Chrome, I connected the phone to the computer via USB and used Chrome DevTools (by typing chrome://inspect/#devices in the address line) to pick apart the innards of the app.
Everything was there (service worker, manifest, cache, DOM, …) and I could interact with the javascript in the console, but the screen was white. Both on the phone and in DevTools. (Suggestions welcome!!!)
It even logged swipe events to the console, an earler debugging effort I have forgotten to remove.
I suspect the culprit is me trying to take over navigation via the back-button at the bottom at every phone (the triangle) and messing it up somehow.
I’ll have to test this more on my own and open a new question if I get stuck.