angular: Subscribe to Application Updates in an Angular PWA with SwUpdate

(*1*)(*2*)

Jorge Vergara: (*3*) Each time we deploy an replace to our Modern Internet Programs, it may take a little time to replicate to your customers relying on how competitive your cache insurance policies are.

[0:10] As an example. I’ve an ordinary Angular application the usage of Ionic for the UI parts. I’ll make a transformation, trade the application from Model 1 to Model 2. Then, I’ll generate a manufacturing construct. As soon as the construct is able, I’ll deploy the application.

[0:34] As soon as it completed deploying, you notice that I wish to reload the web page a couple of instances with a purpose to get the adjustments and they’re nonetheless no longer there. From time to time, I actually have to head right here into the Application tab, transparent the entire web site’s information, after which reload application in order that I will be able to get a non-cache model.

[0:55] Thankfully, Angular supplies a category referred to as SwUpdate of their Angular provider employee bundle. To make use of it, we’re going to move into the app element and we’re going to import the SwUpdate elegance from the Angular/provider employee bundle. As soon as it is imported, we’re going to inject it into our constructor.

[1:15] This elegance has a assets referred to as To be had that is an observable that subscribes to new updates from the provider employee. We will test if there are updates to be had, we will be able to subscribe to these updates. In that subscription, we will be able to do just about no matter we wish.

[1:35] On this case, we wish to cause an alert for the consumer, and we wish to ask the consumer to download the brand new model. If the customers verify that, then we’re going to reload the web page.

[1:46] Now we will be able to return to our house web page and we will be able to replace the application to Model 3 and generate a brand new manufacturing construct. As soon as it is executed producing the construct, we’re going to deploy our application once more.

(*(*19*)*) As soon as the deployment is finished, I reload the web page as soon as in order that our application can communicate to the webhosting server. You’ll be able to see that the SwUpdate elegance already choices up the replace and says, “A brand new model is to be had, do you wish to have to load it?”

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