Menu
Currently, my application is deployed and all the js have the timestamp version. Now when I again build my angular app the js will have a new timestamp version.
Is there a way where I can compare the version of my build and if it does not match then allow the user to logout from the application?
374
With 'SwUpdate' of '@angular/service-worker' package, you can check the current version and available version of your application and can perform the action you want perform by checking the version.
Example:
import { SwUpdate } from '@angular/service-worker';
constructor(private swUpdate: SwUpdate) {}
//Here you can check the versions
this.swUpdate.available.subscribe((event) => {
console.log('current version: ', event.current);
console.log('available version: ', event.available);
if (confirm('Software update avaialble.')) {
this.swUpdate.activateUpdate().then(() => {
//Perform your action here
window.location.reload()
});
}
});
While service worker works on the fly, there is a more generic solution that can be used here. @Amirhossein has suggested a good way of implementation and a practical way of implementing is possible. Also, no need to call any API or make one for this purpose. We can ping the server for the latest index.html available in the server and compare it with the current one in the client.
An alternate working approach
Once you have generated the build for the Angular application, add the following support in the index.html file. Use the script I have added in the body section and replace the live URL instead of example.com and replace the latest main-es5 javascript the application build has generated.
<html>
<head>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
</head>
<body>
<script>
$.get("https://example.com/?v=" + Date.now(), data => {
if (!(String(data).includes('main-es5.014e7f2ada629a9a485a.js'))) {
localStorage.clear();
}
}, 'text');
</script>
</body>
</html>How does this work?
The script pings your URL and fetches the current index.html file and compares the file with the currently used main-es5 file.
If it matches, then the user is running the latest version of your app. Else, the user is not using the latest version of the app and the user can be logged out based on the auth type used. 99% of the time, either localStorage, sessionStorage or a cookie is used. This can be cleared to remove the user data.
Based on the requirement, the user can be made to log in with the latest version of your app by implementing any of these methods.
Time to reload the contents with any of the options:
deprecated
Is it a better approach than service workers / PWA?
No, honestly speaking, service workers are the best in business to solve your use case. However, certain legacy devices, old iPhones and many devices still don't seamlessly work with the concept of PWA. Also, there are certain APIs facing difficulties like with NFCs, Bluetooth, etc. Always do thorough research before launching on production.
Can I prevent the browser from caching my Angular application?
Yes, it's possible in many ways. It's the server (literally you) that instructs the browser to cache and don't cache. Check out an example of cache bursting/setting cache headers in AWS CloudFront. Based on your hosting provider, it's possible to set cache-headers to instruct browsers. Cache-Control and Expires are the key here.
3
Keywords here are PWA and ServiceWorker. Just follow instructions on angular guide:
https://angular.io/guide/service-worker-getting-started
https://angular.io/guide/service-worker-communications
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
