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?

Stephen · Accepted Answer · 2012-01-16 01:03:54Z

8

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.

answered Jan 16, 2012 at 1:03

Stephen

19k4 gold badges35 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ogur · Accepted Answer · 2012-01-16 01:04:38Z

1

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

style.css?123456

This should help.

answered Jan 16, 2012 at 1:04

ogur

4,6162 gold badges20 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related