Going Offline with Google Gears

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.

What is Google Gears?



Google Gears was released at Google Developer Day 2007 as an open source set

of JavaScript APIs that can be used to build offline web applications. Google

Gears replaces the dreaded '404 Page Not Found' message with a local database

and cache. The set of JavaScript APIs are used to enable offline functionality

to the web application. Google Gears also comprises of an open source browser

extension. This extension includes a SQLite database engine, a cache, and

JavaScript library that allows the web application to make use of the local

cache and database when the web application is offline. So a browser with Gears

installed can cache for a Gears ready Web application's relevant pages and data,

and lets you navigate through the web application even when you are offline.

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:

With Gears once the page has been fetched locally, the network activity is not needed at all, however, the responsiveness of the application increases

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.