Ionic アプリでURL をアプリ外ブラウザで開く

この記事の情報は古い可能性があります

最終更新日：2019/11/03 04:23:42

Angular

Capacitor

Cordova

Ionic

TypeScript

以前Qiita でIonic 3 でリンクを外部ブラウザで開くという記事を書きました。
その時はInAppBrowser Cordova プラグインを使う方法をまとめましたが、Capacitor の組み込みプラグインBrowser については未調査でした。
なのでこの記事で改めて下記３つのURL を取り扱う方法を比較していきたいと思います。

Capacitor 組み込みプラグインBrowser
InAppBrowser Cordova プラグイン
window.open(url, '_system')

要約

アプリ外ブラウザでURL を開きたい場合、window.open(url, '_system') やCapacitor の組み込みプラグインBrowser を使うと一部意図した挙動にならない。
なのでCordova のInAppBroser プラグイン(※1, ※2) を使うと良さそうだ。

※1: Ionic 3 なら、詳細はIonic Native - In App Browser を参照する
※2: Ionic 4(Angular) なら、詳細はIn App Browser - Ionic Documentation を参照する

検証環境について

実装に使った環境

Ionic 3

Cordova

Ionic:

   Ionic CLI          : 5.4.5
   Ionic Framework    : ionic-angular 3.9.5
   @ionic/app-scripts : 3.2.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 5 other plugins)

Utility:

   cordova-res : 0.4.0
   native-run  : 0.2.9 

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.0
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 11.0 Build version 11A420a

Ionic 4

Capacitor

Ionic:

   Ionic CLI                     : 5.4.5
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : 0.4.0
   native-run  : 0.2.9

System:

   NodeJS : v10.16.0
   npm    : 6.9.0
   OS     : macOS Mojave

Cordova

Ionic:

   Ionic CLI                     : 5.4.5
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 5 other plugins)

Utility:

   cordova-res : 0.4.0
   native-run  : 0.2.9

System:

   Android SDK Tools : 26.1.1
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.0
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 11.0 Build version 11A420a

検証端末

Android Emulator(android os: 10.0)
iPhone Xs(iOS: 13.1.3)
MacBook Pro(macOS: High Sierra)
- Chrome(version: 78.0.3904.70, 64bit)

実装方法

Browser Capacitor プラグイン

Capacitor に組み込まれているBrowser プラグインを使う方法です。
Capacitor とついていますが、ブラウザでも使う事ができます。

URI スキーム	Android	iOS	Chrome(macOS)
http/https	アプリ内でブラウザが起動	アプリ内でブラウザが起動	別タブ起動
mailto	動作しない	動作しない	メーラーが起動
tel	動作しない	動作しない	FaceTime 起動

Ionic 3 での実装例

Build エラーになったため未検証

Ionic 4(Angular) での実装例

このプラグインはCapacitor が前提となるので、まずはCapacitor のセットアップをしてください。

import { Component } from '@angular/core'
import { BrowserPlugin, Plugins } from '@capacitor/core'

@Component({
  selector: 'app-home',
  template: `
  <ion-content padding>
    <ion-button color="primary" (click)="openLink('https://ionicframework.com/')">HTTP:</ion-button>
    <ion-button color="secondary" (click)="openLink('mailto:')">mailto:</ion-button>
    <ion-button color="danger" (click)="openLink('tel:00012345678')">tel:</ion-button>
  </ion-content>
  `
})
export class HomePage {
  private browser: BrowserPlugin

  constructor(
  ) {
    this.browser = Plugins.Browser
  }

  openLink(uri: string) {
    this.browser.open({
      url: uri,
      windowName: '_system'
    })
  }
}

InAppBrowser Cordova プラグイン

Cordova プラグインのIn App Browser を使う方法です。
Cordova とついていますが、ブラウザでも使う事ができます。

URI スキーム	Android	iOS	Chrome(macOS)
http/https	アプリ外のブラウザが起動	アプリ外のブラウザが起動	別タブ起動
mailto	メーラーが起動	メーラーが起動	メーラーが起動
tel	電話が起動	発信前ダイアログが起動	FaceTime 起動

Ionic 3 での実装例

導入方法

