Gears takes web applications offline

Dj Walker-Morgan

A number of web applications are adopting Gears to let their users work without a network connection. We look at how Gears does this and what it brings to those web applications.

The first generation of web applications were simple things. You would click a link or a button on a static web page and a request would travel over the internet to the server. The server would then write a whole new page and send it back to your web browser to reflect whatever change or update you had requested. This simple model worked, but this generation of web applications were not as interactive or responsive as desktop applications.

AJAX changed all that. AJAX isn't a specific set of tools but a range of techniques that make web applications more desktop-like. AJAX uses JavaScript, which is embedded in every web browser, to act as a smart client to a web service.

Typically, when you connect to an AJAX web application, the JavaScript code that creates the page you see is, in the background, querying a server somewhere on the internet for the content to put into the page. When you click on a button on that page, instead of going straight to the web server, the click is picked up by the JavaScript code, which can immediately make visual changes and if needs be, send a request to the web server to get new data or apply changes.

AJAX gives web applications the ability to behave much more like desktop applications. Add that to the general benefits of web applications - available anywhere there is a web browser, on any operating system and potentially usable on the desktop or on a mobile device - and you have a very compelling reason to use AJAX based web applications.

But there is one situation where a desktop application still currently wins out; if you are disconnected from the internet, the desktop application can carry on running. An AJAX application will carry on working right up until it needs to query the web server, at which point all you get to see is a spinning progress icon.

The simple answer to this problem is "stay connected to the Internet", but this isn't always possible. For example, a laptop using WiFi may not be near an available hotspot and so is effectively offline.

One way of alleviating the problem of offline use that a desktop application might use is to maintain a local database which can be synchronised with the server when the local machine can connect to it again, but web browsers don't have a database in them. There are various ways of caching data built into browsers; the cookie was meant as a way of persisting data in browsers, but cookies were not designed to be accessed as a database, they are easily erased and have become somewhat suspect to many web users concerned with being tracked online.

Gears, previously Google Gears, is one of the first solutions to appear and take on this problem. Gears is an open source, (new BSD licensed, browser plug-in that contains an SQLite database engine and a JavaScript API to let web application developers access it. Gears does not automatically allow AJAX applications to go offline; the application has to be written or modified with Gears in mind.

To show how Gears can work, we'll look at one of the first applications that used it, Google Reader. Google Reader aggregates RSS and Atom news feeds into a simple to read one page view. Google's servers do all the heavy lifting, polling the feeds for new news.

When you load the Google Reader page, the JavaScript code embedded in the page queries the browser to see if Gears is installed. If it is not installed, Reader behaves as a typical AJAX web application, making regular queries to the server when new information or changes are made, such as getting more items to read or marking items as read/unread. If Gears is installed, apart from being asked if you want to allow Google Reader to use Gears, the only difference the user sees is a new online/offline button.

In online mode, it behaves as it would without Gears. It's when you press the 'go offline' button that Gears steps in. The first thing Gears does is save the Reader web page in its built in database. This includes all the JavaScript, images and CSS styling that may be imported by the page. Gears does this to allow you to return to the web page when you are offline, intercepting the error that a page cannot be found because you are offline, looking to see if it has the page stored and if so, displaying its stored version of the page. This is all done by Gears LocalServer module.

The next thing Reader does is create its own Gears database and download a few thousand news items into it. It then switches where it gets its data from the Reader web service to that database. Reader at this point is now offline. The user can carry on reading news items in the web application. When an item is read, the status change is stored in the local database.

When the system is back online, the user presses the "go online" button and the local database the read/unread status is scanned and where it has changed, that change is sent to the Google servers. Once that process is complete, the Reader web application switches back to using the Google servers for new items and other changes.

Google Reader does expose the kind of compromise offline working with a web application can induce. For example, when it is offline, functions that aren't locally replicated or specifically need to be done online are disabled. So adding feeds, managing them, even marking an entire group of messages as read are all disabled. This is partly down to the implementation; Google Reader was one of the first Gears using applications out there, but it also reflects how complex unmeshing a web application from the web can be. A similar "online/offline" switch is used with Zoho Writer, an online word processor, which synchronises documents between a Gears database and the Zoho servers.

Gears isn't purely for offline use. Wordpress, the blogging application, can use Gears, but only as a local cache of Wordpress administration files. This reduces the load on the blog web server and speeds up the administration pages of WordPress.

There are few alternatives to Gears. Flash developers have the option of using a local storage system, but this is difficult to use from an AJAX-enabled page. The HTML5 working group have specified a database capability for HTML5, and the Webkit developers have implemented it in development versions, although there is no date for HTML5 to become a standard, let alone adopted. Gears has the advantage in that it is already here and working with Internet Explorer and Firefox and available on Windows, Window Mobile, Mac OS X and Linux.

Gears is just over a year old, and is developing into an alternate approach to creating Rich Internet Applications, differing from frameworks like AIR and Silverlight, by skipping the "add a language" step and leveraging the browser's rendering and JavaScript engine. Gears is also gaining features to make desktop integration easier. In the current release, the Gears developers added the ability for a web application to create a short cut on the users desktop.

If you are a web application developer, Gears is a useful route to going offline with your web application without completely changing your current application. If you are a user of web applications, you have nothing to lose by installing the Gears plug in and a lot to gain when you come across a Gears using web application.