Using Google Gears on a Weblog

My buddy Niall Kennedy has added Google Gears support to his weblog. While most folks think of Google Gears as just a plugin that helps you go offline, it also includes interesting tools that can help with web site performance, such as a local server that can serve resources and a local database for storing client-side data. Niall specifically used Gears to improve the performance of his blog by having all the images and resources of his blog get cached into the Gears local server. The end result of this is that when users hit his site in the future, images and other ancillary resources are served from Gears rather than his remote web site, improving the load time of his page.

A similar effect can be achieved by simply turning on HTTP/1.1 caching for your images and scripts. However, this caching is on a file-by-file level. The nice thing about Gears is you can bundle an entire set of resources at once, versioning them. You do this with a simple manifest file that you put on your web server. Here is Niall's:

{
"betaManifestVersion":1,
"version":"1.01",
"entries":[
 {"url":"../css/design.css"},
 {"url":"../css/resume/style.css"},
 {"url":"site.js"},
 {"url":"../css/images/body_bg.gif"},
 {"url":"../css/images/frame_bg.gif"},
 {"url":"../css/images/roundcorners.gif"},
 {"url":"../css/images/blog-backgrounds.gif"},
 {"url":"../css/images/icons.gif"},
 {"url":"../css/images/feed-readers.gif"},
 {"url":"../css/images/img_bg.gif"},
 {"url":"../css/images/preview.gif"},
 {"url":"../css/images/postcomment.gif"},
 {"url":"../css/images/search.gif"},
 {"url":"../css/images/icons/email.gif"},
 {"url":"../css/images/icons/phone.gif"},
 {"url":"../img/headshot.jpg"},
 {"url":"../css/images/headers/about.gif"},
 {"url":"../css/images/headers/contact.gif"},
 {"url":"../css/images/headers/home.gif"},
 {"url":"../css/images/headers/personal.gif"},
 {"url":"../css/images/headers/resume.gif"},
 {"url":"../css/images/headers/soccer.gif"},
 {"url":"../css/images/resume/msft.png"},
 {"url":"../css/images/resume/technorati.png"},
 {"url":"../css/images/resume/nextag.png"},
 {"url":"../css/images/resume/callan.png"},
 {"url":"../css/images/resume/aeosports.png"},
 {"url":"../css/images/resume/amex.png"},
 {"url":"../css/images/resume/pricegrabber.png"},
 {"url":"../css/images/resume/ucla.png"},
 {"url":"../css/images/resume/java.png"}
]
}

If Niall wants to refresh all of these resources, he can just change the "version" number; Gears will then refresh all of the resources when this happens.

Read more info on manifest files here; Dion Almaer has also written a tool that can help generate them for you.

Note that the manifest file isn't enough; you will need to create a bit of JavaScript that loads the manifest file for Gears. It would be cool if Gears would do this automatically, perhaps when the file has a well-known name on the root, such as /x-gears-manifest.json or something; note that this isn't on the roadmap right now -- it's just a random idea from me.

Niall also tied in a bit of reporting so he could track how many of his visitors are using Google Gears using a clever trick. In his JavaScript he put some Urchin tracking code to see how many folks grabbed the Gears manifest file (Niall told me it was ok to share this):

store=server.createManagedStore('niallkennedy');
store.manifestUrl='/js/gears-config.json';
store.checkForUpdate();
urchinTracker('/js/gears-config.json');

Now if Gears initializes and is present, we reached the urchinTracker() call and the fact that Gears was initialized is registered with Urchin. BTW, if you don't know what Urchin is its a tool that you can plug into your web pages to get analytics and find out what pages are being accessed and how.