HTTP Headers - Hard refresh JavaScript/CSS

Question

I've recently added HTTP headers to my site to inform the browser to check with the server every time it comes across a given JS/CSS URL. I've tested it and it works perfectly; all browsers now make conditional GET requests.

Here's the problem though -- people still have the old headers cached; headers which more or less told the browser "cache this forever; don't bother asking for an update!". This can be busted with a hard refresh. I don't want to have to communicate to everyone to please hit F5 on any buggy pages after we push out code.

Are there any HTTP header(s)/HTML meta tag(s) I could put on the HTML document itself to say "Browser, ignore the headers you have on the JS/CSS files and download the latest version of all the included files on this page"?

Eventually this problem will work itself out as more and more people clear their cache or learn to refresh on their own. But, I'd rather fix it now. Then in a month or so, I'll remove the HTML-level headers to get caching where I want -- on a per resource basis.

EDIT: I do not want to rename the resources or add on query parameters. That's what we used to use (?v=18, ?v=19, etc.) and it was a chore to increment that number every time we updated resources. Even doing that programmatically isn't the ideal solution; especially now that our server is configured correctly. It makes more sense to do it on the HTTP level so it works regardless of how you're accessing it -- included on a page, directly from the address bar, or otherwise.

Perhaps change the name of the style sheets, then change the HTML to load a different sheet? — Marvo
– Marvo, Commented Jun 12, 2012 at 19:30

Ryan · Accepted Answer · 2012-06-12 19:30:35Z

1

pass a parameter to on the script source which will force a reload of the script... in fact you could do it by version or similiar

<script src="/test/script/myawesomescript.js?ver=1.0&pwn=yes" ...>

that would work and be seemless to the other users... when you feel like it has been long enough go back to the old way. but this will work if you want to force a refresh from users.

This method is utilized to prevent caching of webpages by some frameworks. Let me know if you were successful

http://css-tricks.com/can-we-prevent-css-caching/ -- here is a link to the concept for css (should work in js too) -- the biggest difference is you dont want it to never cache, so dont use a time stamp, use my style like from above :) enjoy!

answered Jun 12, 2012 at 19:30

Ryan

2,82518 silver badges30 bronze badges

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

Comments

Andrew Leach · Accepted Answer · 2012-06-12 19:31:46Z

1

Basically the only way is to get the browser not to use the cached URL.

One method is to use a cache-busting dummy parameter on the end of the URL.

some-name.css?q=1

That will force the browser to reload that file (because that URL isn't in the cache), and the downloaded file won't be cached because of your new headers. However: you may need to use this new name indefinitely, because you can't guarantee that once you leave off the dummy parameter again the cached version may still be used.

The other method is to completely rename the file.

my-new-name.css

answered Jun 12, 2012 at 19:31

Andrew Leach

13k1 gold badge43 silver badges48 bronze badges

2 Comments

goat Over a year ago

it worth mentioning that you can keep the "forever" cache headers, and just keep versioning the filenames like this when a change is needed.

Andrew Leach Over a year ago

@rambocoder: Yes, should have mentioned that. It's the reason why versioning is often done this way (new versions can be specified and will be loaded; old versions can still be specified if needed).

Collectives™ on Stack Overflow

HTTP Headers - Hard refresh JavaScript/CSS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related