Handling the Cache problem


As you know applications like gmail / yahoomail they constantly keep changing their js/css and when you login you dont have to clear your browser cache to see the new changes, they are automatically shown to you.

How do they do this? I see there are two approaches:

  1. in your code where you specify the path of the js/css you append time with a querystring that will force your browser to load the lastest js/css no matter it has been modified or not.

  2. You use the “Pragma: No-cache” Tag in your page.

But the problem in these approaches is that your application makes an HTTP request every time its called since it assumes the file is new.

So whats the solution?

Any help is appreciated.

It’s very simple solution. They are taking version of specific file. You can do it like this:

<link href="www.yourwebsite.com/css/libs.css?version=<?=filemtime('www.yourwebsite.com/css/libs.css')?>" rel="stylesheet" type="text/css"/>

Browser caches current version (timestamp). When you update this file, file modified date changes, so your version updates to new timestamp

That is a great trick. thanks for sharing.

Is it also possible to do this from server / apache level?

This is a good solution but can be resource hungry on busy web sites especially if you have a lot of css/js files since on each page request the server has to access those files even if it doesn’t have to serve them as they are cached in the user’s browser. I tend to use one global version number for the whole site (in the db or in a file) and append it to the url of all css and js files. This requires me to change the number manually after I make any changes but it can be partially automated with a script as well.


I Just found that this works for all browsers but chrome, so any work around to make it work on chrome as well?