Cached javascript files? A duh moment

How do you ensure that your users don't have an old cached version of your javascript files?

The answer might come to you straight away, but I'm not ashamed to admit that this problem perplexed me for quite a while. We had problems where the users' browsers were using old cached versions of some javascript files that we had updated. Thus the web application was behaving inconsistently for them.

We flirted with ideas about fiddling with the 'Cache-control' and 'Expires' headers, but it proved troublesome and we didn't want to disable caching completely as a lot of our users are still on dialup connections (yes that's how badly our life-saving Queensland firefighters are treated).

We even thought about writing some sort of script that would find and clear the browser's cache manually each time they logon to the department's network, but for obvious reasons that would be difficult and error-prone. Plus it wouldn't take effect until they log out and log back in.

Then it occurred to me - How does Google do this? They must have heaps of js files and must be rolling out updates all the time!

The answer is very simple. Each time we deploy a new version of the webapp we simply rename the "scripts" folder that contains all our javascript files. Something like appending the version number of the app to the scripts directory name works well.

This will ensure that each time a new version of the app is deployed, each user's browser will be forced to get the latest version of the scripts, solving the caching problem.

Duh!