Cordova アプリでバックグラウンド移行時やフォアグラウンド移行時に処理を行う

Cordova アプリで、アプリがバックグラウンドに回った時に何か処理を実行したり、逆にフォアグラウンドに戻ってきた時にある処理を行ったりすることができる。いずれも、Cordova が提供してくれているイベントを利用する。

目次

pause : アプリがバックグラウンドに移行した時・スリープした時

通常の Pause イベントは、動画コンテンツを停止させた時に発火するイベントなのだが、Cordova ではこの pause イベントを「アプリがバックグラウンドに移行した時」のイベントに書き換えている。

ホーム画面に戻るなど、アプリがバックグラウンドに移動した場合の他に、アプリがフォアグラウンドで起動したまま、スリープボタンで端末がスリープした時にも発火する。

Cordova が提供するイベントは、DeviceReady イベント後に登録しないと正しく動作しないので注意。以降のコードサンプルでは DeviceReady イベントの記載を省略する。

// DeviceReady イベントまで待つ
document.addEventListener('deviceready', () => {
  // アプリがバックグラウンドに移行した時に処理を行う
  document.addEventListener('pause', () => {
    console.log('Pause!');
  });
});

Pause イベント内では、alert() などブラウザネイティブの機能を利用する処理が動作しない。処理が行われるのはアプリがフォアグラウンドに戻ってからとなる。

resume : アプリがフォアグラウンドに戻った時・スリープ解除した時

次は、アプリがホーム画面やアプリスイッチャーから選択されてフォアグラウンドに戻った時や、アプリをフォアグラウンドにしたままスリープし、スリープ解除してフォアグラウンドに戻った時に発火する Resume イベント。

別途 pause イベントを登録していた場合は、この resume イベントの前に実行される場合がある。

基本的な呼び方は pause イベントと同じだが、alert() などのブラウザネイティブ機能を利用する際は setTimeout() でラップしておく必要がある。タイムアウト値は 0 で良い。

document.addEventListener('resume', () => {
  setTimeout(() => {
    console.log('Resume!');
  }, 0);
});

【iOS 限定】resign : pause より細かくバックグラウンド移行を検知する

iOS で pause イベントを登録しておき、ホームボタンの2度押しでアプリスイッチャーを起動させると、ココでは pause イベントは発火しない。そこから別アプリを選択したり、ホーム画面に戻ったりして初めて pause イベントが発火する。

pause イベントよりも手前、アプリスイッチャーが開かれた時点でも「アプリがバックグラウンドに移行した処理」を行いたい場合は、iOS 限定の resign イベントを使うと良いだろう。

document.addEventListener('resign', () => {
  console.log('Resign!');
});

【iOS 限定】active : resume より細かくフォアグラウンド移行を検知する

resign イベントと対になるのが、active イベントだ。コチラも resume イベントよりも細かなタイミングでアプリがフォアグラウンドになったことを検知できる。

document.addEventListener('active', () => {
  console.log('Active!');
});