How to make sure a cached JavaScript and CSS files get reloaded?

Question

Could anyone explain how to make sure that if I update my webapp, the user gets the latest version of files?

Should I add a dynamic string ?version=random at the end of script and css files and change it as I roll out updates? Or what is a general strategy here?

Thank you, Boda Cydo.

Answer 1

As you mention yourself, adding a query string to the stylesheet/script URL is a neat trick to gain control over when cached versions are "invalidated".

Rather than adding a random string, I usually use the last modification date of the relevant file from the file system. To improve the coolness factor, you can convert the date to a numeric form and format it in hex when building the URL :-)

<script type="text/javascript" src="script.js?v=1750493C88"></script>
<link rel="stylesheet" type="text/css" href="style.css?v=1750493C88" />

Answer 2

Yes, the way you mention is very common and is a solid approach.

I personally use the Subversion revision number of my files, but you could use anything meaningful to you, even the last updated timestamp of the file.

StackOverflow uses the SVN revision number:

<script type="text/javascript" src="http://sstatic.net/so/js/master.js?v=6180"&gt;
</script> 

Answer 3

I usually put ?mtime at the end of the name for images, CSS files and Javascript files where mtime is the last modified time of the file.

You can alternatively use a version number that is incremented whenever the file is changed. This works well for libraries like jQuery that have official releases but tends to be more tedious than required for your own site's files that are simply changed as needed. Of course you can still use version numbers in this case but I tend to find it's unnecessarily tedious (being something else you need to maintain).