Menu
I have a web application in production environment. The users are using it every day, when I publish an update and a user comes back to the web application he/she views the old version of the web application. He needs to refresh the browser to load the new version. How can I solve this problem? I cannot tell hundreds of users to refresh the page every time I publish an update (3-4 times a week). I have used following to build my front end application : Angular4 with angular-cli
240
Angular cacheThere is no command to clear the cache, just run rm -rf .
The best way is to set the cache-control header of your index. html from your server. Doing this required some changes to your server configuration — but this is the straightforward and most effective way to prevent cache.
Cache busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn't retrieve the old file from cache but rather makes a request to the origin server for the new file.
In your developer tools. Find network tab and disable cache. Like here in the image. Hope this resolves.
The best way to clean browser cache would be to use hashing at build time. command to add hashing in angular cli app is
ng build --prod --output-hashing=all
It will generate build file with different name each time we build.
Just in case you are not using angular cli you can declare you component this way to cache busting
@Component({
selector: 'some-component',
templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`,
styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`]
})
Also we can set cache expire time in our nginx server. run this command
sudo nano /etc/nginx/sites-available/default
to edit config file & add these line to set cache settings
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 3d;
}
this will set expire time to 3 days. so the browser will automatically delete all stored cache of your web app & download fresh copy.
jpg|jpeg|png|gif|ico|css|js <-- configuration will cache jpg/jpeg/png/gif/ico images as well as javascript
149
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
