Currently, I am in the process of developing a web application that utilizes Firebase Firestore as the backend and NoSQL database, with Angular serving as the frontend. With frequent updates and changes being made to the website, it becomes cumbersome to constantly ask clients to refresh the page manually after each modification. Despite my attempts to retrieve the main.[hash].js file from the dist folder and compare it with new versions, I have not been successful. Likewise, experimenting with serviceWorker did not yield the desired results. Even after extensively searching on StackOverflow, I have yet to find a satisfactory answer to automate page refreshing when deploying a new version to my Angular 7 project hosted on Firebase. Thank you for any assistance.
Here is my latest attempt using serviceWorker:
log-update.service.ts
isUpdateAvailable = new Promise((resolve, reject) => {
console.log('calling isUpdateAvailable');
if ('serviceWorker' in navigator && ['localhost', '127'].indexOf(location.hostname) === -1) {
// register service worker file
navigator.serviceWorker.register('service-worker.js')
.then(reg => {
reg.onupdatefound = () => {
const installingWorker = reg.installing;
installingWorker.onstatechange = () => {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
// new update available
console.log('New update available...');
resolve(true);
} else {
// no update available
resolve(false);
}
break;
}
};
};
})
.catch(err => console.error('[ERROR]', err));
}
console.log('Dev mode...');
});
app.component.ts
ngOnInit() {
this.logUpdateService.isUpdateAvailable.then(isAvailable => {
if (isAvailable) {
alert('New update found !');
} else {
console.log('No new update found.');
}
});
}