Wednesday, January 16, 2008

Coping with caching of JS-libraries

Update, 17.01.08: If you want to play it safe, follow Vitors advice to me (in the comments), and use versioning on the file-names of the scriptlibs. My experiment was fun, but it's bad to put the "responsibility" of handling change in the codebase, on the customer.

At work today, a customer couldn't get the CMS I am responsible for to work properly. The reason being that I recently updated some markup and JS in the design-template for the CMS. The client had the old JS library cached in the browser. Due to the markup-change, a function in the old JS library failed, which resulted in a JS error, and things not working properly.

This got me thinking on how to avoid this in the future/let the user know what failed, and if a caching issue, how to force a refresh.

My so far best solution is to have two javascript-variables (strings). One in the markup (above all the external JS-libs), and one in an external JS-library. If the two doesn't match, inform the user.

The downside to this approach is if you have several non-static JS-libraries on one page. You can't know which one is going to be cached, so you have to add the check to all of them.

[Flash Animation. If not visible in your RSS-reader, open blogpost]

The accompanying demo application is a mess, but hopefully it's easy for you to play with. Tested in IE6/7, FF2 and Opera 9.

>> Simple demo application


Vitor Pereira said...

Tommy, another way to do it is by adding the version to JS libray name. Something like myLib13.js

Tommy Valand said...

Renaming the script is a safe way of doing it. "My way" is the way of the irrational programmer, not wanting to change the file-name of the scriptlibs.

The customer I mentioned was running a "beta" of a new version, so many changes were going on.

I think I'll start versioning, to be on the safe side. Thanks for helping me get on the right track :)

Unknown said...

Vitor, I was wondering exactly how the browser handles caching web files. Do you know if if takes into account the whole URL path or only the actual file name ?
I am going to deploy a new application and I'd rather change the URL with a directory reflecting the web version, instead of renaming the Javascript file itself. I'm afraid that some browsers or firewalls would consider only the javascript filename.

Tommy Valand said...

The browser only caches per URL.


The first time you visit:
The page is downloaded/cached is in the cache, load from cache
A new URL, download and cache.

The anchor part of the link (#news) is stripped from the URL before the request is passed to the server, so in the above example, the server only sees
when the browser is opening this url,

Further explanation about hash URIs.