Opening an external url form an android/ionic app

In order to open an external url from inside your android app (build on AngularJS/ionic) you need to follow these steps:

1) Install the cordova inappbrowser plugin

It is recommended to load thrid-party content in the inappbrowser and not in the webview. The inappbrowser do not have access to Cordova api’s.

The plugin can be installed from the command line by running:

cordova plugin add cordova-plugin-inappbrowser

This will update your package.json file.

To open a url in the cordova inappbrowser you need to call the following from your code:

var ref = cordova.InAppBrowser.open('http://permikkelsen.dk', '_blank');

The inappbrowser is not subject to the whitelist as long as you do not load the url into the system browser (_system). But if you are using the system browser then you will need to use the whitelist.

For more information about the inappbrowser look here.

2) Install the cordova whitelist plugin.

As mentioned the whitelist is only necessary if you are loading the content into the system browser (that is if you are using the _system and not the _blank).

This is simply done by running the npm command from the directory where your package.json fil is located.

$ cordova plugin add cordova-plugin-whitelist
$ cordova prepare

3) Configure the whitelist

The whitelist is used as a security model to tell cordova which url’s are allowed. This means that if your app needs to call an external url you need to whitelist it. Whitelisting is done by adding <allow-navigation> tags to your config.xml file:

<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />

<allow-navigation href="https://*/*" />

For more information on whitelisting look here.