[Ionic] InAppBrowser で URL をデフォルトブラウザで開く使い方
- 2018 2/22
- カテゴリー : Mobile App Framework
- ionic
- コメントを書く
Ionic Framework で InAppBrowser を使うときは、デフォルトブラウザで開くようにしたい自分の設定をご紹介します。
- Ionic Native – In App Browser
- apache/cordova-plugin-inappbrowser: Mirror of Apache Cordova Plugin inappbrowser
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 を使ってみた現場からお送りしました。