Firefox 3 – Offline App Demo

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)

taskhelper.png

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

7 Comments

  1. Robert O'Callahan said,

    February 17, 2007 @ 3:38 am

    Automatic switching to offline mode should be working on Windows and Linux. I think there’s some kind of regression on Windows that’s blocking it. We’ll track it down.

  2. Mike Beltzner said,

    February 19, 2007 @ 11:57 am

    Very cool, Mark. In fact, I daresay that it’s hot. One hopes that the folks from http://www.rememberthemilk.com grab this source and extend it so that it calls out to their API. It would be a great win for their service.

  3. Mike Beltzner said,

    February 19, 2007 @ 11:58 am

    Bah, hit submit too early :)

    I meant to ask: are there any primitives or built in functions for data synchronization being planned to ease that aspect of online/offline apps for application developers?

  4. edbong said,

    March 13, 2007 @ 7:49 pm

    We are still in beta but would love to make out system work with the on/offline feature. Is there anybody who can help us?
    We are developing an Open Source Platform similar to salesforce.com Appexchange… have a look:
    http://www.applicationexchange.com

  5. Mark Finkle’s Weblog » Offline Cache Support in Firefox said,

    March 14, 2007 @ 2:03 am

    [...] that the offline cache has landed, Firefox nightly builds will support the offline demo I made, as well as any other demos – like maybe Chris’ Zimbra [...]

  6. Le Web Hors Connexion, C’est IN! at L’actualité de l’IT said,

    March 25, 2007 @ 6:08 am

    [...] du côté client d’une façon persistante et sécurisée. En pratique vous pouvez voir l’exemple de Mark Finkle, développeur Mozilla, qui a mis en pratique une application de gestion de tâche simplifié qui [...]

  7. Bringing Web-based applications offline « devoxis said,

    March 30, 2007 @ 4:13 am

    [...] 3.0 has offline support in its roadmap. Firefox developer Mark Finkle has been blogging about its offline capabilities, and Firefox developer Chris Double has been adding offline support [...]

RSS feed for comments on this post