Experimenting With HTML5's Cache Manifest For Offline Web Applications

Posted June 21, 2010 at 10:06 AM

Tags: ColdFusion, Javascript / DHTML, HTML / CSS

Reader Comments

The Manifest is really nice as you can tell the browser to download objects when it does reach the listed content of a website, I am still unsure if this is more of a benefit to those websites that don't turn on headers through IIS/Apache for setting a content expires header.

@Josh,

I think one of the nicest benefits of it is that it will download the given files in the background. As such, you can download and cache files that you have not even been to yet, which is very different than disk cache (which requires a visit first). Also, from what I have read, the SIZE of the cache is very different. Especially on the iPhone, the disk cache is very small, where as the offline cache is much larger.

Speaking of headers, though, what I have seen one person do is actually set an expires header on the cache manifest itself. In this way, the browser doesn't keep trying to check the stored manifest against the life one (as it is explicitly told that the cache manifest won't expire for a given amount of time). So, in that case, it's kind of the best of all worlds.

Thanks Ben. I LOVE what HTML5 and CSS3 are doing to make life easier. Kinda makes the callouses on the fingertips, and forehead bruises a little futile now.. :-)

@Billy,

Ha ha, yeah the CSS3 stuff is especially cool (once you bail on IE6).

This morning, I took this Cache Manifest stuff a bit further and used it to create native-like web applications on the iPhone:

http://www.bennadel.com/blog/1945-Using-The-Cache-Manifest-With-iPhone-s-App-Mode-For-Native-Web-Applications.htm

A comment about this comment:

Add a file to the cache manifest. NOTE: Any file that calls
a cache manifest file will be automatically cached, even if
it is in the WHITELIST portion of the cache manifest.

That seems problematic. If I want to cache images for example, but not the HTML of a page, it sounds like the second I link to the cache file from index.cfm, then index.cfm ITSELF is cached. Is that right?

@Raymond,

Yes, that's my experience with it. I had a ColdFusion page a while back (when I first looked into this) that needs to do just that - cache the images for a photo library. Unfortunately, the second I started using the cache manifest, the ColdFusion page stopped being dynamic :) So, it kind of defeated the purpose.

Hmm. So forgive me if this is covered - I'm mainly just talking this out to myself.

If I only wanted to cache images - I'd have to at least cache the index page too. And if the index itself was dynamic, I'd want to use a Cache Manifest Version that changed whenever the images changed.

@Raymond,

This is exactly what I was trying to battle. I tried including an IFrame in the index page that linked to a page that did nothing more than include the Manifest directive. I can't remember if that worked or not (part of me feels that it did not).

This raises a great question though, one for clarification. Can a non-cached page make use of any cached items? In other words, does the calling page have to include the cache manifest for it to be able to make use of the application cache?

I guess where I'm going with this is - how does the URL to cached items work? It it *strictly* based on resource URL? Or, is it a combination of resource URL and the calling page?

I'll have to play around with that a bit to see what kind of functionality I can get in offline mode in FireFox. Good food for thought!

I would have assumed that if you are on

n.html

and n.html points to a cache file that says urls A+B+C are cached, that n.html need not be cached. But if you click a link to A within n.html, it would use the cached version if offline.

Just guessing.

@Raymond,

I just tried playing around with this non-cached / cached interaction and found some interesting results. At least in "offline" work mode in FireFox, it appears that non-cached pages cannot take advantage of cached images:

http://www.bennadel.com/blog/1946-Non-Cached-Pages-Cannot-Access-Resources-Cached-In-The-Cache-Manifest.htm

FYI, darn good article on the cache:

http://www.html5rocks.com/tutorials/offline/takingappoffline/

@Raymond,

Oh good link, thanks. I saw that the HTML5Rocks web site was just launched like Monday or something on Twitter but have not had a chance to look through it yet. I am sure it is chock full of goodness :)

Curious about something, Ben: Why the toBinary(toBase64())?

