KnowHub

ページ可視性 API

導入

場合によっては、開発者はユーザーがページから離れようとしていることを知る必要があります。一般的な方法は、次の 3 つのイベントをリッスンすることです。

  • ページ非表示
  • アンロード前
  • アンロード

ただし、これらのイベントは携帯電話ではトリガーされない場合があり、ページは直接閉じられます。携帯電話システムはプロセスをバックグラウンドに直接転送して強制終了できるためです。

  • ユーザーがシステム通知をクリックし、別のアプリに切り替えました。
  • ユーザーがタスク切り替えウィンドウに入り、別のアプリに切り替えます。
  • ユーザーがホーム ボタンをクリックしてホーム画面に戻ります。
  • オペレーティング システムは自動的に別のアプリに切り替わります (たとえば、電話がかかってきたときなど)。

上記の状況により、携帯電話はブラウザ プロセスをバックグラウンドに切り替え、リソースを節約するためにブラウザ プロセスが強制終了される可能性があります。

以前は、システムによってページが切り替えられることや、システムがブラウザのプロセスをクリアすることを監視することは不可能でした。また、開発者がページのアンロード時に実行されるコードを指定することもできません。この問題を解決するために、Page Visibility API が誕生しました。モバイルかデスクトップかに関係なく、この API はあらゆるケースでページの可視性の変更をリッスンします。

この新しい API の意義は、Web ページの可視性を監視することで Web ページのアンインストールを予測できるほか、リソースの節約や消費電力の抑制にも活用できることです。たとえば、ユーザーが Web ページの表示を停止すると、次の Web ページの動作を一時停止できます。

  • サーバーのポーリング
  • ウェブアニメーション
  • 再生中のオーディオまたはビデオ

document.visibilityState

この API は主に、document オブジェクトに新しい document.visibilityState プロパティを追加します。このプロパティは、ページの現在の表示状態を表す文字列を 3 つの可能な値とともに返します。

  • hidden: ページは完全に非表示になります。
  • visible: ページの少なくとも一部が表示されます。
  • prerender: ページがレンダリングされようとしているか、レンダリング中で非表示になっています。

このうち、「hidden」状態と「visible」状態はすべてのブラウザでサポートされなければなりません。 「プリレンダリング」状態は、「プリレンダリング」をサポートするブラウザでのみ表示されます。たとえば、Chrome ブラウザには、ユーザーが表示されていないときにページをプリレンダリングし、ユーザーが要求するまで待つことができるプリレンダリング機能があります。を参照するには、レンダリングされた Web ページを直接表示します。

ページが表示されている限り、たとえ角だけが露出していても、document.visibilityState プロパティは visible を返します。次の 4 つの状況の場合にのみ、「hidden」が返されます。

  • ブラウザは最小化されています。
  • ブラウザは最小化されていませんが、現在のページは背景ページに切り替わります。
  • ブラウザはページをアンロードします。
  • OS がロック画面をトリガーします。

ご覧のとおり、上記の 4 つのシナリオは、ページがアンロードされる可能性のあるすべての状況をカバーしています。言い換えれば、ページがアンロードされる前に、document.visibilityState プロパティは確実に hidden になります。実際、これがこの API を設計する主な目的です。

さらに、API の以前のバージョンでは、この属性には 4 番目の値「unloaded」もあり、ページがアンロードされようとしていることを示していましたが、現在はその値は放棄されています。

document.visibilityState プロパティはトップレベル ウィンドウ専用であることに注意してください。埋め込み <iframe> ページの document.visibilityState プロパティはトップレベル ウィンドウによって決定されます。 CSS プロパティ (display: none; など) を使用して <iframe> ページを非表示にしても、埋め込まれたページの可視性には影響しません。

document.hidden

歴史的な理由から、この API は document.hidden プロパティも定義します。このプロパティは読み取り専用で、現在のページが表示されているかどうかを示すブール値を返します。

「document.visibilityState」プロパティが「visible」を返す場合、「document.hidden」プロパティは「false」を返し、それ以外の場合は「true」を返します。

このプロパティは歴史的な理由からのみ保持されており、可能な限り、このプロパティの代わりに document.visibilityState プロパティを使用する必要があります。

可視性変更イベント

document.visibilityState プロパティが変更されるたびに、visibilitychange イベントがトリガーされます。したがって、(document.addEventListener() メソッドまたは document.onvisibilitychange プロパティを介して) このイベントをリッスンすることで、ページの可視性の変更を追跡できます。

document.addEventListener('visibilitychange', function () {
  // ユーザーが現在のページから離れました
  if (document.visibilityState === 'hidden') {
    document.title = 'ページが非表示';
  }

  // ユーザーがページを開くか、ページに戻ります
  if (document.visibilityState === 'visible') {
    document.title = 'ページが表示されます';
  }
});

上記のコードは、可視性の変化を監視できるページ可視性 API の最も基本的な使用法です。

ページが表示されなくなったときにビデオ再生を一時停止する別の例を次に示します。

var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);

関数 startStopVideo() {
  if (document.visibilityState === 'hidden') {
    vidElem.pause();
  else if (document.visibilityState === 'visible') {
    vidElem.play();
  }
}

ページのアンインストール

ページのアンロードを正しく監視する方法について具体的に説明します。

ページのアンロードは 3 つの状況に分類できます。

  • ページが表示されている間に、ユーザーがタブまたはブラウザ ウィンドウを閉じます。
  • ページが表示されると、ユーザーは現在のウィンドウの別のページに移動します。
  • ユーザーまたはシステムがブラウザ ウィンドウを閉じると、ページは表示されません。

これら 3 つのケースでは、「visibilitychange」イベントがトリガーされます。最初の 2 つのケースでは、ユーザーがページを離れたときにイベントがトリガーされ、最後のケースでは、ページが表示から非表示に変化したときにイベントがトリガーされます。

visibilitychange イベントは、pagehide、beforeunload、および unload イベントよりも信頼性が高く、あらゆる状況 (visible から hidden) でトリガーされることがわかります。したがって、次の 3 つのイベントをリッスンせずに、このイベントをリッスンして、ページのアンロード時に実行する必要があるコードを実行することのみが可能です。

「unload」イベントはいかなる状況でも監視する必要はなく、「beforeunload」イベントに適用できるシナリオは 1 つだけです。つまり、ユーザーがフォームを変更し、フォームを送信せずに現在のページを離れることです。一方、これら 2 つのイベントのリスニング関数が指定されている場合、ブラウザーは現在のページをキャッシュしません。

参考リンク

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章