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 .

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 …

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

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 .

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

And here is the full implementation

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

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

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 https://www.techiediaries.com/author/ahmed

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store