How to use the Ionic InAppBrowser

Ionic InAppBrowser capacitor or Cordova plugin is used to open external links from your app inside a web browser view. We can show helpful articles, videos, and web resources inside of our app. Users can view web pages without leaving your app.

In this tutorial, we’ll demonstrate two examples of Ionic inappbrowser examples. First by using Cordova plugin and second example from capacitor in-app-browser plugin.

The InAppBrowser window behaves like a standard web browser, and can’t access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova web view. The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.

The InAppBrowser provides by default its own GUI controls for the user (back, forward, done).

Ionic inappbrowser example using cordova plugin

In this example we are creating apps, we have a simple checkbox and button. When the page load next button is disabled, it will be able or active only when a user clicked on the checkbox, which will display a web page of https:ionic.io/tos on top of our current apps window. Here is a screenshot of the ionic open link in the browser.

Setting up for inAppBrowser project

Let first create a project for the in-app browser and install the Cordova plugin for the in-app browser.

ionic start inAppBrowse blank –type=angular
cd inAppBrowser
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser –save

Step 2: In home.page.html we have

<ion-checkbox>

the component is clicked on, it will trigger the openTOS() method, which will open the URL via InAppBrowser. The Next Button is disabled by default (via the readTOS variable). So when openTOS() method is called, it will change the value of the button to true. Which allows us to click on the Next button is enabled. Add the following code in home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <div class="top-header">
      <ion-icon float-right color="primary" name="alert"></ion-icon>
      <h3>Important Information</h3>
    </div>
    <ion-item>
      <ion-label>Please agree to our terms</ion-label>
      <ion-checkbox (click)="openTOS()"></ion-checkbox>
    </ion-item>
    <ion-button float-right size="small" [disabled]="!readTOS" (click)="agreedFunction()">
      Next
    </ion-button>
  </div>
</ion-content>

Step 3: Add the following code in home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public readTOS = false;
  constructor(private iab: InAppBrowser, platform: Platform) { }

  openTOS() {
    this.readTOS = !this.readTOS;
    const browser: any = this.iab.create('https://ionicframework.com/');
    browser.show();
    browser.close();
  }

  agreedFunction() {
    alert('I m not on way');
  }
}

Ionic capacitor in-app browser example

In the second example, we’ll use the Ionic capacitor in-app browser plugin to open links in a new browser. As capacitors allow us to run our application cross-platform and in the browser. Let create a new project to demonstrate the ionic capacitor inappBrowser example.

ionic start appBrowserCap
cd appBrowserCap

The Browser API provides the ability to open an in-app browser and subscribe to browser events. Let install the capacitor in-app browser plugin.

npm install @capacitor/browser
npx cap sync

On the home.page.html we had a button to open a new link in the browser.

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      Capacitor In-app browser example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button (click)=" openTOS()">
    Open link
  </ion-button>
</ion-content>

To use Capacitor in-app browser we need to import it into our component typescript file.

import { Component } from '@angular/core';
import { Browser } from '@capacitor/browser';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  async openTOS() {
    await Browser.open({ url: 'http://capacitorjs.com/' });
  }
}

Related posts

How to use the Ionic InAppBrowser