PDA

View Full Version : Strategies for Cache Busting when releasing new JS code/updates



brookd
6 Nov 2009, 9:37 AM
Hello,

I am wondering what strategies people use for ensuring that when they release updates to their web apps which involve JS changes, how do they ensure that the client side is not using a cached copy of the file?

Of course, we *want* caching most of the time, but what about when we update some JS in one of the JS includes, how can we ensure that the cache is cleared on the client side so they get the changes?

hendricd
6 Nov 2009, 9:41 AM
I usually just disable Content-Expiration headers for a day or two on the server, then turn it back on.

Depending on how popular your page is, you might still get a couple of calls. :-?

mschwartz
6 Nov 2009, 12:52 PM
<script src="whatever.js?timestamp"></script>

timestamp would be a version number you bump to force users to fetch a different URL that can't possibly be cached.

timestamp could be the stat() of the directory containing your javascripts.

brookd
6 Nov 2009, 2:46 PM
I was thinking about this, using myfile.js?rev=1.24.

If done this way, does that mean that any references to js files (loaded via the doc head or dynamically) would need this revision number appended to them? This could be read from a config file that would be the only thing that needs updating

Wouldn't this result in all JS being reloaded even when only, lets say, one file was changed?

Doug, with your idea, would it be practically to update the content expiration headers on just the js files updated? This might be a bit difficult to implement or keep up to date...

I found this interesting technique described here:
http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/

The only problem is that our app loads a lot of JS dynamically, so we would not be able to include the modified date in that code that makes the request client side.

brookd
6 Nov 2009, 3:25 PM
Okay, I think I have thought through a decent solution to this problem for my app. In my app, a lot of js files are loaded dynamically, while the core JS is included in the single HTML documents head. So my solution is this:

1. on ServerSide Application Startup (Cold Fusion)

Iterate JS directories and store a map of filenames and their last modification dates. this data is cached in the application scope. Note, I'll have an option to 'refresh cache' available to site administrators to use after any changes are made.

2. In the root HTML file, I simply output the js includes using the last mod dates from the map:

myjsfile.js?v=#application.modmap['jsfilename']#

When my client side application loads, it will make an ajax request and return the entire struct/map of js filesnames and modification dates. This data will be held in memory client side.

Then anywhere in my application where I dynamically load a js file, I'll append the modification date via the map before fetching the file.

---------------

I think this will work. Does any one see any problems with this?

hendricd
6 Nov 2009, 6:48 PM
That sounds reasonable, as long as you can maintain the integrity of your 'application.modmap'. :-?

Nice solution.