Subscribe to Application Updates in an Angular PWA with SwUpdate

Jorge Vergara: [0:00] Whenever we deploy an update to our Progressive Web Applications, it can take a while to reflect for your users depending on how aggressive your cache policies are.

[0:10] For example. I have a regular Angular application using Ionic for the UI components. I'm going to make a change, change the application from Version 1 to Version 2. Then, I'm going to generate a production build. Once the build is ready, I'm going to deploy the application.

[0:34] Once it finished deploying, you see that I need to reload the page multiple times in order to get the changes and they are still not there. Sometimes, I even have to go here into the Application tab, clear all of the site's data, and then reload application so that I can get a non-cache version.

[0:55] Luckily, Angular provides a class called SwUpdate in their Angular service worker package. To use it, we are going to go into the app component and we are going to import the SwUpdate class from the Angular/service worker package. Once it's imported, we are going to inject it into our constructor.

[1:15] This class has a property called Available that's an observable that subscribes to new updates from the service worker. We can check if there are updates available, we can subscribe to those updates. In that subscription, we can do pretty much whatever we want.

[1:35] In this case, we want to trigger an alert for the user, and we want to ask the user to download the new version. If the users confirm that, then we are going to reload the page.

[1:46] Now we can go back to our home page and we can update the application to Version 3 and generate a new production build. Once it's done generating the build, we are going to deploy our application again.

[2:00] Once the deployment is done, I reload the page once so that our application can talk to the hosting server. You can see that the SwUpdate class already picks up the update and says, "A new version is available, do you want to load it?"

[2:19] When we click OK, it reloads the page and updates our application.