ページの可視性APIの紹介

コアポイント

• ページの可視性APIを使用すると、Webサイト開発者はページの現在の可視性ステータスを決定し、特にリソースが限られているモバイルデバイス向けに、強力でCPU効率の高いWebアプリケーションの開発に役立ちます。
• APIには、「visibilitychange」と呼ばれるイベントと2つの読み取り専用プロパティ「非表示」と「VisitibilityState」が含まれています。これには、ページが表示されているか、非表示、事前にレンダリングされているか、またはアンインストールされようとしているかどうかを示します。
• ページの可視性APIは、一般にすべてのブラウザーによってサポートされていません。サポートするブラウザは、ベンダーのプレフィックスを使用することが多いため、潜在的な互換性の問題が発生します。目に見える.jsやisvis.jsなどのポリフィルを使用して、このAPIをサポートしていないブラウザー間のギャップを埋めることができます。
• PAGE APIの実用的なユースケースは、ユーザーがタブを切り替えるときにビデオまたはオーディオの再生を停止し、帯域幅を記録してユーザーエンゲージメントを追跡します。

モバイルデバイスはクールで、モバイルアプリはクールです。残念ながら、ほとんどの場合、モバイル接続は遅いか帯域幅が限られているため、悪いものです。特にユーザーがページを表示していない場合、ユーザーリソースを無駄にしないリッチなWebアプリケーションを持っていることは素晴らしいことです。この記事では、ページの可視性APIを使用して、これやその他の問題を部分的に解決する方法を示します。過去数年にわたって、Geolocation API、ナビゲーションタイミングAPI、フルスクリーンAPIなど、毎日の作業を行うのに役立ついくつかの新しいAPIが導入されてきました。ページの可視性API [ Webサイト開発者が、強力でCPU効率の高いWebアプリケーションを開発するために、ページの現在の可視性ステータスをプログラム的に決定できるようにするメソッドを定義します]。 2012年7月26日以来、W3C候補の推奨事項になっているため、安定していると見なされます。最初に興味があるかもしれないことは、パフォーマンスを改善し、帯域幅を節約する方法です。 5秒ごとにデータをやり取りする優れたAJAXベースのWebアプリケーションがあると想像してください。アプリケーションの実行中にユーザーがブラウザタグを背景に送信すると、5秒ごとにデータが送信されます。10分後にユーザーがタグをフォアグラウンドに配置する場合も同じです。アプリケーションが更新を遅くしたり、ユーザーが再びページをチェックするまで更新を停止したりする場合は、それはいいことではないでしょうか？これは、リソースの最適化がある場所であり、ページの可視性APIが重要な役割を果たします。

ページの可視性APIの構成

これらのAPIは非常にシンプルです。実際、DivivibilityChangeと呼ばれる1つのイベントと、Documentに属する2つの読み取り専用プロパティと2つの読み取り専用プロパティがあります。 「隠された」はブール値です。ページが表示されない場合（最小の部分でさえ）、通常、タグが背景にあるとき、またはブラウザが最小化されるときに発生します。このルールには、フルスクリーンモードで実行されるアクセシビリティツールにいくつかの例外があることに注意してください。詳細については、隠された仕様を読むことができます。 「VisibilityState」は、ドキュメントの現在の状態を指定し、次の値を含む列挙です。

非表示：ドキュメントは完全に見えません
可視：ドキュメントまたはその一部が表示されます
プレレンダー：ドキュメントは画面外にロードされており、見えない
アンロード：ドキュメントはアンインストールされようとしています

最後の2つの値プレレンダーとアンロードされた値はオプションであることに注意してください。さらに、隠された属性のように、支援技術の隠された価値にはいくつかの例外があります。

互換性

現在、これらのAPIをサポートするブラウザはあまりなく、これらのAPIをサポートするブラウザは引き続きベンダープレフィックスを使用しています。これにより、すべてのプレフィックスを管理するには、動作コードがあるため、サポートの問題が発生します。現在、ページの可視性APIをサポートするデスクトップブラウザーには、Chrome 13、Internet Explorer 10、Firefox 10、およびOpera Beta 12.10が含まれます。このAPIをサポートするモバイルブラウザには、Android 4.0のChromeとAndroidおよびSymbianのOpera Mobile 12.1が含まれます（Source MobileHtml5.org - Android 4.0で自分でテストしました）。わずかに迷惑なことは、CamelCase条約のために、属性にベンダープレフィックスがある場合、実際の属性名が大文字であり、プレフィックスがない場合はLowercaseです。明確にするために、隠された財産を例として取り上げましょう。小文字から始まることがわかりますが、プレフィックスがある場合は、大文字の文字「H」から始まり、サポートをテストするために、次のようなコードを記述することはできません。

以下に示すようにケースを分割するか、文字列にいくつかのトリックを使用する必要があります。

var browserPrefixes = ["", "webkit","moz","ms","o"];
for(var i = 0; i < browserPrefixes.length; i++) {
  if (document[browserPrefixes[i] + "hidden"] != undefined) {
    // here goes the code
    break;
  }
}

//テストされていないバージョンをテストします if（document.hidden！== undefined） //ここにコードを追加します それ以外 { //プレフィックスバージョンをテストします var browserprefixes = ["webkit"、 "moz"、 "ms"、 "o"]; for（var i = 0; i＆lt; browserprefixes.length; i）{ if（document [browserprefixes [i] "hidden"]！== undefined）{ //ここにコードを追加します 壊す; } } }

他のAPIと同様に、これらのAPIをサポートしていないブラウザーで使用するために、多数のポリフィルがリリースされています。これらのポリフィルの一部は、visible.jsおよびisvis.jsです。

（次のコンテンツは、元のコードスニペットと例の書き換えであり、関数を変更せず、コードの最適化と注釈の強化を維持します）

（元のテキストの長いコードの例と説明は、擬似オリジナルの目標と一致せず、長すぎるため、ここでは省略されています。必要に応じて、合理化されたコードの例を提供できます。）

結論

この記事では、ページの可視性APIの機能とそれらの使用方法を示しています。 W3Cスタッフがモバイルデバイス（リソースと接続帯域幅を節約するためだけでなく）を支援する意図は本当に賞賛に値します。また、すぐに広く利用できるようにしたいと思っています。

ご覧のとおり、これらのAPIは非常に単純で、2つのプロパティと1つのイベントのみがあるため、数分で使用してWebアプリケーションを改善することができます。

ただし、現在、ブラウザでサポートが不十分であるため、あまり信頼できないため、PolyFillを使用する必要があります。

JavaScript APIに興味がある場合は、SitePoint Networkの最新WebサイトのAPIセクションをご覧ください。JSPRO。

（元のテキストの長いFAQパーツは、擬似オリジナルの目標と一致せず、長すぎるため、ここでは省略されています。必要に応じて、合理化されたFAQの例を提供できます。） 🎜>

以上がページの可視性APIの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。