Firefox 3’s offline capabilities have been getting some attention lately: Chris Double’s post on porting Zimbra to use offline shows-off the potential. Robert O’Callahan and John Resig give details on the different pieces of the capabilities, namely: Offline Cache, Offline Events and DOMStorage.

A Simple Demo – Task Helper

I put together a simple offline application sample to help illustrate how the features can work. Call it – explanation through code. The application is a simple task list system. The current functionality includes:

Add tasks – Enter text in field and press ‘Add’

Complete tasks – Mark completed tasks and press ‘Complete’

Remove tasks – Mark tasks and press ‘Remove’

Data is stored as JSON and XHR is used to interact with server (PHP)

Nothing fancy. However, the application is “offline-aware”, meaning:

Application resources (HTML & JS) are tagged as offline cacheable

Before interacting with server, online status is checked. If online, use XHR. If offline, use DOMStorage

Online/Offline status is monitored using events. When the application switches form offline to online, data is resync’ed with the server

There is really nothing fancy about the offline stuff either, but putting it all together does make for a neat application. Using the latest Firefox 3 alpha, you should be able to:

Use the application while online.

Go offline using the “Work Offline” menu. The event log should show that the app went offline

Continue to use the application while offline

Go online using the “Work Offline” menu. The event log should show that the app is back online and has updated the server with any offline changes

If you were using a version of Firefox 3 with the offline cache patch (bug 367447) you would be able to a little more:

Use the application while online.

Go offline using the “Work Offline” menu. The event log should show that the app went offline

Continue to use the application while offline

Restart browser

Switch to offline (or have no network connection)

Enter URL to app (or use a bookmark)

Start using app with data from last session

Switching to online will update the server with offline data

Currently, the offline events only fire when offline is toggled via the “Work Offline” menu. Getting the events to fire by watching the network connection is the goal and would make this much more unobtrusive for the user.

Here is the source to the task helper application: taskhelper-src.zip