PhoneGap RSS Reader - Part 5

This post is more than 2 years old.

For a while now I've been talking about, and upgrading, a basic PhoneGap-based RSS reader application. (See the related entries at the bottom for the earlier iterations.) I was thinking about the application this morning. One of the things I noticed about the application is that when you clicked to read a full article, the application launched the native web browser. In IOS, there wasn't a nice way to get back to the application. On Android, you could use back, but overall, the transition was a bit jarring. I thought this would be a perfect opportunity to try the ChildBrowser plugin.

The ChildBrowser plugin creates a "pop up window" that acts like an embedded browser for your application. You can load it with a URL and add event handlers for things like location changing or the browser being closed. The end result is that the user isn't really "leaving" the application when they view a web page.

The ChildBrowser plugin is available for iOS and Android. (You can also use it with Blackberry and Windows Phone.)

The API is really simple to use. Since I'm not concerned with any of the events thrown by the ChildBrowser and just need it to go some place, I added a class to my "Read Entry on Site" link and then added this touch handler:

I've talked about PhoneGap plugins before so I won't repeat the story behind how you use them, but the basic idea is that you get the native code bits installed with your editor and then copy over one JavaScript file that provides the connection to the native code. For the most part, it's really pretty simple.

That being said - I was in luck. Turns out that PhoneGap Build supports a few plugins - and one of them is the ChildBrowser. I opened up my config.xml file and added one line:

The last thing I needed to do was add a call to the childbrowser.js file in my index.html. Do not forget that even though you include a script tag that points to the file, you don't actually include the file when creating your zip. Another thing to note. My application - previously - had not actually done anything device related. Yeah, that makes the application kind of dumb I guess, but because I wasn't accessing the camera or doing anything special, I never actually included cordova.js. PhoneGap Build will not include a plugin JavaScript file unless you also have a call to cordova.js. I'm assuming some basic regex is being done on that back end and the first script tag is required before any plugins are checked for. Here's what I added to the head block of my index.html file:

And that's it! I uploaded my code and within about two minutes I had my iOS and Android versions up and running. I've included a full zip of the code as an attachment to this blog. You can download individual binaries via the embed below. Note that the iOS version will not work for you - sorry - I'm not adding to this to the AppStore.

Edit on Jan 30, 2015 - I removed the PhoneGap Build iframe embed as it was dead.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

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

Archived Comments

Comment 1 by Sarbjit Singh posted on 8/29/2012 at 5:17 PM

Is there a way to store that "read" state for the feed items. I want to give feedback to the user about new items in the feed. It will be great if we could notify the user when there are new items in the feed.

Comment 2 by Raymond Camden posted on 8/29/2012 at 6:13 PM

Certainly. All RSS items have a GUID (unique id). You could store those in WebSQL or LocalStorage and then just check. My gut says WebSQL would be a bit better for this - but LocalStorage would be easier.

Comment 3 by sam posted on 10/9/2012 at 6:05 AM

I got issues with Child Browser at the moment with an rss app I'm working on. If the app is in a landscape orientation and upon closing the child browser the parent page (app), is set to portrait mode and loses some height, so can't navigate out.. I can hook into the close of event of the child browser and I am trying to programmatically set the viewpoint, but not finding any helpful code..

Comment 4 by Michael posted on 10/9/2012 at 9:16 PM

Would you be willing to share your Xcode project version of this?

Comment 5 by Raymond Camden posted on 10/9/2012 at 9:38 PM

I didn't use XCode - I used PG Build. You can take my code and add it to an XCode/PG project locally though.

Comment 6 by Michael posted on 10/9/2012 at 10:09 PM

I guess a follow up question would be have you used PhoneGap Build or otherwise to successfully deploy an app to iTunes? This RSS reader or even another one. I have had numerous 10.6 rejections and it is starting to seem like Apple is clamping down on HTML 5 non-native apps. Just curious about other developer experiences.

Comment 7 by Raymond Camden posted on 10/9/2012 at 10:10 PM

I've not yet pushed to the Apple store, but I'd strongly urge you to check out this article by my coworker Andy:

http://www.tricedesigns.com...

Comment 8 by Josher Slebodnik posted on 10/25/2012 at 8:14 PM

I got a question for you on the Childbrowser that maybe you will know. This doesn't have anything to do with the rss reader, but I am making two apps right now. The childbrowser in one app works fine. I just started another app using the same childbrowser code. In this app, for some reason the Toolbar showing the back, forward, and exit does not pop up. Any idea why this is? I used your code here $(window).on("touchstart", ".fullLink", function(e) {
e.preventDefault();
window.plugins.childBrowser.showWebPage($(this).attr("href"));
});
and assigned a class of fullLink to the link.

