Google Gears example using Digg API

Google Gears API is a tool kit which provides JavaScript APIs to allow web application to work off-line.

Three ‘core’ JavaScript APIs are provided:

LocalServer A local cache html, JavaScript and image files. Also provides mapping from on-line URLs to off-line URLs.

Database Google Gears comes with an SQLite database which is accessible via the Database API.

WorkerPool I have not used this, but the Google Gears description states, it can “Make your web applications more responsive by performing resource-intensive operations asynchronously”.

I’ve put together an example which uses the LocalServer and Database JavaScript APIs.

Try out the Google Gears Example using the Digg API

Try out the following steps

• You’ll be asked to install Google Gears first, if you don’t already have it installed
• Fetch some Digg story titles from the drop down list, these story titles are saved into a local database provided by Google gears on you machine.
• This is where the magic happens! On the right hand side click capture.
• The document is now captured and available for off-line browsing. Go ‘off-line’, so in Firefox click ‘File’, ‘Work Offline’.
• View the URL again, and low and behold you will see the same web page even though you are Off-line. You’ll also notice a list of the titles that you had fetched before you went off-line.
• You can Erase the the document from Google Gears with the ‘Erase’ button too, and empty the database with ‘Empty’ if you wish.

And that’s that! Two out of three of the Google Gears demonstrated. Remember to put your browser back on-line when you’re done.

A couple of caveats

• Google Gears does not do server side scripting. The functionality that you wish to make available off-line must be implemented via JavaScript.
• Adding Google Gears functionality to an existing web application will require additional code in your application. How much code depends on the level of off-line functionality you want to achieve. You will need to insert logic into your app to check it’s off-line/on-line state and to tell it what to do if it’s off-line as well as when it’s on-line.

This entry was posted on Wednesday, November 14th, 2007 at 5:20 pm and is filed under Javascript, Opensource, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.