www.hahana.co.uk logo

This is the development area. Primarily these examples are for HTML 5 web applications. One of the problems I usually find is that demos are over complicated, however the demos here just show a single feature and are usually very basic. The intention is to show hoe to get a feature working (rather than an entire working application) so that you can easily integrate it into your application.

HTML 5 - App Cache Demo (Firefox 3.5, Safari 4, Safari iPhone)

App Cache is a new HTML 5 feature that allows sites to run offline by specifying features that should be cached locally for use when there is no Internet connection. The big advantage is that HTML, CSS, JS can all be stored locally, meaning that web apps work offline as well as online.

Tip: The *most* important thing to remember is to configure your web server to deliver the .manifest file as type text/cache-manifest.. Without this the caching will not work at all. A simple way to check this is to open the page in Firefox using the Live HTTP Headers plugin to see the content-type of each file that is returned.

Tip: On the iPhone, App Cachine is only invoked when the user browses to the webapp and then clicks the + and selects "Add to Home Screen". This creates an icon on the desktop and also saves the files specified in the manifest locally.

HTML 5 - Online / Offline Demo (Firefox 3.5, Safari 4, Safari iPhone)

Demonstrates the new capability to ask the browser what its current state is either by the navigator.onLine Method or by the events document.body.offline and document.body.online. This demonstartes the events approach.

Tip: This works best on the iPhone by simply turning on Airplane mode.

HTML 5 - Cache Status Demo (Firefox 3.5, Safari 4, Safari iPhone)

Difficult to demonstrate, as it requires updating the manifest file. The result you will see is checking and noupdate, however when the manifest is updated (simple timestamp update will suffice) the app displays a link to apply the update swapcache(), and then reloads to start the application again.

My thoughts on this are that you may want to involve the user in the process of applying updates, by showing a link to allow them to restart the app, however if there is critical functionality involved you could always do it automatically.