Apache Cordova InAppBrowser optimize (external / whatsapp / other protocols) link behaviour

Today I'd like to share my results on a good link behaviour in Apache Cordova's (5.x in my case) link behaviour using the InAppBrowser Plugin.

Context:

First of all the cordova plugins I'm using:

  1. <gap:plugin name="cordova-plugin-inappbrowser" version="1.3.0" source="npm" />
  2. <gap:plugin name="cordova-plugin-statusbar" source="npm" />
  3. <gap:plugin name="cordova-plugin-globalization" source="npm" />
  4. <gap:plugin name="cordova-plugin-network-information" source="npm" />
  5. <gap:plugin name="cordova-plugin-whitelist" source="npm" />

Problem:

I had to deal with several kinds of links in my InAppBrowser website. Some examples:
Google Adsense Advertisements (external links)
Social Media Links (external)
tel: links (tel: protocol)
whatsapp:// links (external application)
Internal links (Open inside the InAppBrowser)

Solution:

First I tried (not a good solution) ...

My first workaround was to react on the
"loadstop" event of the window object like this:

  1. if (url.lastIndexOf(this.config.webAppUrl, 0) !== 0 && url.substr(0, 1) !== '/') {
  2.       window.open(url, '_system', null);
  3.     }

But that was just an ugly workaround and lead to several problems. It didn't work well.

... than I found out something better (good solution!):

Simply do some cordova-plugin-whitelist magic using config.xml to define the correct behaviour and everything works very well finally:

  1.   <!-- Allow general communication -->
  2.   <access origin="*"/>
  3.   <!-- Allow navigation only for our domain (incl. subdomains) -->
  4.   <allow-navigation href="*://*.mydomain.com/*" />
  5.   <!-- Allow the system to handle the following links: -->
  6.   <allow-intent href="http://*/*"/>
  7.   <allow-intent href="https://*/*"/>
  8.   <allow-intent href="tel:*"/>
  9.   <allow-intent href="sms:*"/>
  10.   <allow-intent href="mailto:*"/>
  11.   <allow-intent href="geo:*"/>
  12.   <allow-intent href="whatsapp:*"/>

That's it!

Please leave a comment if this was helpful for you.

Comments

Jacky West's picture

Nice

Nice play mate. I've been stuck with this problem for a while and i was pretty sure that the solution would be on the config.xml. So good game and thank you

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

More information about formatting options

Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.