/ ionic

Ionic 3 - Integrating InAppBrowser Plugin

In this article, we'll be integrating the InAppBrowser plugin inside of our Ionic applications. This will allow the user to view web pages inside of your application, and should not be confused with the BrowserTab plugin as that is specific to one tab only.

New Project

As always, we'll be starting out with a new project:


# Create a new Ionic project
$ ionic start InAppBrowser blank

# Navigate to directory
$ cd InAppBrowser

Adding Plugins

Now we'll need to add the Cordova and Ionic Native plugins for InAppBrowser. If you're asked to install the CLI plugin for Cordova, select yes and continue with the installation.

# Ionic and Cordova plugins
ionic cordova plugin add cordova-plugin-inappbrowser

# Ionic Native with (--save not required on [email protected] and above).
npm install @ionic-native/in-app-browser --save
Setup

Each Ionic Native plugin comes with the same set up process. We now need to add InAppBrowser into the providers array of our root @NgModule() inside app.module.ts:


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

@NgModule({
  providers: [
    ...
    InAppBrowser
  ]
})

To use InAppBrowser, we'll be injecting it inside of our HomeComponent later in this article.

Template

In our application I'm simply giving the user the ability to type in any URL and upon clicking 'Open Webpage', they're navigated away to that page inside the app. I have the following HTML inside home.html:

<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      InAppBrowser
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-item>
    <ion-label floating>URL</ion-label>
    <ion-input type="url" [(ngModel)]="url"></ion-input>
  </ion-item>

  <button ion-button block clear (click)="openWebpage(url)">Open Webpage</button>

</ion-content>
Component

We're injecting InAppBrowser within our HomeComponent, and our openWebpage(url: string) function simply creates a new InAppBrowserObject instance and assigns it to browser.

At the same time, this also opens the web page on the user's device, but as we have a reference to the InAppBrowserObject, we can also inject scripts, css, hide or show the browser programmatically and more.

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  url: string;  
  
  constructor(private inAppBrowser: InAppBrowser) { }

  openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: 'no'
    }

    // Opening a URL and returning an InAppBrowserObject
    const browser = this.inAppBrowser.create(url, '_self', options);

   // Inject scripts, css and more with browser.X
  }
}

We can thoroughly customise our browser with the InAppBrowserOptions, changing everything from zoom to hiding the location bar, hardware back button, and more.

Results

We've now opened an external URL inside of our application using the InAppBrowser plugin.

In App Browser

If you'd like to work with more plugin integrations, get my Ionic Native course as part of a special bundle containing Learn Ionic 3 From Scratch and App Prototyping with Adobe Experience Design.

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More