PhoneGap RSS Reader - Part 4

Edited on August 4, 2012: Readers noted that this version didn’t correctly handle trying to load the cache when offline. I confirmed that and posted a fix in the comments.

For whatever reason, my articles on PhoneGap and RSS (see related entries below) have been incredibly popular. The last entry currently has 163 comments. Some of the comments deal with the fact that RSS, while a standard, does have a bit of variation to it. My code made some assumptions that didn’t always work for other feeds. I thought this was a great opportunity to look at ways I could make the code more applicable to other types of feeds, especially Atom. Luckily, there is an awesome service for this - the Google Feed API. As you can probably guess, the Google Feed API allows you to parse RSS feeds into simple to use data. It takes any valid RSS or Atom feed and parses it into a simple, standard data model. While the previous code I used wasn’t too difficult, it was also very tied to one particular flavor of RSS. I could have continued to add in support for multiple styles of RSS feeds but this seemed far easier to me.

To begin, I added a script tag to load in the Google Loader. This is service Google provides that allows you to dynamically include in JavaScript support for various Google APIs.

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>

To load in support for the Feed API, I modified my mainPage pageinit event handler to ask Google Load to go grab the bits. It is very important that you provide the callback option to this API. If you do not, Google Load will blow away the jQuery Mobile DOM completely.

Now let’s look at initialize. Previously, this is the portion that would have done the Ajax call, used XML parsing on the results, and stored the entries. Because Google’s Feed API is doing this for me the code is now somewhat simpler. (I also added support for jQuery Mobile’s “showPageLoadingMsg” API to make it obvious to the user that something is happening.)

And that’s pretty much it. My previous code stored the content of the RSS item in a key named content. Google uses a key named description so I modified my display code.

As a final enhancement, I decided to make use of PhoneGap Build to create my mobile application. This allowed me to define a simple config.xml file to help define how the executables are generated. For example, I was able to provide simple icon support. (The icons I used were provided by Fast Icon.)

You can see my application at the bottom here in the screen shot. And yes - I have a Selena Gomez app. Don’t hate me for downloading apps my daughter loves.

Want to download the app yourself? Try the public Build page for every platform but iOS. You can also download all of the bits below.<p>Download attached file.</p>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments