Author avatar


Using Cordova InAppBrowser Plugin with Ionic 2+ to Open URLs


  • Jan 10, 2019
  • 6 Min read
  • Jan 10, 2019
  • 6 Min read
Front-End JavaScript


In this tutorial we are going to see how to use the InAppBrowser Cordova plugin with Ionic Native 3.x+ to open external URLs in Ionic 2+ apps or use third party services which require opening a webview such as implementing social authentication and payment gateways.

Ionic Native is a set of wrappers around Cordova plugins which allow Ionic developers to use the native plugins in an Angular way i.e using observables instead of ugly callbacks.


Before you can build Ionic 2+ apps you need to have a few requirements:

  • Node.js and NPM.
  • Java and Android SDKs for Android apps.
  • Setup JAVA_HOME and ANDROID_HOME system variables for Android apps.
  • A MAC system and XCode for iOS apps.
  • Windows for UWP apps.
  • Ionic CLI and Cordova.

For installing Node.js and NPM you can head over to their official website and grab the installer for your operating system.

If you need to target Android platform first install Java by going to their official website and follow the instructions. Then install the Android SDK available from this link.

If you successfully installed Node.js and NPM the next step is to install Cordova and Ionic CLI.

Installing Cordova and Ionic CLI

If you don't have Ionic CLI and Cordova installed, then you need to start by installing them first:

Go ahead, open your terminal or command prompt and enter:

1npm install -g cordova
2npm install -g ionic

These commands should install cordova and ionic globally on your development machine.

Now you should be able to generate a new Ionic project.

Generating an Ionic 2+ Project

Lets start by creating a new Ionic 2+ application. Open your terminal or command prompt then run the following commands:

1ionic start InAppBrowserDemo blank

After generating a new Ionic project,navigate inside your project root folder then add your target Cordova platform. In my case i can only add Android since i'm working in Ubuntu but if you are working in a MAC system you can target iOS too. So go ahead and run:

1ionic cordova platform add android
2ionic cordova platform add ios

P.S if you are under Windows, you can also target the Universal Windows Platform (UWP):

1ionic cordova platform add windows

Now after adding your target platform, you can install the InAppBrowser plugin.

What is InAppBrowser?

InAppBrowser is a native Cordova plugin which can be used to add an in-app browser to your hybrid mobile application created with Cordova framework or any Cordova based framework such as Ionic.

You can find more information about InAppBrowser from this Github repository.

Installing InAppBrowser Cordova Plugin and The Corresponding Ionic Native Wrapper

InAppBrowser plugin is available from npm so to install it simply run this command inside your project root folder:

1ionic plugin add cordova-plugin-inappbrowser --save
3npm install --save @ionic-native/in-app-browser

Start by importing the InAppBrowser native plugin:

1import { InAppBrowser } from "@ionic-native/in-app-browser";

Then add it to the list of providers:

2  declarations: [MyApp, HomePage],
3  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
4  bootstrap: [IonicApp],
5  entryComponents: [MyApp, HomePage],
6  providers: [
7    StatusBar,
8    SplashScreen,
9    InAppBrowser,
10    { provide: ErrorHandler, useClass: IonicErrorHandler }
11  ]
13export class AppModule {}

You are now ready to use the InAppBrowser API via dependency injection which provides you with an instance of InAppBrowser that can be used to call diffrent methods to create and open in app browsers inside your Ionic 2+ app.

So open src/pages/home/home.ts and add:

1import { Component , OnInit } from '@angular/core';
2import { NavController  } from 'ionic-angular';
3import { InAppBrowser } from '@ionic-native/in-app-browser';
6selector: 'page-home',
7templateUrl: 'home.html'
9export class HomePage implements OnInit{
11    constructor(public navCtrl: NavController,private iab: InAppBrowser) {
13    }
15    ngOnInit(){
17        const browser = this.iab.create('','_self',{location:'no'});
19    }

So we first import InAppBrowser from @ionic-native/in-app-browser then inject it via component constructor.

Then we call the .create() method to create and open an in app browser which navigates to website when the component OnInit hook is called i.e when the component is completely initialized.

You can find the complete documentation for InAppBrowser in Ionic Native official website.

Running the App

Now that you have created your simple example that uses InAppBrowser to open an external URL inside your mobile application it's time to run the app in an actual device:

Since i'm targetting Android i will use an Android phone but feel free to use any supported platform and use the corresponding command to run your application.

1ionic run android

For iOS use:

1ionic run ios

For Windows use:

1ionic run windows

Please note that you can also test your application in the browser using the serve command:

1ionic serve

Then, using your browser, visit http:localhost:8200.


So we have seen how to use the InAppBrowser Cordova plugin with Ionic 2+ and Ionic Native to add an in app browser which can be used for different things such as opening external URLs, adding third party authentication to your app or implementing any services which need to connect to external gateways etc.