Cordova アプリを作成していまして、つい最近プラグイン「Custom-URL-scheme」を利用したので備忘としてまとめておきます。

まずURLスキームとはなんなのでしょうか。

簡単に言うと、Web サイトで「アドレス://パラメータ」を指定することで「アドレス」で指定されたアプリを起動して「パラメータ」で指定された動きをするものです。
「アドレス://パラメータ」の形で1番身近なものはWebサイトの「https://*****」です。

アプリを起動するURLスキームで例をあげると

  • GoogleMap「comgooglemaps://」
  • Twitter「twitter://timeline」
  • FaceBook「fb://」
    など

カスタムURLスキームとは、これから作成するアプリに上記URLスキームを割り当てることでWebからの呼び出しやパラメータを付与して処理をすることができます。

ただカスタムURLを実装することになると、iOSとAndroidで個別に保持している設定ファイルなどを修正することになります。
つまりそれぞれOS依存の実装になる。

ただ以下プラグインをインストールして、ある関数の中に呼び出し後の処理を実装すれば、カスタムURLスキームとしてのアプリ起動や、パラメータを付与した上での処理を実装することができます。

プラグイン Custom-URL-scheme 見出しへのリンク

Custom-URL-schemeプラグインを利用することでiOS、Android個別に実装せず、プラグインをインストールすることで呼び出し元Webサイトからアプリを起動することができます。

また、イベント処理は「handleOpenURL」に実装することでパラメータを取得して独自実装することができます。

インストール方法 見出しへのリンク

下記「schemename」に自身が決めたスキーム名を入力する。

cordova plugin add cordova-plugin-customurlscheme –variable URL_SCHEME=schemename

アプリ実装 見出しへのリンク

Web上の「アプリ起動ボタン」を押せば、該当アプリが起動とアラート画面が表示され、メッセージで「test」が表示される。

呼び出し元 HTML 見出しへのリンク

内容はスキーム名「schemename」でパラメータに「test」を渡している。

<html>
  <head>
    <meta charset="utf-8" />
    <title>APPS</title>
  </head>

  <body bgcolor="black" style="background-color:white;">
    <a href="schemename://test" target="_blank">アプリ起動</a>
  </body>
</html>

handleOpenURL 関数 見出しへのリンク

以下1000の定義は1秒待機という意味。

function handleOpenURL(url: String) {
  setTimeout(function () {
    var strValue = url;
    strValue = strValue.replace("schemename://", "");
    if (strValue !== "") {
      alert(strValue);
    } else {
      alert("パラメータなし");
    }
  }, 1000);
}

実行結果 見出しへのリンク

cordova-apps-plugin-customurlscheme

以上