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

4 comments:

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 :)

efreitasrj 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...

@efreitasrj:
The browser only caches per URL.

Example:

The first time you visit:
http://somesite.com/index.html
The page is downloaded/cached

http://somesite.com/index.html#news
http://somesite.com/index.html is in the cache, load from cache

http://somesite.com/index.html?OpenPage
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 http://somesite.com/index.html
when the browser is opening this url,
http://somesite.com/index.html#news.

Further explanation about hash URIs.