[Ionic] InAppBrowser で URL をデフォルトブラウザで開く使い方

Ionic Framework で InAppBrowser を使うときは、デフォルトブラウザで開くようにしたい自分の設定をご紹介します。

ionic Framework

InAppBrowser インストール

cordova plugin と npm module をそれぞれインストールします。

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

InAppBrowser の使い方

InAppBrowser で URL を開くサンプルコードは以下のような感じです。

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();
    });
  }
}

ポイントは ‘_system’ を指定して、モバイル端末のデフォルトブラウザで開くようにしている点です。

個人的には、Twitter などで読んだ記事をシェアしたいので iPhone だと InAppBrowser をアプリ内で開くとブラウザのシェア機能が利用できないので、デフォルトブラウザ Safari で URL を開いてくれたほうが嬉しいので、この設定にしています。

詳しい実装は以下の pull request を参考にしてください。

以上、Ionic Framework で InAppBrowser を使ってみた現場からお送りしました。

関連記事