Going offline with Google Gears

BANGALORE, INDIA: In recent times, Web applications have replaced the job of various desktop applications. Office Document desktop applications for instance, are now available through online web applications. The reason these web applications are gaining an edge over desktop applications is that they have the same usability functions like desktop applications. Besides, web applications are available across any platform through a web browser. The implementation of AJAX tools gives the web applications a desktop like feel, but unlike desktop applications, web applications are available only when you are online.

Now suppose the kind of offline functionality that a desktop mail client like Thunderbird or Outlook provides, wherein even if you aren't connected to Internet, you can compose, view and delete mail messages, and when the Internet connection is restored, these messages are synchronized with the mail server. This kind of offline functionality can now be incorporated into online web applications as well, thanks to Google Gears.

The Google Gears toolkit consists of three independent elements, which are as follows.

LocalServer: This module acts like a local proxy server with a JavaScript API. It allows a Web application to cache and serve its local HTTP resources locally, even without a network connection.

Database: The Database module enables one to store and access data from within the browser. Gears uses the open source SQLite database engine for caching and storing web applications' data and pages.

WorkerPool: This module allows a web application to run JavaScript code in the background, without blocking the main page's script execution, i.e. asynchronously WorkerPool scripts work and make the whole application more responsive.

AJAX also provides asynchronous data-fetching from the server; but with Gears once the data-fetching has been done from the main server, the Web application can be unhooked from the Internet. This was not the case with the AJAX-based websites, where continuous network connectivity was required so that the web application does not face 'Page Not Found' error. (As shown diagrammatically)

Getting started with Gears

Google Gears is compatible with Firefox and IE web browsers, and by installing the Gears extension the browser can be enabled for offline functionality of the Web applications. The online page should provide the user with an option to go offline, and this is when the online page of the web application will cache the relevant data and store it locally. So, when you are not connected to Internet you can do all the operations on a page using the locally stored files. Later when you go online, the locally stored data will be synced with the main Web application server. Let's look into the intricate details involved to make an online web application function offline.

To begin with, we need to initialize the Web page with Google Gears by including the gears_init.js script file in the HTML document. To check if the browser has Gears extension installed, we look for the global google.gears object by the following script snippet:

if (!window.google || !google.gears) {

location.href = "http://gears.google.com/?action=install" +

"&message=&return=";

}

If the browser is not Gears installed, the script will redirect the browser to Google Gears' install page. You can append an optional message and return URL to the install page URL as query string parameters. Now to instantiate the LocalServer as the user goes offline, the page objects get downloaded and stored locally by the following script that uses google.gears.factory.create method.

localServer = google.gears.factory.create("beta.localserver");

store = localServer.createManagedStore("first_offline_web_app");

store.manifestUrl = manifest.json;

store.checkForUpdate();

When in offline mode, the LocalServer serves all the HTTP requests from the locally stored contents which are stored locally either in ResourceStore or in ManagedResourceStore. While the former is used to store the resources like images that aren't updated frequently, the latter is used to store a group of resources that might change frequently. Google Gears will automatically retrieve and update the local cache.

The contents of a ManagedResourceStore is defined by a manifest file, which we set in the third line of the code snippet. A manifest file is written in JavaScript Object Notation (JSON) format. It lists the URLs to be captured by a ManagedResourceStore and contains the versions for the file formats and contents, and also contains an optional redirection URL. For all the URLs listed under the manifest file, it's mandatory that they all follow the 'same-origin policy', meaning that all those URLs must originate from the same host.

An application can have multiple manifest files and ManagedResourceStores, but for each ManagedResourceStore one needs to specify which manifest file is to be used for it. The checkForUpdate method in the ManagedResourceStore will initiate the update task and return immediately. The Managed Store will capture the URLs specified in the manifest file. Then by setting the manifestUrl attribute of the ManagedStore we pass this manifest file to the store for retrieving objects.

Through LocalServer, this is how we can create local stores (caches). In next series we will analyze how to use the Database and WorkerPool attribute of the Gears to make a demo web application function offline.

Gears seems to be a solution that Web developers have been waiting for to make the Web applications work offline. It is simple to make a single page application with AJAX-based page components to work offline. But in a multi-page Web application this may become a tricky job of maintaining the locally stored caches and to include all the downloadable pages or data into the manifest files.

Gears being a lightweight extension having JavaScript APIs has the potential to change the client side interface and the way of working.