Angular 4 PWA Service Worker doesn't update when new updates available

Question

After i update my Angular 4 PWA app and deployed , user not getting new updates until user clear the cache and refresh the browser. Sw doesn't update. Even i press the update button in crome Dev it doesn't update I have to clear the cache and refresh the browser.

I used these packages @angular/service-worker @angular/platform-server ng-pwa-tools

Answer 1

Make sure your app checks for updates from the server from time to time.

In the app.component.ts add private swUpdate: SwUpdate into the constructor.

 this.swUpdate.available.subscribe(event => {
   if (confirm('Update Available. Refresh the page now to update the cache.')) {
     location.reload(true);
   } else {
     console.log('continue with the older version');
   }
 });

 setInterval(() =>  {
   this.swUpdate.checkForUpdate();
 }, 21600);

Answer 2

Based on the information you've provided I guess your web server is serving the SW file with some caching headers and the visitors' browsers use the cached version.

Be sure to explicitly set the caching headers to no-cache/-1/etc. so that the browser always checks the web server for a new version of the service-worker.js (or whatever) file.