Google Gears Tutorial 

Creating your first Google Gears application


This tutorial introduces you to Google Gears. I tried the tutorial in the Developers Guide and thought it could be simplified. So here is a very simple tutorial for the Google Gears.

Day by day, web applications try to replace the desktop applications. The power of web applications lies in the availability (you are no longer tied to a particular PC), portability(any hardware/any OS) and simplicity (simple navigation model - links, back, forward). But the problem with these online applications is that, well, they are available only online. Once you are disconnected from the internet, those applications are inaccessible.

Think of your mail client like Outlook or Thunderbird. They do need a network connection to receive and send the mails, but even when you are not connected to the network, you can read the locally stored mails. You can compose new mails, they are saved locally and when you connect to a network, they silently send them. Can we bring this kind of off-line functionality to an online application? Yes. Welcome to Google Gears. The off-line web application is no more an oxymoron. Its a practical reality.

How does this work?

  • To start with, you need an online page.
  • The online page should present the user to switch to off line mode.
  • When the user selects to off line mode, the online page should download the required files and save it locally.
  • Even when there is no internet connection, the user will be able to do the operations with the local files.
  • Once the user goes online, the data that is modified will be synced with the server.

This sounds so simple. But the devil is in the details. Let us explore each step in detail.

First is the online page. Lets have the online.html as the initial page. On clicking the "Go Offline" button, we download this page and store it locally. This is done by this javascript:

    localServer = google.gears.factory.create("beta.localserver");
    store = localServer.createManagedStore("first_offline_web_app");
    store.manifestUrl = manifest.json;

The first line, we create an instance of LocalServer from the Google Gears factory. When you are in offline mode, LocalServer serves your HTTP requests. The contents are stored either in ResourceStore or in ManagedResourceStore. The former is used to store the not-so-frequently-updated resources like images. 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 line no 3. The checkForUpdate method in the ManagedResourceStore will initiate the update task and return immediately. The update task which will run the background will:

  • Get the manifest file from the URL
  • Compare the version number in the locally stored version
    If they are different then fetch the contents specified in the manifest
  • For each URL, IfModifiedSince will be requested. If the URL gives a newer timestamp than the previous one, then the contents will be requested
  • Once all the URLs are fetched and saved, the version number of the local files are updated with the latest one

A point to note is that Google Gears will go and fetch the latest version if its DIFFERENT from the local one. So if the local version is "Version 5.9" and the remote version is "Version 4.0", the local cache will still be updated.

Everything looks fine now. One last thing to do is to install Google Gears :-)

Google Gears is a plugin for Firefox. Every URL request goes thru this plugin. Whenever there is a LocalServer available for the URL and its active, then the contents will be fetched locally. Else the normal behavior of fetching from the network will resume.

To detect whether Google Gears has been installed and to access its API, we need to include the gears_init.js file in the HTML.

Click here and see the tutorial live.

Send me your comments/suggestions/corrections to my gmail id: grprakash