How to use Cordova InAppBrowser Plugin with Ionic 2 (Or 3 ) and Ionic Native 3.x+ to Open External URLs 

In this tutorial ,we’ll be learning how you can use the Cordova InAppBrowser plugin to open external URLs or implement services which require webviews inside an Ionic 2 (or Ionic 3) application built for Android, iOS or Universal Windows Platform (UWP) .

See a more detailed tutorial here :

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

So lets get started .

First head over to your terminal or command prompt ,depending on which system you are using (Unix Like or Windows )  then create a new Ionic 2 project using the Ionic CLI (v3+)   $ ionic start InAppBrowserExampleDemo blank 

I’m creating a project based on the blank template which will gives us a starter app with one home page .

Next install the Cordova InAppBrowser and Ionic Native 3 wrapper for InAppBrowser 

The Ionic Native plugin or wrapper is the recommended way of using Cordova plugins since they provide us with a Promise based API ,around the original Cordova plugins that make use of Callback function ,which works seamlessly with Angular 2 / Ionic 2 .

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

After installing both the Cordova plugin and its wrapper ,lets register the InAppBrowser provider with the main app module .

For more advanced ,controllable and customizable in app browser you can use the Themable Brower which is a fork of InAppBrowser with advanced features . You can find a tutorial explaining how to use Themeablebrowser via this link .

Use your favorite code editor/IDE to open the generated project .

I’m using Visual Studio Code so …

$ cd InAppBrowserExampleDemo
$ code .

Open src/app/app.module.ts then import and add InAppBrowser to providers list

/* ... */
import { InAppBrowser } from '@ionic-native/in-app-browser';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

declarations: [
imports: [
bootstrap: [IonicApp],
entryComponents: [
providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}

  That’s it you are now ready to use the InAppBrowser ,you just need to inject it in your component .

Open src/pages/home/home.ts then import InAppBrowser and inject it in the component constructor .

import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser';

selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {

    constructor(private theInAppBrowser: InAppBrowser) {

Now lets open an external URL ,say for example 

InAppBrowser provides us with three options ,either use the system default browser to open the target URL

Or use the same webview used by Cordova to display/render our app

Or use a simple in app browser .

Lets see how to implement the three options in our demo app .

Add three methods to our component

openWithSystemBrowser(url : string);
openWithInAppBrowser(url : string);
openWithCordovaBrowser(url : string);

And here is the full implementation

import { Component } from '@angular/core';
import { InAppBrowser , InAppBrowserOptions } from '@ionic-native/in-app-browser';

selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
options : InAppBrowserOptions = {
    location : 'yes',//Or 'no' 
    hidden : 'no', //Or  'yes'
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'yes',//Android only ,shows browser zoom controls 
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', //Android only 
    closebuttoncaption : 'Close', //iOS only
    disallowoverscroll : 'no', //iOS only 
    toolbar : 'yes', //iOS only 
    enableViewportScale : 'no', //iOS only 
    allowInlineMediaPlayback : 'no',//iOS only 
    presentationstyle : 'pagesheet',//iOS only 
    fullscreen : 'yes',//Windows only    
constructor(private theInAppBrowser: InAppBrowser) {

public openWithSystemBrowser(url : string){
    let target = "_system";
public openWithInAppBrowser(url : string){
    let target = "_blank";
public openWithCordovaBrowser(url : string){
    let target = "_self";


The next thing is to add some buttons to invoke these three methods .

Open src/pages/home/home.html then add

    InAppBrowser Example DEMO Ionic v3 anc Ionic CLI v3

<ion-content padding>

    <button ion-button (click)="openWithSystemBrowser('')">Open with System browser</button>
    <button ion-button (click)="openWithInAppBrowser('')">Open with In App browser</button>
    <button ion-button (click)="openWithCordovaBrowser('')">Open with Cordova browser</button>


For more information ,you can visit these websites

Ionic Native docs for InAppBrowser

The Cordova InAppBrowser GitHub repository


This is an updated tutorial for a previous tutorial I wrote on the same subject which makes use of the latest Ionic CLI v3 .

comments powered by Disqus