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: