Zimbra is heavily ajax based and gives a good idea of how difficult or easy it is to convert an existing application to use the offline support. For this first cut I made Zimbra work when the browser is in offline mode and provide the ability to browse the email folders, and view messages while offline that are held in the Inbox and Drafts folders.
The Firefox features used to enable offline operation were:
- DOM Storage for storing emails and folder information. DOM Storage is an implementation of a WHATWG specification.
- Offline Cache. A patch is available for Firefox that adds an offline cache specifically for web applications to store data (like images, pages, etc) that must be available while offline. Items are loaded in the cache using a rel="offline-resource" element on a <link> element.
- JAR file Protocol. Firefox accepts JAR protocol URLs. These reference individual items in a JAR file and allow convenient bundling and caching of resources. For example, to reference the file /core/AjxCore.js in the ajax.jar file, the URL would be: jar:/zimbra/js/ajax.jar!/core/AjxCore.js
- Offline Events. The browser has "offline" and "online" events that are triggered when the user chooses to go offline via the menu, or when network connectivity is lost. I modified Zimbra to listen for these events and display a status indicator showing whether it is in offline or online mode.
A screencast shows me logging into Zimbra, viewing some emails, going offline, the offline/online indicator and the availability of the emails while offline. It's available here: http://www.bluishcoder.co.nz/offlinezimbra.
It's the first screencast I've out together so hopefully it comes out ok. I used the excellent 'wink' tool.