Some issues about links in PhoneGap applications

It is uncommon and not to often to place external links (leading to an external pages) inside application built with PhoneGap. However, if you decide to do so, read this article to get knowledge about issues you may run into. If you target Android 2.x as well, you’ll also find some interesting information here.

There are generally two things, you should consider about links in PhoneGap applications. One about external links and second about links under overlay.

External links

Links to external pages replaces (covers) entire are of your application and thus made it nearly completely unusable to the user.

If you use direct link (<a href="http://www.acrid.pl/">acrid.pl</a>) and user taps it, contents of destination page (or eventually an error message) will cover entire application area, completely replacing contents of your mobile application. What is more important, device’s back button won’t work in this case, meaning that your application is actually dead upon user taps such link.

There is no going back and leaving app, going to home screen to restart your application again, will restore it from memory in previous state — that is, with external webpage open, not with contents of your application. The only option user have to get back to your application is to force to close it from task manager and hard-restart it. This is not wanted behavior in most situations.

To avoid these problems, always open links to external webpages using specific Javascript code. For example:

window.open(url, '_system', 'location=yes');

Part location=yes is important. Leaving third parameter empty will result in above mentioned behavior.

This code is tested to work in Android. According to PhoneGap documentation and blog, it should work in other platforms as well.

For your own convinience and purity of your code, you should consider enclosing this in a handy function:

function openUrl(url)
{
    window.open(url, '_system', 'location=yes');
}

and call it using either jQuery binding:

$('#btnAcrid').click(function()
{
    openUrl('http://acrid.pl/');
});

or direct linking:

Visit <a href="#" onclick="openUrl('http://acrid.pl/');">this page</a> for more information.

Either way is good and prevents your application from falling into above mentioned problems.

Overlayed links

PhoneGap app under Android 2.x ignores full-page overlays and allows tapping links below it.

If you’re using any Javascript library to replace dully Javascript alert(), confirm() and prompt() functions with cool looking modal dialog boxes — like Twitter Bootstrap, Apprise and many more — keep your eye on some trobules you may run into under Android 2.x.

I tested this issue on two different versions of Android and on two separate mobile devices:

• GSmart Rola G1317D with Android 2.2.2,
• LG GT540 with Android 2.3.3 and CyanogenMod.

Under first one, user were able to tap links below full-page overlay, but nothing happened as a result of this.

Under LG GT540 with Android 2.3.3 and CyanogenMod, tapping links below overlay sometimes resulted in opening target link. If such link wasn’t “secured” using method described above, again entire content of mobile application was replaced by external webpage content, making application unusable.

Android 4.x is free of this problem (tested under Samsung Galaxy Nexus with Android 4.2.2). You can’t tap at all anything below full-page overlay.

I wasn’t able to further investigate, whether this problem is caused by PhoneGap, used Javascript library (Bootstrap, Apprise, etc.), Android system or CyanogenMod mode.