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:
Tommy, another way to do it is by adding the version to JS libray name. Something like myLib13.js
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 :)
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.
@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.
Post a Comment