Comment 9 by Raymond Camden posted on 10/26/2012 at 4:54 PM

Sorry, I don't know. Maybe try the Google Group? (And ping back if you figure it out please.)

Comment 10 by Nitin Mahind posted on 12/24/2012 at 12:54 PM

How can i get contents of <description> tag.

actual I made some changes with javascript

I am able to get data from <title> <author> <link> tags and put it into SQLlite database.

but unable to get data from <description>. It gives me undefined.

thanks in advance.....

Comment 11 by Raymond Camden posted on 12/24/2012 at 9:23 PM

Please share the RSS URL you are using.

Comment 12 by Nitin Mahind posted on 12/27/2012 at 3:14 PM
Comment 13 by Raymond Camden posted on 12/27/2012 at 10:32 PM

From what I see in the Google Feed API, the description field is parsed into the content field in the entry object. Please see the Google Feed API docs for details.

Comment 14 by Nitin Mahind posted on 1/2/2013 at 6:15 PM

Should we use same script for my rss feed...?
can we avoid use of feed burner...?
because the data I have to parse is to confidential.

Comment 15 by Raymond Camden posted on 1/2/2013 at 7:55 PM

Please see my earlier posts where I parsed the feed manually.

Comment 16 by Pascal Kuilboer posted on 2/25/2013 at 3:04 PM

Switched to this version of your reader... but how about to get the enclosure tags for the images (url) and what to do if there isn't an image in every entry... Thanks

Comment 17 by Raymond Camden posted on 2/25/2013 at 6:12 PM

Two things:

1) Note that the latest version of PhoneGap supports ChildBrowser w/o using a plugin. Check the InAppBrowser spec.

2) Pascal, if Google's Feed parser doesn't return it, then you need to switch back to parsing the XML yourself, as I did in earlier entries. To see if Google returned it, simply use the console.dir() command on the results to look at it.

Comment 18 by Haris posted on 3/11/2013 at 8:51 AM

I change the rss link into :
//RSS url
var RSS = "http://serambi.blankonlinux...";

But It's doesnt work.

What I must to do?

Comment 19 by Raymond Camden posted on 3/11/2013 at 3:24 PM

You must tell me _how_ it isn't working. Use Chrome Dev Tools and spend some time diagnosing where it falls down.

Comment 20 by Haris posted on 3/12/2013 at 9:34 AM

Ah.. now it's working, I dunno why. :)
Anyway, can I modified this and put it on my github?

Comment 21 by Raymond Camden posted on 3/12/2013 at 3:09 PM

I posted the code to share, so yes, you can use. If it helps your business, consider visiting my wishlist. ;)

Comment 22 by Brian Mitchell posted on 3/23/2013 at 9:35 PM

I am thankful for these blog posts. I have a question. Would there be a way to enable childbrowser to open links within the rss post itself on the app?

Comment 23 by Raymond Camden posted on 3/23/2013 at 10:53 PM

Absolutely. jQuery lets you listen for events - so you could listen for all clicks within the 'post display' region. Then open them with InAppBrowser.

Oh btw - don't forget PhoneGap now supports ChildBrowser natively, w/o a plugin. It is called InAppBrowser.

Comment 24 by Brian Mitchell posted on 3/25/2013 at 7:04 PM

I still do not understand Inappbrowser am familiar with childbrowser and am not familiar of where the post display region is located and how to listen for events with jquery.

Comment 25 by Raymond Camden posted on 3/25/2013 at 7:11 PM

Well, you have a few things here you are asking about.

InAppBrowser: Not familiar with it? Check the docs. It should clear it up.

Post Display Region: Please read this tutorial closely, and the earlier parts, and you can see where an individual entry is displayed to the user.

jQuery Events: Then I'd recommend learning jQuery. :) Yes I can write this for you pretty quickly, but honestly, you should be able to get up to speed on jQuery in an hour or so, and it would be well worth your time to take a look at it.

Comment 26 by Brian Mitchell posted on 3/27/2013 at 5:11 PM

Thank you Raymond! I'm gonna look into it I'm self taught on everything but have to piece together codes to get them to work. I attempted to add the touch handler to the page display and could not get any results to work. I'm still learning in app browser and the api. I'll look into it further today. I'll post any codes if that helps, just need to attempt to get the browser to work with individual links in the rss feed posts.

