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.
So - you say the cached version isn't working when offline. I'll give that a test. If I forget to ping back, remind me. :)
Wouldn't that kill the possibility of using a cached version offline.
Is there any reason why we couldn't just download the source and include it in the app? TOS perhaps :p
I could have used cordova.js and check the connection, but instead, I simply wrap google.load in a try/catch. The nice thing about this is that it is actually 'broader' then just a network connection test.
If it fails, we try to load the cached version:
https://gist.github.com/3257160
Here is the xml http://www.morningstaradvisor.com/rssdata/xml/getr...
Thanks Raymond for updating it. :)
Any idea what would be doing that? Not sure if it's your code, Google, or what...
Thanks.
$("a[target]")
That would match anything with a target. This may be more precise:
$("a[target='_blank']")
Anyway - capture that, and you can handle the links as you want, like with the ChildBrowser plugin for example.