Once the application is updated and deployed then, the new version of the application will be available. But how we can notify the user that a newer version is available while they are interacting with the application. How to give the user control over app updates.
Please check out my previous articles on PWA:
1. Understanding how the UI get an update when new content is available:
When you change the app content and deploy it then, you can see in the browser what the service worker is trying to do.
Here, you can see, as soon as the new content is available new service worker trying to install it and is in waiting state.
Although, the old service worker is registered and serving with the old content. The new service worker will be still in a skip waiting state i.e waiting.
Here, once we notify the user about the new update and if they allow us to update the app we can simply do skip waiting and reload the page for new content. After that, a new service worker will be activated and will serve with a new update available.
2. Register the custom event to notify the user about the app update:
We know that service worker can't access the web DOM element directly. As they will run in the background in a separate thread. So we have to notify users from our application. In order to do so, we need to register the custom event which can be listened to in the application.
You can see the file registerServiceWorker.js which is generated by Vue CLI.
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
updated (registration) {
console.log('New content is available; please refresh.')
document.dispatchEvent(
new CustomEvent('serviceWorkerUpdateEvent', { detail: registration })
);
},
created() {
document.addEventListener(
'serviceWorkerUpdateEvent', this.appUpdateUI, { once: true }
);
},Let's add some data used and appUpdateUI function.
data: () => ({
registration:null,
isRefresh: false,
refreshing: false,
}),
methods:{
appUpdateUI:function (e){
this.registration = e.detail;
this.isRefresh = true;
}
}<button v-if="isRefresh" @click="update">Update</button>update(){
this.isRefresh = false;
if (this.registration || this.registration.waiting) {
this.registration.waiting.postMessage({type:'SKIP_WAITING'});
}
},If you are using GenerateSW mode then make sure this post message matches the message listener inside the service worker. You can verify it by building your app. Once the app is built then under dist/ folder you can find the service-worker.js to verify.
If you are using injectManifest mode then, use the message listener as below inside service-worker.js:
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});For this, we can use 'controllerchange' listener in our application. Under App.vue inside created use the following listener.
created() {
navigator.serviceWorker.addEventListener(
'controllerchange', () => {
if (this.refreshing) return;
this.refreshing = true;
window.location.reload();
}
);
},
