by May 7, 2008 0 comments

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.

Direct Hit!

Applies To:
Web developers
Add offline browsing functionality to your website and Web
Primary Link:

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

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

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 (! || !google.gears) {
location.href = "" +
"&message=<your message>&return=<your url>";

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 =
store = localServer.createManagedStore("first_offline_web_app");
store.manifestUrl = manifest.json;

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

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

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.