CODEWITHSUNDEEP
htmlhttpcaching
Olson.dev
Olson.dev

Reputation: 1836

HTTP Headers - Hard refresh JavaScript/CSS

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.

Upvotes: 3

Views: 1823

Answers (2)

Andrew Leach
Andrew Leach

Reputation: 12983

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

Upvotes: 1

Ryan
Ryan

Reputation: 2825

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!

Upvotes: 1

Related Questions