Firefox 3 – Offline App Demo – Part 2

Last year (wow, that long ago?) I made a simple demo to show Firefox 3 offline capabilities. A lot has changed between then and now. Firefox 3 offline capabilities changed significantly to align better with WHATWG offline specification. The biggest changes involve dropping support for our own <link rel="offline"> mechanism and supporting WHATWG manifests and application cache. The specification gives some details on how it works. There is an MDC article on using offline resources in Firefox 3.

Since so much has changed, I decided to update the demo application. Here is the overview of the application, updated where needed:

A Simple Demo – Task Helper

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)

offline demo app

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

  • Application resources (HTML & JS) are listed in the offline cache manifest. This manifest must be served as “text/cache-manifest” and follow the manifest rules.
  • 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 from 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 (beta 5 or nightly), 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.
  • 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.
  • Switch to online. The event log should show that the app is back online and has updated the server with any offline changes.

Try it: Task Helper
Source code: todo-offline.zip

Note: The data is stored in a simple, shared JSON file on the server, managed with a simple PHP file and reset every hour. No fancy databases with multiple session support.

20 Comments

  1. Tomer Cohen said,

    May 9, 2008 @ 4:37 am

    While demo applications are great, we need to get some real-world applications available in order to show the feature to users and other developers. Currently, Google Gears does the same as WHATWG offline support specification, but until applications such as Google Reader and Zoho Office will support the specification and not only be limited to Google Gears plugin API, users will still need Gears for offline support.

    I guess in the meantime we can create simple extension to convert between Google Gears API calls and WHATWG specification.

  2. Daniel said,

    May 9, 2008 @ 9:59 am

    “I guess in the meantime we can create simple extension to convert between Google Gears API calls and WHATWG specification.”

    Please do. That would be great (at least until websites use the official way).

    You present this as a simple demo application. I could actually use it, even in the simple form it is now. Any chance of extending it? I can code php, html, and css, but not javascript, so I can’t really make it better.

    Daniel

  3. Michael Monreal said,

    May 10, 2008 @ 7:48 am

    I asked for an example like this yesterday on IRC (shortly before you were kicked from the channel ;)

    I want to demo this feature of firefox at my university but sadly I cannot make it work correctly… It works fine in online mode, it detects the switch to offline mode correctly, but if I restart firefox (truning on offline again) the page loads, but the old data I entered is gone. I guess the old data should be loaded from cache?

    Would be nice if you could ping me on IRC, I’m also monitoring your blog for comments.

  4. Firefox 3 Offline App Demo | arthuran.net said,

    May 14, 2008 @ 9:12 pm

    […] resources in Firefox [Mozilla Developer Center] Firefox 3 – Offline App Demo – Part 2 [Mark Finkle’s […]

  5. Firefox 3 lavorerà anche Offline! :: News Orebla.it said,

    May 15, 2008 @ 2:38 am

    […] Finkle nel suo blog ha creato una pagina, appositamente strutturata, per supportare questa nuova tecnologia sviluppata su Firefox […]

  6. Zac said,

    June 3, 2008 @ 12:52 pm

    Demo works a treat – thanks – except that the only way to toggle offline/online is via the browser …. when I kill the network connection, the app doesn’t detect the failure (neither automatically or at the point that I try to add/remove an item from the list).

    Thx

  7. Mark Finkle said,

    June 3, 2008 @ 1:54 pm

    Zac – sounds like the Mac bug:
    https://bugzilla.mozilla.org/show_bug.cgi?id=426932

  8. Zac said,

    June 3, 2008 @ 2:23 pm

    ‘cept it’s happening on Vista Home !

    What is more concerning is that page simply does nothing – no error message, just click “Add” or “Remove” and the page simply sits there, no JS error – nothing.

  9. Ben said,

    June 9, 2008 @ 4:43 pm

    Hi,

    please, are there any plans to support window.openDatabase()?
    Like http://webkit.org/misc/DatabaseExample.html

    In other words, sorry if I’m misunderstanding this. It seems to me that there are 3 kinds of local storage options: globalStorage, localStorage (both key/value) and openDatabase (SQL). But I was unable to find any information on the last one (for Firefox), so I’m asking whether is this because it’s simply not supported? Or is it just too new?

    Thanks in advance!

  10. Firefox 3 ????? | ???? said,

    June 12, 2008 @ 10:05 pm

    […] more, see Online and offline events, Offline resources in Firefox, Firefox 3: Offline App Demo by Mark Finkle, Offline Web Applications (Feb 2007) by Robert […]

  11. » Mozilla Firefox 3 ????? said,

    June 13, 2008 @ 4:11 am

    […] Online and offline events?Offline resources in Firefox?Firefox 3: Offline App Demo??? Mark Finkle? Offline Web Applications (Feb 2007)??? Robert […]

  12. Firefox 3 ????? (v1.54) - ???? said,

    June 14, 2008 @ 10:54 am

    […] Online and offline events?Offline resources in Firefox?Firefox 3: Offline App Demo??? Mark Finkle? Offline Web Applications (Feb 2007)??? Robert […]

  13. [??]Mozilla Firefox 3 ????? at ????? said,

    June 15, 2008 @ 7:31 pm

    […] Online and offline events?Offline resources in Firefox?Firefox 3: Offline App Demo??? Mark Finkle? Offline Web Applications (Feb 2007)??? Robert […]

  14. Firefox 3????? « ???? said,

    June 16, 2008 @ 2:48 am

    […] more, see Online and offline events, Offline resources in Firefox, Firefox 3: Offline App Demo by Mark Finkle, Offline Web Applications (Feb 2007) by Robert […]

  15. Firefox 3????? » ???? said,

    June 16, 2008 @ 2:55 am

    […] more, see Online and offline events, Offline resources in Firefox, Firefox 3: Offline App Demo by Mark Finkle, Offline Web Applications (Feb 2007) by Robert […]

  16. Firefox 3????? « ???? said,

    June 16, 2008 @ 3:03 am

    […] more, see Online and offline events, Offline resources in Firefox, Firefox 3: Offline App Demo by Mark Finkle, Offline Web Applications (Feb 2007) by Robert […]

  17. Comunidad argentina de Mozilla » Guía de campo para Firefox 3 said,

    June 16, 2008 @ 11:21 am

    […] información, visitá Eventos con y sin conexión (en inglés), Recursos sin conexión en Firefox, Firefox 3: Demo de aplicación sin conexión por Mark Finkle (en inglés), Aplicaciones web sin conexión (Feb 2007) por Robert O’Callahan (en […]

  18. Mozilla Firefox3????? | Puppy blog said,

    June 16, 2008 @ 8:22 pm

    […] Online and offline events?Offline resources in Firefox?Firefox 3: Offline App Demo??? Mark Finkle? Offline Web Applications (Feb 2007)??? Robert […]

  19. Firefox 3.0 6?17????? - ycblog said,

    June 17, 2008 @ 7:20 am

    […] Online and offline events?Offline resources in Firefox?Firefox 3: Offline App Demo??? Mark Finkle? Offline Web Applications (Feb 2007)??? Robert […]

  20. Darknico’s Blog » Mozilla Firefox 3 Finale Disponibile said,

    June 18, 2008 @ 12:00 pm

    […] segnalo la pagina Online and offline events a cui sono illustrate le API da utilizzare, mentre a questa pagina è disponibile un esempio funzionante di web application utilizzabile anche off-line, con tanto di […]

RSS feed for comments on this post