angular-cli: Service Worker doesn't get updated

I might actually know why your Service workers don’t work as expected. Turns out @angular/service-worker doesn’t magically work out of the box. It does most of it but not everything. I guess, what you’re all missing, is looking for a newer version of your app and ask @angular/service-worker to download the latest available version on page refresh.

Try adding this code to your main AppComponent:

import { SwUpdate } from '@angular/service-worker';

export class AppComponent implements OnInit {
  constructor(private swUpdate: SwUpdate) { }
  ngOninit() {
    this.swUpdate.available.subscribe(event => {
      console.log('A newer version is now available. Refresh the page now to update the cache');
    });
    this.swUpdate.checkForUpdate()
  }
}

Hello everyone! I don’t actually think there’s an issue with updates getting stuck here, I think the expectations for how it works are a little bit fuzzy.

Whenever you load the page (e.g. refresh), NGSW will serve the latest version of the app it has cached. Therefore, in order to see an update, it must already be cached prior to refreshing.

How does NGSW detect when an update is available, and know to go cache it? It’s a tricky process. Currently, it checks for updates on service worker startup. The service worker starts when you first load the site. If the page is inactive, the browser may kill the SW for a while, and then it’ll be started when the next request is made which requires it.

This means that update checks happen frequently, but also somewhat randomly. Refreshing does not trigger an update check, no matter how many times you refresh. (Issue #20877 exists to make update checks happen on refresh).

Under normal usage, updates should be detected and cached regularly, as the SW gets started and stopped a lot. However, having Developer Tools open in Chrome keeps the Service Worker alive indefinitely. That means that with Dev Tools open, updates will never be detected. To trigger an update check, go into the Service Worker panel in Dev Tools and stop, then start the worker. You should see it immediately make a request for ngsw.json, followed by caching the new version of the app if it’s available. The next refresh should then load the new version.

@andreasonny83’s solution is to call checkForUpdate() on application startup, which essentially implements the intent of #20877 from the application side.

I am seeing the same behavior as well.

I have the same issue.

@angular/cli@1.6.0 @angular/service-worker@5.1.0

Seeing the same behavior with Angular CLI 1.4.9 and Angular 4.4.6. In Chrome, I am not able to access a new version of my site even after deleting all cached content and repeatedly refreshing and restarting my browser. In Firefox, I first get the updated version then when I do a hard refresh I get the new version. If I restart Firefox, it loads the old version again. In Safari, everything works fine as no Service Worker exists.