【JS】タブがバックグラウンドになったイベントを取得する

イベントの取得方法

その１、visibilitychange

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    console.log("コンテンツが表示された");
  }

  if (document.visibilityState === "hidden") {
    console.log("コンテンツがバックグラウンドになった");
  }
});

🙆‍♂️ ナイス

• PC, Android, iPhone(safari, chrome)すべてタブ切り替えで発火する
• SP で別アプリやホーム画面への行き来で発火する

🙅‍♂️ イマイチ

• Mac で、同じデスクトップ内の別アプリケーションに切り替えても発火しない

その２、focus, blur

window.addEventListener("focus", () => {
  console.log("コンテンツが表示された");
});
window.addEventListener("blur", () => {
  console.log("コンテンツが非表示になった");
});

🙆‍♂️ ナイス

• Mac の同じデスクトップ内でも、別アプリケーションに移動すれば blur が発火する
• PC, Android, iPhone(safari, chrome)すべてタブ切り替えで発火する

🙅‍♂️ イマイチ

• スマホで別アプリやホーム画面から戻ってくると focus が発火しない

まとめ

visibilitychange と、focus, blur 両方使えば完璧そう

if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)) {
  // mobile
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      console.log("コンテンツが表示された");
    }

    if (document.visibilityState === "hidden") {
      console.log("コンテンツがバックグラウンドになった");
    }
  });
} else {
  window.addEventListener("focus", () => {
    console.log("コンテンツが表示された");
  });
  window.addEventListener("blur", () => {
    console.log("コンテンツが非表示になった");
  });
}