Corredor

ウェブ、プログラミングの勉強メモ。

Cordova アプリの開発中にブラウザでも DeviceReady を発火させる方法

たった1日で基本が身に付く!  JavaScript 超入門

たった1日で基本が身に付く! JavaScript 超入門

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 イベントに近い動作が再現できる。