When we access any web application, our browser hits the server and gets all the required resource/content files and cache those for further requests to avoid latency and improve performance of the application.
This browser cache will be a problem in case if there is any changes to these resource or content files at server end, and these changes should reflect whenever user visit this application for the next time. But in most of the cases the browser will check for these files in their cache. If it founds then it won’t get latest files from server and lost the latest changes at client end.
Following are the different approaches can be used.
Whenever the files are updated, all references to the files could be manually updated to increment a version number as follows.
If there is any updates now increment the version from 1 to 2 as below
Note: Instead of number we can have any number or string which uniquely identifies it for example may be any hash string or GUID string.
- Browser will request for new file request in case there is a change in version string. If there is no change then it will get from its cache system and improves performance.
- If we forget to update or change the version string at any file then the functionality might not work as expected. This can be avoided in case we are using any bundling tools like gulp or web pack.
In this approach, developer always appends current server date time ticks such that every time a browser treat it as a new request and always get the latest version from the server irrespective of files updated or not.
- No need to worry of forgetting to update the version string as every time this will be changed automatically irrespective of changes or updates.
- There will be lot of performance issue as for every request client browser should request for the file(s).
- It will use lots of bandwidth and especially on slow networks.
- Not much utilizing the browser cache system feature.
Happy Coding 🙂