Brad Neuberg has created an example of “offline projects” in order to find a common UI or offline web applications for the Dojo Offline Toolkit. He has put together “offline-enabled mockups” of three popular and useful web applications: Gmail, Blogger, and a corporate portal named Adenine. For all three the goal is to find a consistent, simple user-interface for offline web applications.
Gmail: He started with a mockup of an offline-enabled Gmail, the first thing to notice is the addition of a new widget on the lower left-hand side of the page, the Offline Info widget. This widget encapsulates all of our offline functionality for Gmail.
If the Dojo Offline Toolkit is installed and you sign into Gmail, Gmail will automatically download your 100 newest emails into the offline cache. Now you can access Gmail offline to read your newest emails or compose new ones. When you sign back on your emails will be automatically synced and uploaded.
Here’s the full sequence of syncing messages. First, we download the web application’s user-interface into the offline cache if that has never been done before, or update parts that are new. Screenshot http://img213.imageshack.us/img213/7772/focusedsync2es4.png
What happens if the Dojo Offline Toolkit is not installed? Here’s what you see: [click to enlarge pic, and see lower left-hand side ]. Clicking the ‘Learn How’ link takes you to a page with the following getting started text:
- Download the Dojo Offline Toolkit, a small (200K) utility that helps this web site work offline. This tool is secure and safe for your machine, and should take just a few seconds to download. It will work across Windows, Linux, and Mac OS X.
- Double-click the installer on Windows and Mac OS X to install. For Linux, the installer is a small Firefox extension — approve the install.
- To access this website even when offline, drag the following link to your desktop: Run Gmail.
- Double-click the link on your desktop to start this web application, even if offline.
Blogger: An offline-enabled version of blogger has basicly the same widget as GMail’s Offline Info, but on the right-hand side of the page in the Blogger Dashboard:
On page load, Blogger would automatically download the last 10 blog posts, including images used in those posts. Individual blog posts indicate next to them if they have been locally modified (”modified offline”). If a blog post is not downloaded offline yet, the link “Download offline” appears, which when clicked causes the Offline Info widget to show download progress information, just like a sync. If you have local items that have not been synced, and have elected to sync manually, a small ‘(recommended)’ label will appear next to the Synchronize button.
The rest of the offline UI is pretty much the same, including the DOT download page, the syncing UI, and the configuration UI. The configuration UI might possibly have a small number of application-specific configuration, such as “ Newest Posts Synced,” where  is a text field that can take a number.
Corporate Portal (Adenine): Adenine is a web-based corporate portal; it was selected since it is indicative of how many corporate portals are used and structured. In Adenine, you have a standard portal dashboard; in this case, we have added the Dojo Offline widget:
Like the offline-enabled Gmail and Blogger, this application would auto-download whatever material is appropriate on page load, such as your recent calendar data, recent workflow tasks, and any custom databases you usually work with.
If you are working with a custom database, such as a Recruiting database that allows you to have a list of potential recruits, you can manually download a database or an item within that database; notice the ‘Download offline’ link in the right-hand corner of the web-spreadsheet. Once clicked, ‘Download offline’ would cause the application to select an appropriate subset of this database to download locally, with a small DHTML popup window.