Module 5: Using Native Notification（和訳） - 長野エンジニアライフ

ステップ
原文/参考記事
次のチュートリアル
前のチュートリアル

JavaScriptのアラートは、アプリケーションがネイティブでないことを伝えています。このセクションでは、デバイスでアプリを起動させている場合に、ネイティブアラートを表示する基盤をセットアップしていきます。そして、ブラウザでアプリが起動している時は、JavaScriptアラートを表示させます。

ステップ

cordova-plugin-dialogsの追加

1.workshopディレクトリで以下のコマンドを実行し、ネイティブダイアログ用のプラグインを追加します。

$ cordova plugin add cordova-plugin-dialogs

...
BUILD SUCCESSFUL

Total time: 7.146 secs
Installing "cordova-plugin-dialogs" for ios
Adding cordova-plugin-dialogs to package.json
Saved plugin info for "cordova-plugin-dialogs" to config.xml

（メモ）資料記載の org.apache.cordova.dialogs はエラーとなるためcordova-plugin-dialogsで実行する。

スクリプトタグの追加

2.index.htmlにて、以下のスクリプトタグを追加します。（body下のスクリプトタグに配置）

<script src="cordova.js"></script>

これによって、ビルド時にCordova CLIがプラットフォーム固有のcordova.jsが挿入されます。つまり、cordova.jsは今はproject/wwwディレクトリにある必要はありません。（あるべきでないです。）

window.alert()のオーバーライド

3.navigator.notificationオブジェクトが利用できるデバイスでアプリ(cordova-plugin-dialogsが追加された)を起動した場合は、window.alert()をnavigator.notification.alert()に書き換えます。

js/app.jsファイルを開いて、"Event Registration" blockに以下を追加します。

document.addEventListener('deviceready', function () {
  if (navigator.notification) { // Override default HTML alert with native dialog
      window.alert = function (message) {
          navigator.notification.alert(
              message,    // message
              null,       // callback
              "Workshop", // title
              'OK'        // buttonName
          );
      };
  }
}, false);