(Note: not saying this is an Aurelia issue, could just be a SPA issue in general)
I am having some issues with an Aurelia app that uses a service worker where I have a notification prompt setup if the service worker cache has changed and the app needs to be refreshed. It just displays a prompt, and when clicked notifies the SW to skip waiting and update.
It only works if you refresh the site (F5), versus just navigating pages in Chrome and seems to be hit or miss on iOS Safari at all, which is really my main target browser.
Its a pretty standard setup, and I followed the pattern here:
Anyone else run into this issue, or can point out any gotcha’s?
It appears that due to the fact that the user will rarely refresh the PWA and hence never get a valid refresh happening automatically, the recommendation is to setup a timer to manually trigger the check.
Ok, so it was all service worker issues and how the update is triggered.
My final solution was to add some code to what was in the attached article.
I added a call to runUpdate() at the end of the install block .
It immediately checks the SW to see if it is in the ‘awaiting’ state and displaying the prompt if so. Otherwise it falls through and calls a timer method that just continuously repeats the check for the set timeout period, recommendation is 1 hour, but I set it to 20 seconds for testing purposes and you can set it to what your requirements are.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(reg => {
reg.addEventListener('updatefound', () => {
console.log("SW update found")
// A wild service worker has appeared in reg.installing!
newWorker = reg.installing;
newWorker.addEventListener('statechange', () => {
// Has network.state changed?
switch (newWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
// new update available
let snackbar = document.getElementById('snackbar');
snackbar.className = 'show';
}
// No update available
break;
}
});
});
runUpdate(reg);
});
let refreshing;
navigator.serviceWorker.addEventListener('controllerchange', function () {
if (refreshing) return;
refreshing = true;
window.location.reload();
});
}
function setUpdateTimeout(reg) {
setTimeout(() => {
console.log("SW Update Timeout");
runUpdate(reg);
}, 20000);
}
function runUpdate(reg) {
console.log("SW Run Update");
if (reg.waiting) {
console.log("SW waiting")
// A wild service worker has appeared in reg.installing!
newWorker = reg.waiting;
if (navigator.serviceWorker.controller)
{
// new update available
let snackbar = document.getElementById('snackbar');
snackbar.className = 'show';
}
}
setUpdateTimeout(reg);
}
@airboss001 Thanks for following up here with the solution! This is very valuable information. I wonder, would you be interested in guest posting on the official Aurelia blog to talk about integrating service worker into an Aurelia application? I’m sure the community would appreciate that opportunity to learn from your recent experience. Let me know!
@EisenbergEffect I can put something basic together, but am very far from being competent on its ins and outs.
That said, it might be a nice jump off point for someone that was in my situation to see if its something they want or need to do. I’ll write up a short story on my project and the use of this.
