In our HTML, we create a DIV with the special id "dot-widget", which Dojo Offline will automagically fill with a default Dojo Offline widget that tells the user when they are online or offline; gives them sync messages; and provides instructions on how to download and install the small Dojo Offline client runtime. It basically handles all of the UI tedium and hard stuff of providing good offline feedback to a user. Here is that widget inserted into the page:
The default Dojo Offline UI will fill in your application name automatically into the UI based on what you set dojox.off.ui.appName to in your JavaScript file; in our case we set it to "Hello World".
It will also fill out the Learn How link with your app name; click that link now to see an autogenerated page that helps your users make sure they can work with your application offline. That page automatically figures out if Dojo Offline is installed or not, and provides instructions on downloading it if not and providing an easy link to running your application offline (which is just autoset to be the URL of this current page, btw)
Do a View Source on this page to see the JavaScript necessary to create an offline web application.
As you play with this example, after installing the Google Gears plugin, experiment with dropping the network and going off- and on-line.
To be somewhat of a real example, we need to be able to have an action that can be performend either on or offline. The following input lets you 'send' Hello World messages to a server (it's fake -- we don't really send messages). When we are online, entering a message and sending it will cause the action to happen immediately (we fake send it to a server); when offline, we queue this up to be sent when we next go online:
Debug output: