Ionic/Angular Cordova InAppBrowser Plugin Tutorial with Example

INTRODUCTION

In this tutorial, we'll learn how to use the cordova InAppBrowser plugin in an Ionic 4/5 Framework app.

• Step 1 — We will create Ionic/Angular application
• Step 2 — Setup InAppBrowser plugin in Ionic/Angular
• Step 3— Use InAppBrowser Plugin In App
• Step 4 — Build apk from Ionic/Angular application & test on android
• Step 5— Multiple InAppBrowser Plugin Features in Ionic/Angular

STEP 1 — Lets create Ionic/Angular application

Ionic and Cordova cli latest version needs to be installed in your local machine to work Ionic properly, Along with that let’s go & create an blank Ionic Framework application app now. 

First, we have to know some basic knowledge of using cmd. Open your CMD or terminal in your machine & navigate to the directory or location where you want to create basic ionic angular application. You can look at the below command and it might will helpful you to navigate through cmd.

cd Desktop/

So creating a basic application in ionic/angular is very simple take a look at the below command and copy and paste in your terminal or cmd. Replace "ionicAppName" with your project name.

ionic start ionicAppName blank --type=angular --spec false

After this, Your Ionic/Angular application will be created and will be ready to start work in this directory . But you first need to navigate to application directory through the below command. 

cd ionicAppName/

Now we have successfully created an Ionic 4 app, Now we need to install InAppBrowser plugin in our Ionic/Angular project to use it. Now to install InAppBrowser plugin in our project, run these command which are shown in next section in your favorite terminal:

Install InAppBrowser

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

Now that the InAppBrowser plugin has been added to our app. Now, we need to import it into the app.module.ts file before we can use it in our application.

In the app.module.ts file, import the InAppBrowser and add it into the providers.

providers: [
  StatusBar,
  SplashScreen,
  { provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
  InAppBrowser // Set InAppBrowser here
],

  

All done! You can now use the InAppBrowser; all you have to do is "inject" it into your component.

Let's move on to the page in your project where you want to use this plugin. Open src/pages/home/home.ts, then import InAppBrowser and put it in the component constructor.

import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser';

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

    constructor(public inAppBrowser: InAppBrowser) {
    }
}

Now let's open an external URL, for example: https://ionictemplates.blogspot.com

InAppBrowser gives us three options for opening the target URL: use the system's default browser, use the same Webview that Cordova uses to show our app, or use a simple in-app browser.

Let's see how the three options can be used in our demo app.

Our component needs three more methods:

openWithSystemBrowser(url: string); // url type string
openWithInAppBrowser(url: string); // type string
openWithCordovaBrowser(url: string); // string

And here is the full code implementation:

import { Component } from '@angular/core';
import { InAppBrowserOptions, InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
selector: 'app-home',
templateUrl: './home.page.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 inAppBrowser: InAppBrowser) {

}
  openWithSystemBrowser(url : string){
    let target = '_system';
    this.inAppBrowser.create(url, target, this.options);
}
  openWithInAppBrowser(url : string){
    let target = '_blank';
    this.inAppBrowser.create(url, target, this.options);
}
  openWithCordovaBrowser(url : string){
    let target = '_self';
    this.inAppBrowser.create(url, target, this.options);
}  

}

Now that we've added some methods to home.ts file, we need to add some buttons that can be used to call these three methods. Go to the.html file and change the following code:

Open src/pages/home/home.html and add these lines:

<ion-header>
<ion-navbar>
    <ion-title>
      Ionic/Angular InAppBrowser Example
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content class="ion-padding">

    <ion-button (click)="openWithSystemBrowser('https://ionictemplates.blogspot.com')">Open with System browser</ion-button>
    <ion-button (click)="openWithInAppBrowser('https://ionictemplates.blogspot.com')">Open with In App browser</ion-button>
    <ion-button (click)="openWithCordovaBrowser('https://ionictemplates.blogspot.com')">Open with Cordova browser</ion-button>

</ion-content>

So, this is the end. Now that we've successfully merged,

Publish Your App:

Use the following command to send it to your phone.

ionic cordova platform add android
ionic cordova run android --aot

You just need to run the below commands to build your ionic/angular. It will build an APK file which you can run on your android device and test it. Also you can replace "ios" with "android" to build for IOS.

$ ionic cordova build android --aot --prod

Conclusion

Finally, Ionic 5 Cordova InAppBrowser plugin tutorial has been over. Make sure to Subscribe us on YouTube for more.