使用したもの(環境)

cordova
visualStudioCode
windows10
Android

チュートリアルを訳しながらやってみる

チュートリアルのページは下記。

Module 5: Using Native Notification

前回のチュートリアル。

Cordovaのチュートリアルをやってみる第三回

環境構築については別途まとめてあるので下記参照。

cordova&VSCodeで環境を構築するまでの右往左往メモ。

Module 5: Using Native Notification

Using Native Notification → ネイティブのNotificationを使用しよう！

A default JavaScript alert gives away the fact that your application is not native.
デフォルトのJavaScript警告は、アプリケーションがネイティブではないという事実を示しています。

In this section, we set up the basic infrastructure to display native alerts when the application is running on a device,
このセクションでは、アプリケーションがデバイスで動作するときに、ネイティブの警告を表示するようにアプリケーションの基盤を整えていきましょう。

and fall back to default JavaScript alerts when it is running in the browser.
そして、ブラウザで動作したときにはデフォルトのJavaScript警告に戻るようにします。

1. Make sure you are in the workshop directory and add the native dialogs plugin to your project:
workshopディレクトリにいることを確認して、ネイティブダイアログプラグインをプロジェクトに追加してください。

プロジェクトへのプラグインの追加の仕方は第一回を参照すること。
また、第一回と同様にコマンドが古く、404エラーを返されるので実際には下記コマンドを実行した。

cordova plugin add cordova-plugin-dialogs

2. In index.html, add the following script tag (as the first script tag at the bottom of the body):
index.htmlに下記のスクリプトタグを追加します。(bodyタグの下の、最初のscript要素としてです。)

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

This instructs the Cordova CLI to inject a platform specific version of cordova.js at build time.
これは、Cordova CLIに、ビルド時にプラットフォーム固有のバージョンのcordova.jsを注入するように指示します。

In other words, cordova.js doesn't need to be (and shouldn't be) present in your project/www folder.
言い換えれば、cordova.jsはプロジェクト/ wwwフォルダに存在する必要はありません。

つまり上記のタグを書いておけばcordova.jsはプロジェクト内に存在しなくてもビルド時にプラットフォームに合わせたものが勝手に読み込まれるということ。

3. When running on a device with the navigator.notification object available (the dialogs plugin is installed),
navigator.notificationオブジェクトが使用可能(ダイアログプラグインがインストールされていること)なデバイス上で動いている時、

override the window.alert() function and replace its default implementation with a call to navigator.notification.alert().
window.alert()関数をオーバーライドし、デフォルトの実装をnavigator.notification.alert()関数の呼び出しに置換します。

Open js/app.js, and add this code to the "Event Registration" block:
js/app.jsを開き、下記コードを"Event Registration"ブロックに追加してください。

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);

4. Test the application: click the Help button.
アプリケーションをテストします。ヘルプボタンをクリックしてみましょう。

ブラウザでの動作

Androidでの動作

オーバーライドする前の動作

AndroidでChromeを起動してアラートを出してみた場合の動作

使用したページはこちら

画像を見直して順番間違ったかなと思いましたがこれで正解でした。
Androidでの動作はよりブラウザに近い挙動を示すようです。
なんというか、あまりネイティブっぽさを感じませんでした。(もっと大々的にデザインが違うのかと思っていました)
チュートリアルで言われているところの、「ネイティブっぽさ」は、
「アラートの表示元がどこと表示されるか」と言うのがメインのようです。
確かに、表示元がWorkshopというアプリケーション名であることはちょっとネイティブアプリっぽいです。

参考URL

Module 5: Using Native Notification

Cordovaのチュートリアルをやってみる第三回

cordova&VSCodeで環境を構築するまでの右往左往メモ。

Chromeの動作確認に使ったページ