Blog.gears: An offline Blogger client

I tend to write a fair share of blog posts, and whenever I am writing them while offline I tend to open up Textmate to do the write-up. Wouldn't it be nice if I could open up my blog editor and do it all while I am offline?

We thought that this would be a useful example to tie together Blogger and the newly released Blogger GData JavaScript library to create an offline Blog editor, Blog.gears.

The architecture behind the editor follows the pattern of:

  • The UI looks to the local DB for data
  • When an event happens it gets queued
  • When an event happens the UI tries to send it to the cloud
  • Events have status flags to let the system know what is happening

We interviewed Pamela Fox about the application, and she went through the architecture at a high level, and also did a screencast of the application itself.

Vortex: Simple new offline and sync abstraction on top of Google Gears

Brian Dunnington has taken some of the work done in the Dojo Offline Toolkit, and has created a new toolkit that has a lot of the same functionality, but it exists as one self-contained JavaScript file.

This new Vortex library allows you to initialize your application via a simple vortex.offline.init("My Application Name"); call. Behind the scenes this code will scan the page to find all of the resources required (including images, css, other .js file, etc) and cache them using the Gears LocalServer object. The library exposes several events that you can hook into, such as when the network status changes. there is also a syncing system that lets you record actions while offline and replay them back when the network is connected again.

Brian created a RSS reader demo that shows this all at work. Viewing the source of this application will give you a nice view of the architecture of a Vortex application and how it ties into Gears.

The reader demonstrates:

  • ability to automatically detect referenced resources such as images, scripts, and stylesheets (including nested @imported stylesheets)
  • automatic detection of network state with corresponding UI/feature changes (for example, when going offline, some features such as the 'add feed' link are removed since they dont apply offline)
  • auto syncing of events. this demo records the adding and removing of feeds and automatically plays them back when the network comes back online
  • use of the generic storage capabilities to store the feed data for offline viewing
  • graceful fallback if no offline support is available (google gears not installed or not allowed to run). try viewing the site in Safari to see the 'no offline support' version, or just deny Google Gears when prompted

Here you can see my simple walk-through of the application: