Cordova アプリの開発中にブラウザでも DeviceReady を発火させる方法
Cordova アプリを開発中、Browser プラットフォームを使わずに簡易サーバを立ち上げるなど、何らかの理由で cordova.js を読み込まなかったとする。すると当然、deviceready イベントに登録したコールバック関数は実行されない。deviceready イベントは Cordova が用意する独自のイベントだからだ。
cordova emulate browser を使った場合は、ブラウザでも deviceready が発火する。ということは、何らかの方法で deviceready イベントはブラウザ向けにエミュレートできるということだ。
そこで調べてみると、document.createEvent() などを用いて、カスタムイベントを定義・発火させることで、deviceready を自分で発火させることができた。
まずは発火させたい deviceready イベントを適当に用意する。
document.addEventListener('deviceready', () => {
console.log('Test');
});
次に、環境変数などで、開発中のみ以下のコードが実行されるようにする。
// 環境変数で開発中のみ以下のコードを実行する
if(environment.development) {
// deviceready は DOMContentLoaded 以降・onload 以前に発火するので
// DOMContentLoaded 内で遅延実行する
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// イベントを作る
const e = document.createEvent('Event');
// deviceready イベントを初期化する
e.initEvent('deviceready', true, false);
// イベントを発火させる
document.dispatchEvent(e);
}, 50);
});
}
DOMContentLoaded 内で DeviceReady イベントを遅延発火させるので、本来の DeviceReady イベントに近い動作が再現できる。