Critical Android/PhoneGap issue

This post is more than 2 years old.

Ugh. I spent a few hours this week trying to figure out why a previously-working PhoneGap app was having an odd issue in one small part of the application. The issue involved a set of buttons that linked to a detail page. Each link pointed to the same HTML file and used a URL parameter to pass along information. In other words, something like detail.html?id=1 or detail.html?id=2. I've blogged about this before.

As I said - this worked fine until this week. Admittedly this part of the application wasn't something I had used in a long while but the other users of the application weren't seeing any issue at all.

Turns out - Honeycomb and higher Android versions do not support this type of URL anymore. You can read more about the bug here: http://code.google.com/p/android/issues/detail?id=17535.

Frankly I'm in awe that something so simple is still broken over a year later. Why didn't I see the issue before? Simple - my last phone wasn't ICS. Ditto for the other folks testing the application. As it stands, Kyle Dodge warned me about this in a comment on my blog post, but it didn't really sink in. (Sorry Kyle!)

There is a pull request with Cordova to fix this issue, but from my reading it appears to "fix" it by removing the parameters. (I could be wrong on that!) That isn't a fix to me.

For now - I'm going to:

  1. Use data-foo to store the value.
  2. Use a click handler to notice the click and store the value in LocalStorage
  3. Update the code to get the value from LocalStorage
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 Dylan posted on 8/9/2012 at 8:16 PM

Ray,

I'm sure you already know it, but the big "a-ha" for me going from ColdFusion to JQM (in addition to your book, of course), was this page:

http://jquerymobile.com/dem...

Basically, trapping the "before page change", parsing the URL, building the page, then injecting it. Working great on ICS (GNex) and JB (Nexus7).

Comment 2 by Raymond Camden posted on 8/9/2012 at 9:49 PM

I'm aware of that way of solving it - but it just bugs me. ;) I don't know - it doesn't "feel" right to me.

Comment 3 by Simon MacDonald posted on 8/9/2012 at 10:29 PM

I'm surprised you did not know about this bug. I've been stomping around the mailing list warning people of the issue for over a year. The workaround is to use localStorage as you discovered but there is a fix checked into 2.0.0. Joe did the work to make sure that query parameters will work in Honeycomb or ICS. If you are using 2.0.0 and it doesn't work right let us know the reproduction scenario.

Comment 4 by Raymond Camden posted on 8/9/2012 at 10:32 PM

Unfortunately, I tend to only hit the Google group when I have an issue, which is a mistake. Going to start keeping up with it from now on.

I'm using Build though so 2.0.0 is not an option yet.

Comment 5 by Harshal posted on 8/15/2012 at 1:39 AM

I am newbee and I am trying to run your example about SpeechRecognizer Plugin into ICS and it does not seem to be working.

Any plans to revise that article for ICS?

Also Jelly Bean involves native speech dictation and I would like to see if PhoneGap app can expolit the same?

Comment 6 by Raymond Camden posted on 8/15/2012 at 1:41 AM

I checked Github, and the SpeechRecognizer plugin was last updated 5 months ago. Whether or not it will work well in 2.0 is down to whether or not it needs updating. You may want to reach out to the plugin author. Sorry to punt on this, but that's your best option.

Comment 7 by Simon MacDonald posted on 8/15/2012 at 5:13 AM

Actually you can get the updated speech recognizer plugin from:

https://github.com/macdonst...

That is my demo app that uses speech/tts.

Comment 8 by Raymond Camden posted on 8/15/2012 at 5:17 AM

Ah nice. We *really* need an updated list of plugins on the site. (We as in Adobe, not trying to give you more work, Simon. ;)

Comment 9 by Raymond Camden posted on 8/15/2012 at 5:19 AM

So Harshal - the point of my original blog post was to demonstrate the basic way of using a plugin in PG. That has not changed. Therefore I probably will not update the blog post. Does that make sense?

Comment 10 by Rachel posted on 10/24/2012 at 4:45 PM

Hey Ray, mind showing an example of your OnClick call and the method? I am using the below and can't seem to find why it works on one page and not on another:

<a href="projectDetails.html" onClick="return storePage(' + project.id + ');">

function storePage(pageID){
localStorage.setItem('projectID',pageID);
return true;
}

Comment 11 by Raymond Camden posted on 10/24/2012 at 4:49 PM

Can you describe how it isn't working?

Comment 12 by Rachel posted on 10/24/2012 at 5:11 PM

The same JS OnClick method on a following page is on the link but it never "jumps" into the function and therefore when I do a getItem on the following page, it is null. It does however change to the correct page.

<a href="projectTaskDetails.html" onClick="return storePage(' + taskLists.id + ');">

function storePage(pageID){
console.info('inside onClick taskLists function'); //this does not fire
localStorage.setItem('tlID',pageID);
return true;
}

Just wondering if you had set your OnClick method to do the 'return function(arg);' Maybe I just have a syntax error :|

Comment 13 by Raymond Camden posted on 10/24/2012 at 5:13 PM

I don't use onClick like that. I use jQuery to bind an event listener for the touch event on the link.

Comment 14 by Rachel posted on 10/25/2012 at 7:22 PM

Do you know if it been confirmed that PhoenGap 2.0 fixes this issue? We tried 2.0 and had no luck...

I talked to someone in the JQM forums and changed it to use a click event. For some reason, I don't think any click events are firing in ICS. I've tried changing from .on to .live because pageshow only works when it is called with .live. But neither .on or .live work on the click event. Is this a similar to format to how you are handling it?

$.each(results, function(i,project){
$projectList.append('<li><a href="projectDetails.html" data-id="' + project.id + '">
});
$projectList.live('click', 'a', storePage);
$projectList.listview('refresh');
});

function storePage(){
var pageID = $(this).data('id');
console.info('inside storePage on project list');
localStorage.setItem('projectID',pageID);
return true;
}

Comment 15 by Raymond Camden posted on 10/25/2012 at 8:03 PM

I haven't personally tried this myself, but if it isn't working, you want to file a bug report with the PG folks so they know.

As for on/live, I prefer on normally. I don't use click, and you shouldn't either, since it is slower on mobile. touchstart is normally preferred (or touchend).

Comment 16 by That guy posted on 3/21/2013 at 5:38 AM

Is this still a problem with phonegap 2.5?

I'm considering using Phone Gap for cross platform development apps. Please tell me a.s.a.p. as I have a job that depends on it.

Comment 17 by Raymond Camden posted on 3/21/2013 at 5:53 PM

Above, Simon said it was fixed in 2.0.