A simple example for how to open urls in browser with Ionic 2 final ,Cordova InAppBrowser plugin and Ionic Native -- Words (518)

Cordova InAppBrowser example with Ionic 2 final and Ionic Native

Throughout this tutorial ,we are going to see a detailed example showing how to open URLs in Ionic 2 mobile apps using the Cordova plugin InAppBrowser and Ionic Native .

SEE ALSO :

Full Ionic 2/Ionic 3 mobile app with Ionic Native 3.x and InAppBrowser

AND

Ionic 2/3 : Using Cordova SQLite and Barcode Scanner plugins to build a product inventory manager

Now lets get started

We will start by generating a new Ionic 2 project with Ionic CLI so open up your terminal if your are developing under a Linux/MAC system or your command prompt under Windows and type .

ionic start ionic2-inappbrowser-example blank --v2 

N.B : Under Windows the recommended way to work with Ionic 2 is through visual studio.

Next navigate inside your project folder

cd ionic2-inappbrowser-example

Add your target platform with

cordova platform add android 

I'm developing with Ubuntu so I can only target Android devices .If you are under a MAC you target iOS too with

cordova platform add iOS

N.B : If you don't have cordova already installed you can easilly install it via npm with

npm install -g cordova 

Next ,you just need to add the InAppBrowser with

cordova plugin add cordova-plugin-inappbrowser

Now we are ready to add some code to our project to open external urls ,so go ahead and open home.ts and modify it to look like :

import { Component } from '@angular/core';

import { NavController , Platform} from 'ionic-angular';

import { InAppBrowser } from 'ionic-native';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor( public platform: Platform,public navCtrl: NavController) {

}
openUrl() {

        this.platform.ready().then(() => {
            let browser = new InAppBrowser("https://www.techiediaries.com",'_blank');

        });
}    
}

So as you can see ,we have started by importing the InAppBrowser plugin from ionic-native module then we have added the openUrl() method that will handle opening the specified url .

Next open your your template and add the button to test the method

N.B Don't use the old .open() method

 InAppBrowser.open(url, "_system");

Many developers are getting this error

Uncaught Error: Can't resolve all parameters for InAppBrowser: (?, ?, ?).

Because it is deprecated with Ionic Native .Instead you should use

let browser = new InAppBrowser('YOUR_URL', "_system");

Next juste execute

ionic serve 

To play with your demo on the browser at http://localhost:8100/

Cordova InAppBrowser example with Ionic 2 final and Ionic Native

When you are finished testing build your app for you target platform with

ionic build android | iOS

You can also find the example app in GitHub{target:_blank}


I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.