Let users know when you’ve updated your Angular app
It’s fantastic when a user loves your Angular web site so much they never close it; but what happens if you deploy a new version? Maybe you’ve fixed a bug, or added new features, but some users are still working with an old version in the browser.
I’ve seen this situation with both testers and with end users, and it can waste a lot of time, because although the user just needs to hit F5 to refresh the page, they don’t necessarily know that they need to do that.
It would be great if the Angular application itself could detect when a new version had been deployed, so it could advise the user to refresh.
The approach here is to include in the deployed code a file containing something that changes with each release. This could be a build number, a timestamp, or a hash of the released files.
Get your build number on startup
I’m using the build number generated by my CI build pipeline. I put this in a JSON file, which I add to the assets folder, which is copied when Angular Cli builds the application. How you populate this file depends on how you choose to build and deploy your app. I use a step in my build pipeline to populate the file.
Next, I add a class to my app to represent the data in the JSON file, and a small service (the BuildDetailsService) which I can inject anywhere, giving access to the data.
Finally I add a service which requests the build-details.json file, and stores the data in the BuildDetailsService.
This service needs to be registered in the AppModule as an APP_INITIALIZER which ensures that it’ll run before the application is started up.
This all means that when the application is loaded into the browser, it will load and store the build number.
Check for updated releases periodically
The next step is to have the app occasionally phone home to see if a new version has been deployed.
The UpToDateBuildService, once started, fetches the build-details.json file from the server at regular intervals (here, I’ve set it to once per minute, but a longer interval might be appropriate. It compares the build number it gets, with the one that was loaded when the page was loaded in the browser. If the numbers are different, then a new version of the application has been deployed, and the verion in the browser is out of date.
We can use this information to suggest to the user that they need to refresh the page.
A more sophisticated component could suggest to the user that they need to save their work, and could provide a refresh button.
Hopefully someone will find this useful!