Comment 27 by Raymond Camden posted on 3/28/2013 at 12:36 AM

I haven't tested this, but I believe this is what would work. So this code handles recognizing clicks on items that have the fullLink class.

$(window).on("touchstart", ".fullLink", function(e) {
e.preventDefault();
window.plugins.childBrowser.showWebPage($(this).attr("href"));
});

You want the exact same code, but links within where the entry text is text. Entry text is stored in a div with the ID entryText. I think, stress think, this will do:

$(window).on("touchstart", "div#contentPage a", function(e) {
// the rest is the same

Comment 28 by Brian Mitchell posted on 4/6/2013 at 12:24 PM

I looked at it and followed as stated above and was unable to get anything to work.

Comment 29 by Raymond Camden posted on 4/6/2013 at 3:12 PM

What exactly failed though? What do you see and in what environment?

Comment 30 by Brian Mitchell posted on 4/9/2013 at 10:29 PM

I have the feed working perfectly. I just am struggling with the individual feed links using the in app browser. I am very novice to everything I can provide an example via paste bin and show you what I am doing and where I am inserting everything if that works. I also read a few pages back about description and images but am still learning that as well. Thank you for the quick response.

Comment 31 by Brian Mitchell posted on 4/9/2013 at 10:40 PM

I'm using rsspect.com to host my feed content so I'm not sure if I need to go there and add a div class to each link on there its in html.

Comment 32 by Raymond Camden posted on 4/10/2013 at 4:35 PM

So when you say you are struggling, can you describe more what your issue is? I assume you get the list of entries. I assume you click to view. I assume when you click to view the full entry it is failing to use the child browser? If so, does it load in the app instead?

Comment 33 by Brian Mitchell posted on 4/11/2013 at 10:58 AM

I have everything working, just cannot get childbrowser to open up any links within the entries. Here is my code: http://pastebin.com/awjz5D7n

Comment 34 by Raymond Camden posted on 4/11/2013 at 5:01 PM

I don't see where you tried what I suggested:

$(window).on("touchstart", "div#contentPage a", function(e) {

Comment 35 by Brian Mitchell posted on 4/12/2013 at 9:37 AM

I am not sure where to insert that at, could use some help there, everything else is working great.

Comment 36 by Raymond Camden posted on 4/12/2013 at 3:26 PM

It is just more JavaScript code. You would put it with the rest.

Comment 37 by Panayiotis Georgiou posted on 4/26/2013 at 3:08 PM

Good tutorial Raymond but I have a problem.
I try to show the pubDate inside each post with
$('#postdate' + i).text(entry.pubDate);
but it doesn't pick the date from the feed

any ideas ?

Comment 38 by Raymond Camden posted on 4/26/2013 at 3:12 PM

If you console.dir(entry), do you see it?

Comment 39 by Ahmad Haris posted on 5/1/2013 at 12:08 PM

I figure out that your tutorial can build successfully on build.phonegap.com, but, I can't handle it when build on local. Any clue?

Comment 40 by Raymond Camden posted on 5/1/2013 at 3:12 PM

Nope. I'd need to know what goes wrong when you build locally.

Comment 41 by Ahmad Haris posted on 5/2/2013 at 7:52 AM

childbrowser not working, my be something wrong on my build.xml (on local). Can I use your config.xml as build.xml ?

Comment 42 by Raymond Camden posted on 5/2/2013 at 3:29 PM

You should use InAppBrowser instead. It is the same thing (pretty much) but built *into* PhoneGap now.

Comment 43 by Ahmad Haris posted on 5/6/2013 at 7:50 AM

Finnaly, I'm using InAppBrowser and succesed. Thanks.

:)

Comment 44 by Mars posted on 6/25/2013 at 9:43 AM

Hi, great tutorials and source file, please help me on how to add date to each entry

Comment 45 by Mars posted on 6/25/2013 at 10:48 AM

and why it is not loading when the rss reader is opened through a main menu button. it only loads when i am refreshing the page.

Comment 46 by Raymond Camden posted on 6/25/2013 at 5:18 PM

In part 3 (http://www.raymondcamden.co..., look at the code that creates the "entry" data block and simply add the published date to it. I do not remember the exact property name, but if you console.dir the v object you should see it.

As to your second question, I am not sure. Can you create an APK via PhoneGap Build and share it with me?

Comment 47 by Mars posted on 6/25/2013 at 8:41 PM

Hi Raymond, I send you an email

Comment 48 by bill posted on 7/8/2013 at 7:20 PM

I am really new to jquery and phonegap. I am trying to show several listviews in a single page app. If you could share how I might be able to display different rss feeds for the different items in a list I would appreciate your help.

I have a page that has buttons that would call different rss feeds that would return a list on a different page. Just what its doing now but allowing for for several feeds to be used by different buttons. Thanks again..

Comment 49 by Raymond Camden posted on 7/9/2013 at 3:58 PM

Bill, I hate to sound like a commercial, but if you buy my jQuery Mobile book, I've got an example of a RSS Reader app that lets you input RSS URLs and view them one by one.

Comment 50 by Alex posted on 7/17/2013 at 7:59 PM

Hi Raymond,

Thanks for the great tutorial. I just upgraded to JQuery 2.0.3 and to Phonegap 2.9.0. I then change all .live to .on in the RSS script but not I am getting the following errors:
Firefox - TypeError: entries[selectedEntry] is undefined
Chrome - Uncaught TypeError: Cannot read property 'title' of undefined

on line 68 - $("h1", this).text(entries[selectedEntry].title);

Do you have an idea how to resolve this issue or point me in the right direction? Any help is greatly appreciated.

Comment 51 by Raymond Camden posted on 7/17/2013 at 8:02 PM

Can you console.log selectedEntry to ensure it was set to a value?

Comment 52 by Spencer posted on 7/19/2013 at 9:04 PM

Hi Raymond,
I am trying to load your code as a separate page but I can't get it to refresh. Not sure where or how to make the call to force the page to load. I changed pageinit to showpage but no joy, any ideas? Thanks.

Comment 53 by Raymond Camden posted on 7/20/2013 at 6:34 PM

Well it should be pageshow, not showpage. Did you use that?

Comment 54 by Bill posted on 8/3/2013 at 6:49 AM

I am using your base code for a gallery works awesome. I have a problem that I am trying to solve. I am trying to add the ability to swipe left or swipe right to the next image once I am in the content page. I just don't get how to call back to the listview and track where I am. I have had limited success and was hoping you might point out how to do it. I know it has to center around the entryid and the selectedEntry var. Thanks for any pointers you might be able to share.

Comment 55 by Raymond Camden posted on 8/4/2013 at 6:37 AM

The selectedEntry variable (if I remember right, this post is almost a year old now ;) is just the index in the list. If you listen for swipe events, you should be able to say:

on swipe left:
selectedIndex = selectedIndex -1

Then update the data for the page.

Comment 56 by Roel posted on 8/5/2013 at 8:47 AM

Hi Raymond, I tried to compile this code yours and I got error:

plugin unsupported: childbrowser

You need update your code with the new Phonegap plugin, InAppBrowser. Thanks for everything, your posts save me always.

Comment 57 by Raymond Camden posted on 8/5/2013 at 2:54 PM

Roel, I've got a huge amount of posts here - it would be a full time job if I had to come back and update everyone that didn't work because of updates. ;) I actually do mention it up in the comments above.

Comment 58 by Radu posted on 10/1/2013 at 6:07 PM

Hi, great work on the app, but there is one problem. If i open the index.html in my computer browser it works like a charm, but built as a PhoneGap app, it fails to work. After some debugging i realized that it doesn't enter the "initialize" function at google.load . Have you encountered this problem? I also mention that it was tested only in Android, and the apk you provided worked.

Comment 59 by Raymond Camden posted on 10/1/2013 at 6:14 PM

It could be a whitelist issue. You can either add *, or the google.com.

Comment 60 by Sotiris posted on 11/16/2013 at 7:56 PM

Hello!

Great Work! I tried to make a rss reader just like that but for multiple feeds. My idea was to create a simple first page with a list of the categories. When you click on each one of them it directs you to an external page (e.g music.html) where you could see each feed. The problem is that even if had create a js file for each category it displays only the feed from the first page's js and if I remove it it doesn't show a thing. Do you have any idea how to make my app with multiple feeds?

Comment 61 by Raymond Camden posted on 11/17/2013 at 10:31 AM

Well, I'd not create a JS file for each category. Rather, my JS file would associate an rss feed with each category.

Comment 62 by Mars Cureg posted on 1/20/2014 at 12:20 PM

Could someone tell me on how to get the rss reader to update automatically, let us say, when I publish new post to the website where the rss it should automatically update also on the app.

What i have right is that, when I open the rss page the content doesn't update immediately, I have to leave that page open and refresh to get the new content

Comment 63 by Raymond Camden posted on 1/20/2014 at 8:18 PM

You could use Push, but to be honest, that seems like overkill. I blog a lot, and I average about 1 post per day. I can't see setting up Push just for that. But if you really want it - that's what you could use. I'd probably do something simpler - in the app, use a setTImeout with a long interval, like an hour, and check then.

Comment 64 by Hindujhan posted on 2/10/2014 at 1:12 PM

Hi used your system,

I have install JSON API into my wordpress site to pull rss data can i call json url to your Javascript code?

like this
//RSS url
var RSS = "http://platform.lk/blog/?js...";

Comment 65 by Raymond Camden posted on 2/10/2014 at 6:45 PM

I'm not sure I understand your question. My code uses a Google library to translate RSS into simple JS objects. Could you use your JSON instead? Yes - but you would need to modify my code.

Comment 66 by Ali posted on 2/21/2014 at 4:55 PM

Hello, thanks for this amazing tutorial, but I have a problem, it all worked fine in Part 2, but I'm interested with having an offline view of my feeds, so I tried the sample 4, it didn't work, I read the comments and updated the main.js, it worked well, but when I put my rss link instead of yours, it doesn't work! The app says "Sorry, we are unable to get the RSS and there is no cache. P.S: My rss feeds link is working and I have a sample with the app version "Part 2" using my link and it's working, and I'm testing the app on my android device, Thanks in advance man you're Great!

Comment 67 by Raymond Camden posted on 2/21/2014 at 5:23 PM

Have you tried debugging? Please connect Safari or Chrome (depending on your platform) and debug the network call to see what is happening behind the scenes.

Comment 68 by Michael posted on 5/2/2014 at 1:20 AM

Ray do you know if this still works in a Cordova app? It seems pretty old and referencing CB. I have a simple RSS feed display in my app currently. The problem is I need certain RSS items to open in Safari and some to open in InApp Browser. I don't really have control of the different links to add like window.open and _system. Would I be able to use your plugin and have some control of the links?

Thanks

Comment 69 by Raymond Camden posted on 5/2/2014 at 1:59 AM

Not quite sure what you are asking specifically as you kinda jump around a bit. Honestly it sounds like if you are asking if the InAppBrowser will work now as opposed to the old ChildBrowser, if so, yeah, it works. You would change my code that uses the old plugin to just use the new way of doing the IAB.

Comment 70 by Hindujhan posted on 5/2/2014 at 10:06 AM

Any Ideas about Phone Gap RSS Caching. and reading app on offline mode

Comment 71 by Raymond Camden posted on 5/2/2014 at 4:22 PM

Yes. You have multiple options to store data (file system, localstorage, websql).

Comment 72 by Patrick Schultz posted on 1/30/2015 at 2:30 PM

The source code link is broken. Will you repost it?

Comment 73 (In reply to #72) by Raymond Camden posted on 1/30/2015 at 2:36 PM

Fixed.

Comment 74 by Patrick Schultz posted on 1/30/2015 at 3:01 PM

Thank you sir! It looks like the other parts are also broken. Do you have a Github for this whole project? I just followed your page and am impressed by your projects, but I didn't see the rss on Git?

Comment 75 (In reply to #74) by Raymond Camden posted on 1/30/2015 at 3:18 PM

I started using one GitHub repo for my Cordova demos about half a year ago, but it was after this post was made. You can see it here: https://github.com/cfjedima.... There is a RSS demo, but it uses Ionic, so it is pretty different. You said, "the other parts are broken" - what do you mean?

Comment 76 (In reply to #75) by Patrick Schultz posted on 1/30/2015 at 3:21 PM

Sorry for the confusion. The other source code chunks on the other parts of the RSS Feeder Tutorial are also dead links.

Comment 77 (In reply to #76) by Raymond Camden posted on 1/30/2015 at 3:32 PM

Oops. So - when I migrated my blog, I messed up the part that handles attachments. I'll fix these though.

Comment 78 (In reply to #77) by Patrick Schultz posted on 1/30/2015 at 3:38 PM

Thanks! I teach at Vocational Center, and I going to use this tutorial as a base to introduce the capabilities of PhoneGap.

Comment 79 (In reply to #78) by Raymond Camden posted on 1/30/2015 at 3:45 PM

Ok, all updated. Keep in mind this "series" is almost 3 years old so.... just remember it. :)