Cordova イベント
Cordova ではアプリケーションから利用できるイベントがいくつか用意されています。
例えば、端末が起動しプログラムの実行の準備ができたことを示す deviceready イベントや、 プログラムが一時停止状態になったことを示す pause イベント、 プログラムが再開したときの resume イベントなどです。
以前はネットワークの online、offline なども、「ライフサイクルイベント」としてひとまとめに含められていましたが、 現在はそれらは Cordova のコアのイベントとされていません。
ネットワーク関連のイベントなどは Network Information プラグインのイベントに分類されています。
ここでは、deviceready、pause、resume のイベントハンドラをセットし、イベントが呼ばれたときにハンドラ名を記録し、 イベントが確かに呼ばれることを確認してみましょう。
新しくプロジェクトを作成します。
$ cordova create myapp1
作成されたサブディレクトリに移動します。
$ cd myapp1
プラットフォームとして browser と android を追加します。
$ cordova platform add browser $ cordova platform add android
コードを編集します。
www/index.html は次の通り。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
<meta name="viewport" content="user-scalable=no, initial-scale=1,width=device-width">
<title>Event Test</title>
</head>
<body style="font-family: sans-serif;">
<div id="log"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
init();
</script>
</body>
</html>
Content-Security-Policy は、js/index.js を読み込むのと、script タグ内で init を呼び出しているところから、'self' と 'unsafe-inline' を設定しています。
cordova.js は基本的に常に読込みます。
最後に index.js 内の関数 init を呼んでいます。
www/js/index.js は次の通り。
function init() {
document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady(){
appendLog("onDeviceReady()");
document.addEventListener('pause', onPause, false);
document.addEventListener('resume', onResume, false);
}
function onPause(){
appendLog("onPause()");
}
function onResume(){
appendLog("onResume()");
}
function appendLog(s){
var log = document.getElementById('log');
log.innerHTML += "<br>" + s;
}
初期化時に deviceready イベントのリスナだけ設定。deviceready にて resume と pause を設定しています。
browser での動作確認は次の通りです。
$ cordova build browser $ cordova serve
上記コマンド実行後、ブラウザから動作確認できます。
ブラウザのタブを切り替え戻ると、onPause、onResume が追加されていくのがわかります。
android での動作確認は次の通り。
$ cordova run android
