このタブがアクティブか、JavaScriptから確かめる方法

いまユーザーはこのタブを見ているか？あるいは他のタブへ移動して(inactiveになって)しまったか？はたまたブラウザ自体からフォーカスが外れているか？こんなことをJavaScriptから確認(チェック)する術はないものかと調べてみると、あった！

Page Visibility API - Web APIs | MDN

addEventListenerやonイベントで状態を確認できるという。document.visibilityStateプロパティ(読み取り専用)からユーザーが見ている(visible)か見ていない(hidden)かも確認できる模様。

ただ、あまり古いブラウザへは対応していない様子なので、上記リンク(Page Visibility API - Web APIs | MDN)のExampleにはベンダープレフィックス付きAPIへのフォールバックに対応したコードが載っていた。

わたしは特にレガシーブラウザへの対応は不要であったため、次のようなコードで実装/対応できた。

if ( typeof document.hidden !== 'undefined' ) {
  document.addEventListener( 'visibilitychange', () => {
    if ( document.visibilityState === 'hidden' ) {
      console.log( 'ユーザーがどっかへ行ったよ' );
    }
    else {
      console.log( 'ユーザーが見てるよ！' );
    }
  }, false );
}

onblurやonmousemoveイベントやらでWatchdogのようなことをしていたあの頃がなつかしい…。

1577237283990730018 https://www.storange.jp/2022/10/page-visibility-api.html https://www.storange.jp/2022/10/page-visibility-api.html このタブがアクティブか、JavaScriptから確かめる方法 2022-10-27T18:09:00+09:00 https://www.storange.jp/2022/10/page-visibility-api.html Hideyuki Tabata Hideyuki Tabata 200 200 72 72