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 .

Share on Twitter Share on Facebook Share on Google+

Originally published at