samaxes

Brad Neuberg from Sitepen wrote an extensive tutorial about Creating Offline Web Applications with Dojo Offline.

What is Dojo Offline?

Dojo Offline is an open-source toolkit that makes it easy to create sophisticated, offline web applications. It sits on top of Google Gears, a plugin from Google that helps extend web browsers with new functionality. Dojo Offline makes working with Google Gears easier; extends it with important functionality; creates a higher-level API than Google Gears provides; and exposes developer productivity features. In particular, Dojo Offline provides the following functionality:

• An offline widget that you can easily embed in your web page with just a few lines of code, automatically providing the user with network feedback, sync messages, offline instructions, and more
• A sync framework to help you store actions done while offline and sync them with a server once back on the network
• Automatic network and application-availability detection to determine when your application is on- or off-line so that you can take appropriate action
• A slurp() method that automatically scans the page and figures out all the resources that you need offline, including images, stylesheets, scripts, etc.; this is much easier than having to manually maintain which resources should be available offline, especially during development.
• Dojo Storage, an easy to use hashtable abstraction for storing offline data for when you don’t need the heaviness of Google Gear’s SQL abstraction; under the covers Dojo Storage saves its data into Google Gears
• Dojo SQL, an easy to use SQL layer that executes SQL statements and returns them as ordinary JavaScript objects
• New ENCRYPT() and DECRYPT() SQL keywords that you can mix in when using Dojo SQL, to get transparent cryptography for columns of data. Cryptography is done on a Google Worker Pool thread, so that the browser UI is responsive.
• Integration with the rest of Dojo, such as the Dojo Event system

Dojo Offline is built to work with the 0.9 release of Dojo, and will not work with older versions of Dojo, such as 0.4. It also requires the Google Gears plugin to function; if users do not have it installed Dojo Offline will prompt users to download it.

Google announced Google Gears at Google Developer Day 2007.

Google Gears is an open source browser plugin that will enable developers to create offline web applications using JavaScript APIs. As a developer, you’ll be able to make an application with the assurance that it will work offline and online across browsers.

Google Reader is the first online application to offer “Gears-enabled offline capabilities”. After you load the Gears plugin you get a new icon at the top of your Reader window which enables offline capabilities of Google Reader.

The great news about Google Gears is that Dojo and Google are working together; Dojo Offline has been ported to use Google Gears as the base platform.

Ajaxian has interviewed Brad Neuberg from Dojo Offline, listen to the podcast.

Although I’m not a big fan of the Dojo Toolkit, I’m impressed with the the Dojo Offline Toolkit.

I’m confident that this will greatly improve the way some actual web applications work.

What is the Dojo Offline Toolkit?

Dojo Offline is a free, open source toolkit that makes it easy for web applications to work offline. It consists of two pieces: a JavaScript library bundled with your web page and a small (~300K) cross-platform, cross-browser download that helps to cache your web application’s user-interface for use offline.

How Dojo Offline Works?

Dojo Offline uses a very small, standard web proxy that runs locally. Web proxies are perfect; they speak standard HTTP/1.1 between a web browser and a server, caching files that wish to be cached for later access without hitting the network. Many companies run a web proxy on their networks, caching commonly accessed pages for later access; why can’t this web proxy run on a user’s local machine, caching a web application’s UI for offline access? A web server can simply turn on standard HTTP/1.1 caching headers on its user-interface files, which the proxy dutifully caches. If the browser comes up but the network is down, the local web proxy will simply hand back its cached UI files. Even better, the proxy will automatically update any of its cached files if they have been updated, based on their caching headers, which means the UI gains auto-update for free — no new standards are needed.

How do we configure the web browser to talk to our local web proxy? We use a standard from the late nineties not known by many but which has deep and mature support in all browsers called Proxy AutoConfiguration (PAC). A PAC file is a small bit of JavaScript that is invoked on each browser request. This JavaScript can decide how to resolve the address, either by directly talking to the web site or by using a proxy. For Dojo Offline, we only want to talk to the local proxy and cache files for Dojo Offline web applications, not for all web sites so that that we don’t fill up our hard drive. Our PAC file will therefore talk to the local web proxy for any domain names that want to work offline, and will ignore the proxy for all other addresses; this will be a simple JavaScript if/else statement in the PAC file. We programatically register our PAC file for a user’s browser. This PAC file is actually generated dynamically by the local Dojo Offline proxy.

How does a web application add itself to the PAC file so it can work offline? We have to be very careful here. We don’t want to create an attack vector to the user’s local computer by having the web application “talk” to localhost, such as “http://localhost:1234/add-web-app?url=mywebapp.com” or make it possible for one web application to spoof another one and have it be added to the PAC file if it doesn’t want to be added. The entire focus of security for Dojo Offline is to keep the surface area of trust as narrow and small as possible, constraining privilege to just the small web proxy, which only runs on the loopback address and never touches the real network — everything else must use standard domain names, forcing them into the browser’s standard, restricted web privilege level. Further, the Dojo Offline Toolkit’s proxy is completely generic and does not have to be tailored for individual applications.

Dojo Offline’s PAC file comes bundled with a single, magical bootstrap domain name initially, “offline.dojo.web.app,” that a web application can invoke to add itself to the PAC file. The PAC file routes any request for this domain to the local proxy, and the Dojo Offline proxy checks the referer (sic) header for the domain name to be added offline. Normally the referer field can be spoofed, but there is no way for a web application to spoof the referer field from inside the web browser. The predefined offline.dojo.web.app domain name also exposes other services a web application can use, such as knowing whether it is on- or off-line. Access to these services is mediated by a thin, easy-to-use Dojo Offline JavaScript API, bundled with the web application itself.

The web browser does not know the difference between whether you are on- or off-line, since the proxy serves up the UI either way. Dojo Storage can save hundreds of K or megabytes of application-level data, and is keyed off of the domain name for security; Dojo Storage is therefore “tricked” into not knowing the difference and is therefore accessible either way with the same data store. Applications can use this persistent, megabyte-capable store for all offline data needs, accessing the same information whether you are on- or off-line.

The last step is to wrap the Dojo Offline Toolkit into a small installer for each target platform, and to have it start up silently on system startup. The download size will be only 100 to 300K, making it extremely easy to download and try; an uninstaller will also exist for each platform, bundled with the download. Everything is automated, hands-off, and easy.

Try out the Moxie demo, and download the Dojo Offline SDK.

Other frameworks implementing offline functionality

• Apollo - Proprietary framework by Adobe that enables you to create web applications that work seamlessly of whether a user is connected to Internet or not.
• Dekoh - Pretty much the same but open source and cross platform (written in Java).
• Slingshot - Offline functionality to Rails apps.