How to force the client’s browser to clear cache files

keep calm and clear cache

I will write more technical posts on this blog but it will be in English, today’s post will be about common problem when you develop web application depend a lot on JavaScript or changes in design when you release its.

The problem:
You released new version from your site with changes in JavaScript and CSS but the users did not got that changes because the browser cached those files.

The solution:
Add suffix to all JavaScript and CSS files with release date in time stamp format like

<link href="css/main.css?1422439996" rel="stylesheet">

With the considerations that most if not all modern frameworks loads the JavaScript and CSS automatically from single function that you can alter to append the release date time stamp and recommended to read it from config file as it may be part from installation steps.

You have the file main.CSS in your web page and have been cached before when the user visited your web page so when you update the file content the browser will check only on the file name and it not be changed so will use the old cached file.
But when you add the release date as suffix when the user visit your page after the release date the browser will detect new file name so will load it and then cache it till the next release.

Whats next?
The next this is to go and talk with your team on how can you deploy this, if you needed farther details you can contact me directly or in the comments section. Don’t forget the most important thing subscribe to my news letter to get the upcoming posts directly in your mailbox and share this article to help others.