In this article I am going to discuss how to build an In App Browser (web view) in Ionic App. Ionic is one of the powerful tools that supports multiple platforms like Android, IOS, Windows, etc.

The plugin In App Browser can be used to open the system browser. An In App Browser uses its own web-view or even the same web view used by Cordova or Ionic. You can control this behaviour by using parameters such as self-system or blank.

There are many cases where you may need an app browser; such as:

1. Opening external URLs in your app without using the system browser which makes a heavy context switch
2. Implementing third party authentication and authorization workflows with some services such as Facebook or Google
3. Transforming a hosted responsive website to a mobile app using the In App Browser web view etc.
4. Launch an In App browser that you can use for doing umpteen number of things

Ionic Basic setup:

The following link can help you with basic setup of Building Ionic App in Android(step by step)?. It will help you set up a simple project.

Uses of In App Browser:

The In App Browser is helpful for URL loaded view that you can do without leaving the app.

In App Browser Creation Steps:

Open your node.js comment prompt and install IONIC Plugins by using the following command —

npm install -g ionic

Create an ionic project using following command –

ionic start myApp blank 

Now your project will be created. Now go to your project folder using the following command.

cd myApp (your project name)

Now you need to install in following platform which platform you need you can install:

Leaderboard_CDR

Ionic Cordova platform add android (This platform supports only Android)

Ionic Cordova platform add iOS (This platform supported only iOS)

Ionic Cordova platform add iOS (This platform supports only web)

Once your platform added means you can run your project using following command

Once you have added the platform you can run the project using the following command

ionic Cordova run platform name (iOS, android and web etc)

Now it will show the emulator in an empty page.

In App Browser plugin installation Steps:

Then you need to add in app browser using following command

$ ionic Cordova plugin add Cordova-plugin-in app browser     

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

Now the In App Browser is successfully installed.

Then open your project folder -> Goto the Src folder ->open an app-modules.ts

Start by importing the InAppBrowser native plugin  in your project using the following code:

import {In App Browser} from ‘@ionic-native/in-app-browser’;

Then add it to the list of providers:

         providers: [ In App Browser]

Then go to your pages inside the home.ts file

Now you can import in app browser plugin using the following

import { InAppBrowser } from ‘@ionic-native/in-app-browser’;

Then you need to declare your plugin name In constructor the code is below:

Constructor (private iab: InAppBrowser) { }

Now you can create a In App Browser in your app. Following code

const browser = this.iab.create(Your webpage url);

then you need to show the browser in your app like browser.show().

The page displayed in your mobile app.

The In App Browser has multiple option to choose.

If you are passing URL don’t want to show the user, you give the Location as false in you are app. Use the below code.

const browser = this.iab.create(“Your webpage url, location=yes);

Demo Source Code:

1. src/app/app.module.ts

import { InAppBrowser } from ‘@ionic-native/in-app-browser’;

@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 {} 

2. src/pages/home/home.ts

import { Component , OnInit } from ‘@angular/core’;

import { NavController  } from ‘ionic-angular’;

import { InAppBrowser } from ‘@ionic-native/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.hubfly.com’,’_self’,{location:’no’});

}

}

As you can see, using the In App Browser is fairly simple and straightforward.

Next, you can connect devices and then build your app in a real device to test it out. On the browser the In App Browser opens the links in a new window to test your app.

Attach a device using an USB cable.

Enable the debug mode on your device.

Then run,

ionic run android 

Output Result:

Ionic Result

The In App Browser Cordova plug-in can be very useful, especially for using third party services in your mobile app such as authorising systems and payment processors.

Also you can use it to open external URLs either with a built-in browser or with the system browser.

In this article I have explained how to use this plugin within your app. I Hope you found this article useful. If you have any query, please let us know in the comments box.