【Cordova】外部サイトをアプリ内ブラウザで表示できるプラグイン「cordova-plugin-inappbrowser」

昨年末にも似たような記事を投稿しましたが、今回はプラグインを使って外部サイトアプリ内ブラウザで表示する方法について。
まだ iOS でしか動作検証できていませんが、結構良い感じに動作したので、Android でも確認して、採用するか決めたいと思います。

使用したプラグインは、「cordova-plugin-inappbrowser」です。
GitHubはこちらから。

GitHub – apache/cordova-plugin-inappbrowser: Apache Cordova Plugin inappbrowser
https://github.com/apache/cordova-plugin-inappbrowser

ただ、今回は下記のサイトの方が参考になりました。

InAppBrowser プラグイン｜Monaca Docs
https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/

モナカのドキュメントのページですが、プラグインなどは同じものを使えるので問題なし。

実装方法ですが、まずは下記のコマンドでプラグインをインストールします。

cordova plugin add cordova-plugin-inappbrowser

インストールが完了したら、あとは下記の関数を呼び出して、サイトを開くだけ。

const url = '[開きたいページのURL]';
cordova.InAppBrowser.open(url, '_blank', 'location=no');

実際の画面はこんな感じ。

私のコードでは、一連の処理を抜粋して書くとこうなります。
ちなみに、React を使用しておりますので、悪しからず。

openSite(url) {
  cordova.InAppBrowser.open(url, '_blank', 'location=no');
}
render() {
  const url = '[開きたいページのURL]';
  return (
    <main>
      <a onClick={() => this.openLink(url)}>ページを開く</a>
    </main>
  );
}

なお、cordova.InAppBrowser.open() には引数がいくつかあります。
個人的に指定しておいたほうがいいと思うのは、第3引数の、location=no ですね。
こちらはロケーションバーの表示/非表示の設定を行えます。
で、デフォルト値が Yes なのですが…正直、格好悪い…！
そのため、申し訳ないのですが、速攻非表示にさせてもらいました…。
他にも、下の「完了」の文言を変えたり、新規のウィンドウを開く際に、キャッシュやCookie を削除することもできるらしいです。
その辺りは、状況に応じて設定してください。
なお、複数設定する場合、プロパティをスペースなしのカンマ区切りで指定してください。

以上、Cordova アプリで外部サイトをアプリ内ブラウザで表示する方法でした。

最後に、以前投稿した記事についてもご紹介しておきます。

【Cordova】外部サイトをアプリ内ブラウザで表示する方法
https://cpoint-lab.co.jp/article/201811/【cordova】外部サイトをアプリ内ブラウザで表示する/

こちらは Whitelist を利用してアプリ内ブラウザを開く方法です。
同じように外部サイトを開くことはできるのですが、前のページに戻れなかったので、この方法は却下しました。