When I saw that, I thought that maybe I had missed something. So I looked through http://developer.apple.com/safari/library/documentation/iphone/conceptual/safarijsdatabaseguide/SafariJSDatabaseGuide.pdf again, and there isn't any mention about the cache manifest being anything but text. Also no mention of making the manifest binary at the http://www.html5rocks.com/tutorials/offline/takingappoffline/ URL that Raymond mentioned. And also nothing at the official http://www.w3.org/TR/offline-webapps/ document.

When you think about it, text/cache-manifest has the primary mime type of text, which would argue that you should not make it binary.

So now I'm more confused than ever.

I have no doubt that you read something somewhere about it that made you want to add toBinary(toBase64()). And from your success with BuffBabes, it apparently works fine. But I'd like to read more about the binary conversion rationale if you have some URLs to quote.

Thanks.

Hi Ben,

Just want to say really enjoying this series on HTML5 features, I'm using them at the same time and you're insights are really helping.

I'm using a dynamic cache.manifest.php file (to add entries for all subfolders/images/css) and I've found it a bit hit and miss as to whether the app displays the new content after updating this file.

Usually it takes at least 30 seconds after I've edited the manifest before I can run the app (from Home Screen icon) and have it display the new content.

Not sure where this arbitrary 30 seconds comes in but as long as it works!

@Steve,

The toBinary() thing has nothing to do with the cache manifest itself. It has to do with the CFContent tag in ColdFusion. It's just my personal preference / style when streaming content back to the client. The CFContent tag has a "Variable" attribute that allows you to pass in a binary data value that will become the response data. As such, I need to convert my respond output to a byte array before I can use it with CFContent.

Again, just my personal preference. And in this case, where the "CACHE MANIFEST" directive needs to be the very first thing in the response, this technique, in combination with trim(), really makes things easier.

@Richard,

I have also experienced the delay in how the updates to the cache manifest affect the update. When testing in FireFox, I typically just clear out the offline store and refresh. In Safari on the iPhone, however, I was finding that it did have a noticeable delay in when the changes were acknowledged.

@Ben, thanks. I'm an Adobe Certified Advanced CF developer, but the binary aspect of the cfcontent variable attribute slipped under my radar. Good to know that you have to call toBase64 too to get it debinarized back to text.

FWIW, I use enablecfoutputonly for the same grabbage strippage. (Sorry. Just got back from Fogo de Chao. Post-huge-meal anemic torpor has me playing fast and loose with whether or not something is really a word.)

@Steve,

Mmmm, Fogo :) It's so good it hurts.

Yeah, the Variable attribute of CFContent I believe is new in CF8. I think I'm pretty much the only person who loves it. I very rarely ever see anyone else use it. I just find it makes tailoring the output much easier since you don't have to think about settings and line breaks.

But of course, to each their own. I happen to love it; but not everyone thinks it's all that.

I think the delay is just to do with how the update works. It updates in the background first, and does not automatically replace the version you're looking it. I've written a bit of code which allows the user to choose to update (this works for the data-entry app I have been working on).

http://pastebin.com/MEuDsaiw

So the update prompt appears if the manifest has changed, and roughty 1 minute or however long the assets take to download. Then they are applied and the page is refreshed.

@Richard,

Cool stuff. I've seen the Javascript hooks in the Cache Manifest documentation but have not looked into them at all. From your code, it looks pretty straightforward. I'll have to play around with it. Thanks for sharing the link.

hi ben,
nice tutorial but i found difficulty in update data with javascript
i found this
window.applicationCache.swapCache();

I try this but still cache data is not updating

do you have any idea?

@Kuldeep,

I haven't actually tried any of the Javascript-based ways of interacting with the offline application cache. When I get to that, I'll see if I can shed more light on the issue.

Hi Ben, having checked all articles on Html5's appCache, is there a solution to just update newer files, using the manifest file? I am looking into using application cache to actually have an offline website running on USB stick which is capable to update itself. But only download the changed or added files?

It seems that AppCache lacks support with this particular matter.

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Formatting: <strong>bold</strong> <em>italic<em>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment