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 仕様の現在のバージョンでは、2 つのドキュメント プロパティが定義されています。ブール値の hidden と列挙型の visibilityState です。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 は、そのパズルの重要なピースです。リソースを意識したウェブ アプリケーションの構築について詳しくは、パフォーマンスに関するその他の記事をご覧ください。

外部リファレンス