Wednesday, May 30th, 2007

RSS Bling goes Offline with Google Gears

Category: Gears, Google

<p>I couldn’t resist taking RSS Bling, and adding modern offline support to it (instead of HTA/Mozilla specific support from 2+ years ago).

I tackled a very narrow problem. Instead of grabbing feed and post data directly from an online store, I changed the code to:

  • Display the feeds and posts, pulling them from the local database (Using the embedded SQLLite DB)
  • Try to get updated feeds and posts, and if they are available (e.g. you are online), place them right into the offline store
  • Repaint.

This simplified model takes out the complicated syncing piece (and since this is a simple read-only reader, that is quite OK!). There is no checking to see if you are online or offline. There is no visual queue for telling you that (which is a good thing IMO). It should just work.

There are times where you do need to change the UI though of course. It would be nice to say “hey, don’t close the laptop quite yet, I am still downloading all of these feeds so you can read them on the plane”.

For a real offline feed reader, you can use the new Google Reader that runs on Google Gears.

The work is all done in offline.js, and it has a couple of different sections.

The fun piece is the Google Gears work to setup and play with the database.

E.g.

javascript
< view plain text >
  1. function initDb() {
  2.   if (!window.google || !google.gears) {
  3.     return;
  4.   }
  5.  
  6.   db = getDb();
  7.   run('create table if not exists feeds (' +
  8.              'id integer not null primary key autoincrement,' +
  9.              'title varchar(255),' +
  10.              'url varchar(255),' +
  11.              'description text)');
  12.  
  13.   run('create table if not exists posts (' +          
  14.              'id integer not null primary key autoincrement,' +
  15.              'feed_id integer,' +
  16.              'title varchar(255),' +
  17.              'url varchar(255),' +
  18.              'content text)');
  19. }
  20.  
  21. function getDb() {
  22.   try {
  23.     var theDb = google.gears.factory.create('beta.database', '1.0');
  24.     theDb.open('rssbling');
  25.     return theDb;
  26.   } catch (e) {
  27.     alert('Could not create the rssbling database: ' + e.message);
  28.   }
  29. }
  30.  
  31. /*
  32.  * Check to see if the feed is already there before adding it
  33.  */
  34. function addFeed(title, url, description) {
  35.   var rslt = executeToObjects('select id from feeds where title = ? and url = ?', [title, url])[0];
  36.   if (rslt) { return; }
  37.   run('insert into feeds (title, url, description) values (?, ?, ?)', [title, url, description]);
  38. }
  39.  
  40. function selectPosts(feed_id) {
  41.   return executeToObjects("select * from posts where feed_id = ?", [feed_id]);
  42. }

This has only scratched the surface. I need to integrate the Resource pieces, come up with a problem that would benefit from the WorkerPool, and play.

I can’t wait to see what you all come up with. There is a lot of room to do interesting offline apps, and build libraries on top of Google Gears.

Their approach hasn’t been to boil the ocean of offline, but rather to give us developers a little bit to work with and then we can go to town. The recent model for this is XHR itself. It isn’t the best interface, but it is a nice low-level piece of functionality that we can then riff on top of.

RSS Bling on Google Gears

Related Content:

Posted by Dion Almaer at 6:03 pm
12 Comments

+++--
3.9 rating from 24 votes

12 Comments »

Comments feed TrackBack URI

That was fast!

Comment by Erik Arvidsson — May 30, 2007

.. too fast..

Comment by ix — May 30, 2007

Nice work Erik!

Comment by Yoram Meriaz — May 30, 2007

Erik’s a beast, and this sounds really cool, but I feel like I’m missing something about the whole offline browsing thing. The world’s obviously moving toward everyone being online all the time, so why are we trying to solve a problem that’ll clearly be less relevant as a little time goes by?

There’s just been so much offline browsing buzz lately (OBB, if you will), if someone could explain what I’m missing about this whole concept, I’d appreciate it.

Comment by Jay — May 31, 2007

Jay – the world is moving toward everything online, which leads to somewhat of a problem (or catastrophe depending on your job) when you lose online connectivity due to hardware issue, network attacks, backhoes taking out lines, or natural disasters. Wi-fi hot spots aren’t that wide spread in many areas so a user is very likely to have intermittant Internet access. Offline web apps allow for stonger adoption of “everything online” by providing an alternative for when you’re not (by choice or by necessity).

Comment by Dave MacLuskie — May 31, 2007

Dion, this is awesome, very cool representative app. I’m curious, how long did that take you to add that offline functionality to your RSS bling app using the Gears api??

Comment by Mark Holton — May 31, 2007

Nice work! Am glad someone else dropped everything to have a play with Google Gears. I decided to experiment by creating a single click method to auto-cache my whole blog so it can be read offline.

I also wrote up what I did here – http://tinyurl.com/yue64b

Comment by Nick Halstead — May 31, 2007

google gears is cool, but what about security ?

Comment by Alex — June 1, 2007

Offline? We’re not all on F****** planes are we?

disclaimer:- this comment is a humorous reference to a certain DHH’s utterances regarding offline web apps. This comment does not reflect the author’s own feelings about offline web apps :)

Good work guys.

Comment by stu — June 1, 2007

Thanks guys!

Awesome, I love it. Thank you for taking the time to do this AND write about it. When i first saw Google Gears, I just barely had time to read through everything and write a BLOG post on it.

And I’m glad to see that Nick came by and looked at your stuff, too. Nick is a really cool dude who actually developed a working Google Gears solution to cache WordPress in PHP. You can read about his endeavors at: blog.assembleron.com/2007/05/31/google-gears-caching-of-wordpress-in-php/#comment-2943

And just in case you or anyone else is interested, there’s a guy called Rusty who also did a very nice job taking Google Gears out for a test spin. You can read his tutorial with step-by-step instructions at: http://www.seroundtable.com/archives/013657.html

Again, thanks for helping the rest of us get started,

WebGyver
————————————————————
Making web stuff out of bubble gum and kitchen chemicals.
http://www.webgyver.info

Comment by WebGyver — June 1, 2007

Some nice and very quick work! I wonder if Google Gears will still be used when Firefox 3 supporting offline apps is released?

Comment by Adam Dempsey — June 5, 2007

I’ve had some good experience with Google Gears. Thanks for this info.

Comment by Baby bling — August 2, 2007

Leave a comment

You must be logged in to post a comment.