アプリケーションのバックグラウンドとフォアグラウンドが切り替わる時のイベント

Question

Monacaアプリでアプリケーションがバックグラウンドになるとき（例えばiPhoneならばホームボタンを押したときなど）に何らかの処理を行いたいのですが、そういったイベントを取得する方法はありますか。

また、バックグラウンドから復帰する際にも処理を行いのですが、そういった方法はありますか。
<ons-page>のshowイベントがそれに近いのかな、と思ってやってみましたが、バックグラウンドから復帰する時には発火しませんでした。

document.addEventListener('show', function(event) {
  //何らかの処理
}, false);

Answer 1

Androidでビルドして確認しましたが、バックグラウンドになる場合、pauseイベントが発火します。
フォアグラウンドになる場合、resumeイベントが発火します。

pauseイベント

resumeイベント

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  document.addEventListener("pause", function () {
    console.log("pause");
  }, false);
  document.addEventListener("resume", function () {
    console.log("resume");
  }, false);
}

Comments

[nomori7010]

まさにこのイベントでした。
ありがとうございました！

[oikashinoa]

otak-labさんの回答は素晴らしいですね。
回答に書かれていたpauseイベント/resumeイベントにリンク先には、iOS 限定ですがもう少し細かいeventがあるそうです。日本語訳がわかりにくかったので、以下の方が参考になるかと。

[Cordova アプリでバックグラウンド移行時やフォアグラウンド移行時に処理を行う - Corredor](https://neos21.hatenablog.com/entry/2017/12/01/080000)

[nomori7010]

リンク大変参考になります。
iOS限定のイベントも今後使えそうです。
ありがとうございます。

Answer 2

スマホからなので簡単に&試してません。

以下が使えるかも。各ページに仕掛ける必要があるかも。
https://developer.mozilla.org/ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

Comments

[nomori7010]

ありがとうございます。
こういったイベントも有るのですね。勉強になります。
ただ、こちらはmonaca上ではうまく発火しませんでした。