Page Visibility API を使用する

Ernest Delgado
Ernest Delgado
X

はじめに

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

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

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

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

最初は、この API はユーザーにとって便利とは思えませんが、モバイルウェブ ブラウジングの大幅な増加を考慮すると、デバイスのバッテリー消費を節約するためのものが非常に重要になります。PageVisibility API を使用することで、サイトでユーザーのデバイスの消費電力を抑え、バッテリーを長持ちさせることができます。

対応ブラウザ

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

ソース

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 は、そのパズルの重要なピースです。リソースに配慮したウェブ アプリケーションの構築について詳しくは、パフォーマンス関連のその他の記事をご覧ください。

外部リファレンス