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 

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';

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';

Now lets open an external URL ,say for example https://www.techiediaries.com

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';

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

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

<ion-header>
<ion-navbar>
<ion-title>
InAppBrowser Example DEMO Ionic v3 anc Ionic CLI v3
</ion-title>
</ion-navbar>
</ion-header>

For more information ,you can visit these websites

Ionic Native docs for InAppBrowser

The Cordova InAppBrowser GitHub repository

Conclusion

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 www.techiediaries.com.

Developer and technical author. Read more articles at Techiediaries