Angular Service Worker intermittently serving old version of application

Question

I have an Angular application (version 7.2.2) using the Angular Service Worker (version 7.2.12).

The service worker intermittently serves an old version of the application. On refresh the new version is shown, but if the user closes and reopens the browser tab, it reverts back to the old version until the next page reload. The ‘/ngsw/state’ page also has no errors when the old version is displayed.

I have not been successful in consistently reproducing the issue. In part because I am unsure of the cause. I have often gone weeks without having the service worker serve an old version of the code.

---

Some of the potential solutions I tried which seemed promising include:

• Updating angular and service worker to the latest versions (at the time).
• Removing caching from ngsw-config.json to prevent hash mismatches.
• Adding checks for updates in multiple code locations.
• Checking for updates on an interval.
• Forcing a reload when an update is available – this sometimes occurs, but sometimes a manual reload is required to get the new version.

Answer 1

You may want to check out the details here. In short, be aware that service worker unregistering is slow and done in the background. For quick round trip at the developer stage, you may need to manually unregister and then reload.

Check out the information at the following location: https://love2dev.com/blog/how-to-uninstall-a-service-worker/

The original GIST points out we should clean down our service worker before starting up:

  self.addEventListener("activate", function(e) {

    self.registration.unregister()
      .then(function() {

        return self.clients.matchAll();

      })
      .then(function(clients) {

        clients.forEach(client => client.navigate(client.url));

      });

  });

However the post suggests using this enhanced version:

  self.addEventListener("activate", function(e) {

    self.registration.unregister()
      .then(function() {

        return self.clients.matchAll();

      })
      .then(function(clients) {

        clients.forEach(client => {

          if (client.url && "navigate" in client){

            client.navigate(client.url))

      }

  });

});

I would also ensure that:

• Check that development builds don't sneak in the build cycle, I've seen this where DEVs think something is built in PROD mode and it isn't
• Ensure you are on HTTPS, use NGROK locally. This seems to be mandatory to get good PWA/SW operation.
• Ensure that files that change get a different hash number, I've seen occasions where they are not being renamed and therefore you get old code.
• Incorporate a way of consoling a version number until you are happy with the operation.

I hope some of these suggestions get you moving in the right direction.