Ionic Native - In App Browser を参考に導入していきます。

下記を実行してライブラリインストールします
```
ionic cordova plugin add cordova-plugin-inappbrowser
```
下記を実行してライブラリインストールします
```
npm install --save @ionic-native/in-app-browser@4
```

NgModule のprovider に依存関係を追加します

...
import { InAppBrowser } from '@ionic-native/in-app-browser'
...
@NgModule({
...
providers: [
 ...
 InAppBrowser
 ...
]
...
})
export class AppModule { }

動作確認用コード

import { Component } from '@angular/core'
import { InAppBrowser } from '@ionic-native/in-app-browser'

@Component({
  selector: 'page-home',
  template: `
    <ion-content padding>
      <button ion-button color="primary" (click)="openLink('https://ionicframework.com/')">HTTP:</button>
      <button ion-button color="secondary" (click)="openLink('mailto:')">mailto:</button>
      <button ion-button color="danger" (click)="openLink('tel:00012345678')">tel:</button>
    </ion-content>
  `
})
export class HomePage {

  constructor(
    private ipb: InAppBrowser
  ) {
  }

  openLink(uri: string) {
    this.ipb.create(uri, '_system')
  }
}

Ionic 4(Angular) での実装例

導入方法

In App Browser - Ionic Documentation を参考に導入していきます。

下記を実行してライブラリインストールします
```
ionic cordova plugin add cordova-plugin-inappbrowser
```
下記を実行してライブラリインストールします
```
npm install @ionic-native/in-app-browser
```

NgModule のprovider に依存関係を追加します

...
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'
...
@NgModule({
...
providers: [
 ...
 InAppBrowser
 ...
]
...
})
export class AppModule { }

動作確認用コード

import { Component } from '@angular/core'
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'

@Component({
  selector: 'app-home',
  template: `
  <ion-content padding>
    <ion-button color="primary" (click)="openLink('https://ionicframework.com/')">HTTP:</ion-button>
    <ion-button color="secondary" (click)="openLink('mailto:')">mailto:</ion-button>
    <ion-button color="danger" (click)="openLink('tel:00012345678')">tel:</ion-button>
  </ion-content>
  `
})
export class HomePage {

  constructor(
    private iab: InAppBrowser
  ) {
  }

  openLink(uri: string) {
    this.iab.create(uri, '_system')
  }
}

Window オブジェクト

ブラウザのタブ毎に設定されるWindow オブジェクトを使う方法です。
下記のように意図した挙動にならないので、アプリとして作る場合はこの方法を避けるのが良さそうです。

URI スキーム	Android	iOS	Chrome(macOS)
http/https	アプリ外のブラウザが起動	動作しない	別タブ起動
mailto	メーラーが起動	動作しない	メーラーが起動
tel	電話が起動	動作しない	FaceTime 起動

Ionic 3 での実装例

import { Component } from '@angular/core'

@Component({
  selector: 'page-home',
  template: `
    <ion-content padding>
      <button ion-button color="primary" (click)="openLink('https://ionicframework.com/')">HTTP:</button>
      <button ion-button color="secondary" (click)="openLink('mailto:')">mailto:</button>
      <button ion-button color="danger" (click)="openLink('tel:00012345678')">tel:</button>
    </ion-content>
  `
})
export class HomePage {

  openLink(uri: string) {
    window.open(uri, '_system')
  }
}

Ionic 4(Angular) での実装例

import { Component } from '@angular/core'

@Component({
  selector: 'app-home',
  template: `
  <ion-content padding>
    <ion-button color="primary" (click)="openLink('https://ionicframework.com/')">HTTP:</ion-button>
    <ion-button color="secondary" (click)="openLink('mailto:')">mailto:</ion-button>
    <ion-button color="danger" (click)="openLink('tel:00012345678')">tel:</ion-button>
  </ion-content>
  `
})
export class HomePage {

  openLink(uri: string) {
    window.open(uri, '_system')
  }
}

参考文献

Browser - Capacitor (2019/11/03)
In App Browser - Ionic Documentation (2019/11/03)
Ionic Native - In App Browser (2019/11/03)
window - Web API | MDN (2019/11/03)

一覧に戻る