アプリ起動後のCordovaプラグインの利用について

Monacaチームの小田川です。

アプリ起動後にCordovaプラグインを利用する場合には、注意が必要です。

アプリ起動直後は、Cordovaプラグインを利用するための準備ができていません。Cordovaでは、アプリ起動後にCordovaプラグインを利用するための準備が完了するとdevicereadyイベントが実行されます。

devicereadyイベント前にCordovaプラグインを使用すると、下記のようなエラーが発生します。下記の例では、cordova-plugin-deviceプラグインを使用しています。

<script>
  console.log(device.cordova);
</script>

// Androidの場合：
// Uncaught ReferenceError: device is not defined

// iOSの場合：
// ReferenceError: Can't find variable: device

下記のようにdevicereadyイベント後にcordova-plugin-deviceプラグインを使用した場合は、正常に動作します。

<script>
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
    console.log(device.cordova);
  }
</script>

// Androidの出力例：
// 9.0.0

// iOSの場合の出力例：
// 6.1.1

Onsen UIを使用している場合の注意点

Onsen UIを使用している場合は、注意点があります。

Onsen UIでは、ons-pageを使用して画面を作成します。ons-pageでは、下記のようなページの状態によって発生するイベントが用意されています。

init
show
hide
destroy

詳しくは、こちらを参照してください。

initイベントは、ons-pageが初期化される際に、一度だけ実行されます。アプリ起動後に実行されるinitイベントは、通常devicereadyイベント前に実行されるため、アプリ起動後に実行されるinitイベントでCordovaプラグインを使用するとエラーが発生します。

//initイベントでCordovaプラグインを使用した場合：
document.addEventListener('init', function(event) {
  var page = event.target;

  // アプリ起動後に表示されるons-pageのidに「first-page」が設定されている場合：
  if (page.matches('#first-page')) {
    // エラーが発生します。
    console.log(device.cordova);
  }
});

ons.ready()を利用する

initイベント内の処理内容によっては、devicereadyイベント後にCordovaプラグインの処理が実行される可能性があるため、Cordovaプラグインの処理が正常に動作してしまうケースが発生します。このような場合、エラー原因の特定が難しくなります。

Onsen UIでは、Onsen UIの初期化が終了した際に実行されるons.ready()メソッドが用意されています。ons.ready()は、devicereadyイベント後に実行されるため、Cordovaプラグインを実行させることができます。ons.ready()については、こちらを参照していください。

<script>
  // ons.ready()の使用例：
  ons.ready(function() {
    console.log(device.cordova);
  });
</script>

Onsen UIを使用してアプリ起動後に一度だけCordovaプラグインの処理を実行したい場合は、ons.ready()を利用することで対応することができます。

おわりに

Cordovaプラグインを使用する場合は、devicereadyイベント後に実行する必要があります。アプリ起動後にCordovaプラグインの処理でエラーが発生する場合は、devicereadyイベント後に処理が実行されているか確認してみてください。