Full Ionic 2/Ionic 3 mobile app with Ionic Native 3.x and InAppBrowser -- Words (1469)

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

In previous post(s) ,I've wrote about the Cordova InAppBrowser plugin and how to use it with Ionic 1 and 2 framework(s) . Since this is one of the most researched post in my website on Google ,I've decided to write an updated tutorial showing you an example demo for how to use InAppBrowser with the latest Ionic 2/Ionic 3 (released on March 2017 ) and Ionic Native 3.x ,which has introduced some changes on how to use native plug-ins in order to increase performance and reduce the final app size .

You can use either Ionic 2 or 3 with this tutorial

As always I have to say that you need to have all development requirements installed and configured on your machine

  • Java and Android SDK installed .
  • JAVA_HOME and ANDROID_HOME environment variables configured .
  • A MAC OS system for targeting iOS .
  • A Windows system for targeting Windows Univesral Platform (UWP) .
  • The Node.js platform and NPM installed .
  • The Cordova CLI installed .
  • The Ionic CLI installed .

Anyway ,I'm going to cover how to install the Ionic CLI and Cordova in this tutorial since it is a matter of entering 2 commands .

What InAppBrowser plugin can be used for ?


If you have landed in this page from a search engine ,then you must know what is the purpose of InAppBrowser and you are looking for how to use it inside your project which is what I'm going to show you in this tutorial ,but let is first see what is InAppBrowser ? and the different situations where you may need to use it .

InAppBrowser is a Cordova plugin that allows you to open an in app browser in your Cordova app or in our case Ionic app .This in app browser can be used to open external URLs just like any normal web browser from your app.

InAppBrowser can be used to open the system browser ,an in app browser which uses its own web-view or even the same webview used by Cordova/Ionic .You can control this behavior by using parameters such as self ,system ,_blank

  • There are many cases where you may need an in app browser ,such as :
  • Opening external URLs in your app without using the system browser which makes a heavy context switch .
  • Implementing third party authentication and authorization workflows with some services such as Facebook or Google .
  • Transforming a hosted responsive website to a mobile app using the InAppBrowser webview etc.
  • Launch an in app browser that you can do what the hell you want with it .

If you are looking for a more powerful ,customizable and feature rich version of InAppBrowser then you may want to check the ThemeableBrowser which is a fork of InAppBrowser with more features .

Installing Cordova and Ionic CLI


Cordova and Ionic CLI are both NPM modules so you can easily install using npm .

Open your terminal on Linux/MAC OS or command on Windows and enter

npm install -g cordova 
npm install -g ionic 
On MAC OS you may need to add sudo before npm install if you want to install modules globally .

Generating a new Ionic 2/3 project


After installing Cordova and Ionic ,you can generate a new Ionic 2 or 3 project with one command from your terminal/command prompt using the Ionic CLI :

ionic start myInAppBrowserExampleDemo blank --v2

We are using the blank template to generate our project which has one home page but you can use one of the many available advanced templates such as the menu or tabs templates .

The --v2 switch tells the Ionic CLI to generate an Ionic 2 based project or if you are using the latest version of Ionic it will generate an Ionic 3 project .If you omit the --v2 switch ,an Ionic 1 project will be generated .

Now navigate inside your project with

cd myInAppBrowserExampleDemo 

And continue with the tutorial .

Adding target platforms and InAppBrowser Cordova plugin


Before you can add the InAppBrowser plugin ,you need to add a target platform .

Since I'm using an Ubuntu system I can only target Android platform ,but you can also target iOS if you are developing using a MAC OS .

ionic platform add android | ios | windows 

Now you can add Cordova plugins .Let is add the InAppBrowser plugin with :

ionic plugin add cordova-plugin-inappbrowser

Installing the Ionic Native 3.x plugin for InAppBrowser


Now ,it is time to install the Ionic native 3.x plug-in for interacting with the InAppBrowser inside Ionic 2/3 project .It is true that you can access any Cordova plug-in using the plain old way but using Ionic Native 3.x allows your plug-in to integrate seamlessly with Angular 2 promises and observables since this is what an Ionic Native 3.x plug-in does ,it wraps the Cordova plug-in API with a promises and observables interface instead of callbacks .

Ionic 2 and Ionic 3 have only the Ionic Native 3.x core installed so to use individual plug-ins you need to install them separately using npm .For InAppBrowser :

npm install --save @ionic-native/in-app-browser

Next we need to provide it so open src/app/app.module.ts

Start by importing the InAppBrowser native plugin :

import { InAppBrowser } from [email protected]/in-app-browser';

Then add it to the list of providers :

@NgModule({
declarations: [
    MyApp,
    HomePage 
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage 
],
providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}  

Using InAppBrowser to open external URLs


So after installing both the Cordova InAppBrowser plugin and its Ionic Native 3.x wrapper ,let is start using it .

You basically need to import the plugin then inject it via component class constructor .

Open src/pages/home/home.ts and add

import { Component , OnInit } from [email protected]/core';
import { NavController  } from 'ionic-angular';
import { InAppBrowser } from [email protected]/in-app-browser';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{

constructor(public navCtrl: NavController,private iab: InAppBrowser) {

}

ngOnInit(){

    const browser = this.iab.create('https://www.techiediaries.com','_self',{location:'no'}); 

}

}

So as you can see using the InAppBrowser is fairly simple and straightforward .You can use a few methods and parameters to start and control the in app browser .

Visit the official Ionic Native documentation for more information about the methods and parameters available for use .

Next you can build and run your app in a real device to test it .On the browser the InAppBrowser opens the links in a new window so to test your app

Attach a device with an USB cable .

Enable the debug mode on your device .

The run

ionic run android 
The second parameter of .create() method (_self ) instructs the InAppBrowser plugin to open the target URL in the same webview used by Ionic/Cordova to render components views ,according to the InAppBrowser documentation on GitHub. but that is not the result we get ,a new browser/webview is opened .

Using ThemeableBrowser ,a custom InAppBrowser fork for more features


Depending on your needs ,If you are just using InAppBrowser to implement a third party auth system or anything else that doesn't need a more customizable in app browser ,then it may be sufficient for you .

Sometimes though, we need more control ,custom look and actions on the in app browser which are not possible to achieve using the original plug-in so the awesome community has created a fork of InAppBrowser with more features ,it is the ThemeableBrowser which allows you to add

Custom in app browser menus .

Custom buttons and actions .

Custom theme colors etc.

You can find a tutorial for ThemeableBrowser here

Conclusion


The InAppBrowser cordova plug-in can be very useful ,especially for using third party services in your mobile app such as auth systems and payment processors .Also to open external URLs either with a built in browser or with the system browser .This tutorial was an updated version ,for a previuosly written post ,which shows you how to use this plugin with the latest versions Ionic 2/Ionic 3 and Ionic native 3.x .




mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.