Page Visibility API を使用する

Ernest Delgado
Ernest Delgado
X

はじめに

ウェブ デベロッパーは、より魅力的でインタラクティブなウェブページを作成できる新しいテクノロジーに興味を持ちがちです。WebGL による 3D グラフィックはい。WebAudio の高度な音声機能は利用できますか？わかりました。ウェブカメラとマイクを利用するリアルタイム コラボレーション アプリケーション登録する

あまり目立たないものの、同様に重要な技術として、より効率的に動作し、全体的なユーザー エクスペリエンスを向上させるアプリケーションを構築できる技術があります。ここで役立つのが PageVisibility などの API です。

Page Visibility API は、シンプルながら重要な機能を実行します。ページがユーザーに表示されているかどうかをアプリケーションに知らせます。この基本的な情報により、表示されていないときに動作が異なるウェブページを作成できます。いくつかの例を検討しましょう。

  • サーバーから情報を取得するウェブページは、アクティブに表示されていないと更新サイクルが遅くなることがあります。
  • 回転する画像カルーセルや動画/音声コンテンツを表示するページは、ユーザーがページを再度表示するまで一時停止できます
  • アプリは、ビューから非表示になっている場合にのみ、ユーザーに通知を表示するように決定できます。

一見、この API はユーザーの利便性以外にあまり役に立たないように思えますが、モバイルウェブ ブラウジングの急増を考えると、デバイスのバッテリーを節約できるものはすべて重要になります。PageVisibility API を使用すると、ユーザーのデバイスの消費電力を抑えて、デバイスの寿命を延ばすことができます。

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

API 仕様（執筆時点では候補推奨段階）には、ドキュメントの公開状態を検出するプロパティと、公開状態の変更に応答するイベントの両方が用意されています。

このチュートリアルでは、API の基本と、実用的な例に適用する方法について説明します（急いでいる場合は、実用的な例に進んでください）。

ドキュメントの公開設定プロパティ

PageVisibilityAPI 仕様の現在のバージョンでは、ブール値 hidden と列挙型 visibilityState の 2 つのドキュメント プロパティが定義されています。現時点では、visibilityState プロパティの値は hidden、visible、prerender、unloaded の 4 つです。

ご想像のとおり、ドキュメントがまったく表示されていない場合、hidden 属性は true を返します。通常、これはドキュメントが最小化されているか、バックグラウンド タブにあるか、OS のロック画面が表示されている場合などを意味します。ドキュメントの一部が少なくとも 1 つのディスプレイに部分的に表示されている場合、この属性は false に設定されます。また、ユーザー補助ツールに対応するため、画面拡大ツールなどのツールでドキュメントが完全に隠されているが、ドキュメントのビューが表示されている場合は、hidden 属性を false に設定できます。

ベンダー接頭辞の処理

ベンダー固有の接頭辞に注目せずにコードに集中するため、ヘルパー関数を使用してブラウザ固有の部分を分離します。Android 4.4 ブラウザのサポートを終了したら、この部分を削除して標準名に従うことができます。

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

ドキュメント プロパティの例

これで、ドキュメントが表示されているかどうかを確認するクロスブラウザ関数 isHidden() を記述できます。

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

ドキュメントの可視性をより詳細に把握するには、visibilityState プロパティを使用します。このプロパティは、次の 4 つの値のいずれかを返します。

  • hidden: ドキュメントが完全に非表示になっている
  • visible: 少なくとも 1 台のディスプレイ デバイスで書類の一部が見える
  • prerender: ドキュメントは画面外に読み込まれ、表示されません（この値は省略可能です。すべてのブラウザでサポートされているとは限りません）。
  • unloaded: ドキュメントがアンロードされる場合は、この値が返されます（この値は省略可で、すべてのブラウザでサポートされているわけではありません）。

VisibilityChange イベント

visibility プロパティに加えて、ドキュメントの公開設定が変更されるたびに発生する visibilitychange イベントがあります。このイベントのイベント リスナーは、ドキュメント オブジェクトに直接登録できます。

イベントの例

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

概要

優れたウェブ アプリケーションを構築するには、ユーザーが見て操作できる、目を見張るような魅力的な機能を使用することだけではありません。優れたアプリは、ユーザーのリソースと注意を配慮して使用します。Page Visibility API は、そのパズルの重要なピースです。リソースに配慮したウェブ アプリケーションの構築について詳しくは、パフォーマンス関連のその他の記事をご覧ください。

外部参照