I’ll introduce my preferred settings for opening URLs in the default browser when using InAppBrowser with Ionic Framework.

• Ionic Native - In App Browser
• apache/cordova-plugin-inappbrowser: Mirror of Apache Cordova Plugin inappbrowser

InAppBrowser Installation

Install both the cordova plugin and npm module.

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

How to use InAppBrowser

Sample code for opening URLs with InAppBrowser looks like this:

src/pages/home/home.ts

import { NavController, Platform } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

// ...

export class HomePage {

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

  openUrl(url: string) {
    this.platform.ready().then(() => {
      const browser = this.iab.create(url, '_system');
      browser.show();
    });
  }
}

The key point is specifying ‘_system’ to open URLs in the mobile device’s default browser.

Personally, I want to share articles I read on Twitter, so on iPhone, when InAppBrowser opens within the app, the browser’s share functionality isn’t available. I prefer this setting because I want URLs to open in the default Safari browser.

For detailed implementation, please refer to the following pull request:

• Open the URL using InAppBrowser · Pull Request #3 · codenote-net/matome-reader

That’s all from the Gemba where I tried using InAppBrowser with Ionic Framework.