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 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)
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.
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.
“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
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.
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
Zac – sounds like the Mac bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=426932
‘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.
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!