gearsAJAXHelper: Use Google Gears with AJAX APIs for Faster Queries

Google Gears is an API that is known for giving developers the ability to have their webpage viewable offline. However, it can also be used to speed up your website. In the case of the AJAX APIs, you can use the Google Gears local cache and client-side database to have queries load fast with cached data while requests for fresh data are done in the background.

We decided it would be cool to write a small library to make it easy for you AJAX APIs developers to write quick-loading, always fresh searches/feeds. The gearsAJAXHelper has two main features - it allows you to store and return key/value pairs from the local database, and it allows you to choose whether you want all resources files on the page (images, CSS, Javascript, HTML) to automatically be cached in the Gears cache.

The key/value pair database feature let's you store the query/results as a key/value pair. Then, the next time the query is made, the results can be served from the database while fresh results are being retrieved. This dramatically reduces the latency in queries/feed grabs.

The (optional) automatic cacheing of resource files will make it so that each time the user visits your webpage they will be getting resources served from their Google Gears cache, not new versions from the internet. Be careful when using this feature, as you might not want stale content to be served. There is also a refresh function, to clear the Google Gears cache of old files.

Here is a sample application that uses the gearsAJAXHelper to quick-load feeds. Notice that after you have clicked on a candidate (or state) once, the next time you click it will quick-load the results. If the results in the database are stale, you will see fresh results populate the content area. Here's how the gearsAJAXHelper library is used in this code:

gearsAJAXHelper.initialize("election", "election", false);

This initializes the library. The first two parameters you pass in are what you want the name of the Gears LocalServer ResourceStore and Gears Database to be named, respectively. The third parameter specifies whether you want your page's resources to be automatically cached.

Then there are just three other main calls that are used:

gearsAJAXHelper.storeKeyVal(key, value);
gearsAJAXHelper.returnKeyVal(key);
gearsAJAXHelper.refresh();

When you make any requests, store the results using gearsAJAXHelper.storeKeyVal(key, value). Use the query/feed address as the key, and the results as the value. In the case of the Presidential Application, in the NewsBox.prototype.searchComplete function I wait until the results have been turned into the desired HTML, then I store that as the value and the query as the key.

The NewsBox.prototype.loadNewsBox function is called before any search is executed. In here, I use gearsAJAXHelper.returnKeyVal(key) to check if the query has been done before - if it has we will use the HTML returned. This should be a near-instantaneous operation. Immediately after, I execute the search we would have done so that when it completes fresh results will be served. If the database doesn't have the key/value pair stored, then we will execute the query as normal.

In some cases, you might want to clear the database of old entries as well as clear the Gears LocalServer cache - use the gearsAJAXHelper.refresh function for this.