[Ionic] How to use InAppBrowser to open URLs in default browser

Tadashi Shigeoka ·  Thu, February 22, 2018

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

ionic Framework

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:

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