Better way to prevent browser caching of JavaScript files

Question

This is how we prevent caching of JS and CSS files by browsers. This seems slightly hacky.. is there a better way?

<% //JSP code long ts = (new Date()).getTime(); //Used to prevent JS/CSS caching %>  <link rel="stylesheet" type="text/css" media="screen" href="/css/management.css?<%=ts %>" /> <script type="text/javascript" src="/js/pm.init.js?<%=ts %>"></script>  <script type="text/javascript" src="/js/pm.util.func.js?<%=ts %>"></script>  

---

Update: The reason we want to prevent caching is to ensure the newer version of the files are loaded when we do a new release.

Answer 1

You want CSS and JS to be cached. It speeds up the loading of the web page when they come back. Adding a timestamp, your user's will be forced to download it time and time again.

If you want to make sure they always have a new version, than have your build system add a build number to the end of the file instead of a timestamp.

If you have issues with it just in dev, make sure to set up your browsers to not cache files or set headers on your dev pages to not cache.

Answer 2

Caching is your friend. If browsers are caching these files incorrectly, it means something is wrong with the HTTP headers your web server is sending along with the JS and CSS files themselves (not the HTML page that uses them). The browser uses those headers to figure out if it can cache the file.

Your Web server can send these headers (on every JS and CSS file it serves) to tell browsers not to cache them:

Cache-Control: no-store Pragma: no-cache Expires: Sat, 01 Jan 2000 00:00:00 GMT 

But that will increase the network load on your site, and users will see the page load slower. You could be a little more lenient and allow the browser to cache the CSS file for 60 seconds:

Cache-Control: max-age=60 

If you really want the browser to check for a new file with every single page load, you can still save some network traffic by using an ETag:

Cache-Control: max-age=0 Pragma: no-cache Expires: Sat, 01 Jan 2000 00:00:00 GMT ETag: "o2389r-98ur0-w3894tu-q894" 

The ETag is simply a unique identifier your Web server makes up each time the file changes. The next time the browser wants the file, it asks the server, "does /js/pm.init.js still have the ETag o2389r98ur0w3894tuq894?" and if so, your server simply says, "yes". That way your server doesn't have to send the whole file again, and the user doesn't have to wait for it to load. Win-win.

How to convince your web server to autogenerate ETags depends on the server. It's usually not hard.

I've seen the hack you're using before. Like so much on the Web, it's not pretty or particularly efficient, but it works.