Force browser cache refresh for multiple resources (CSS & Javascript)

Question

I'm developing a website which is currently in testing phase.

Whenever I make some significant changes to Javascript and CSS, my testers inform me of lots of new bugs, some of which are quite severe. However, all of them are caused by browsers caching the JS scripts and the CSS file and using the old versions with the new HTML. Furthermore, since this is a test version, I have about 10 separate JS files linked with <script type="text/javascript" src="..."></script> tags. It's possible to refresh the stylesheet manually, but asking the testers to go through each JS file and refresh it is a bit too much.

Is there a way to inform the browser that the linked files have been updated and need to be reloaded?

Answer 1

Add a "cache buster" to the url i.e. - add a query string parameter.

<script src="foo.js"></script>

becomes

<script src="foo.js?v=1"></script>

If you are making staged releases, you can then just use the version of the release as the cache buster.

Answer 2

How about adding random string to name of the file? For example timestamp.

style.css?123456

This should help.