Clever Geek Handbook

Page Visibility APIおよびVisibility.js

シュレーデインガー猫



Page Visibility APIはJavaScriptの新しいAPIであり、ユーザーがサイトを見るか、たとえば別のタブを開いたかを確認できます。



このAPIを使用すると、Webがより使いやすくなり、快適になりますか？ まあ最も明白な：



Page Visibility APIの操作をより便利にするために、私は（ 邪悪な火星人の栄光のために） Visibility.jsライブラリを開発しました。 ベンダープレフィックスを忘れて、高レベルの関数に「シュガー」を追加して短いクリーンなコードを記述できます（たとえば、 Visibility.every



はsetInterval



に類似していsetInterval



が、サイトが開いているタブにある場合のみ機能します）。



ページが見えなくなったときにビデオを停止するビデオプレーヤーの良い例 （Google Chrome 13で開きます）。



ブラウザのサポート



Page Visibility APIがGoogle Chrome 13およびIE 10でサポートされるようになりました。Firefox5以降では、Page Visibilty APIをエミュレートするprivate_faceからMozVisibilityハックがあります（このハックはVisibility.jsの前にページに接続する必要があります）。



W3C Page Visibility API標準のドラフトが既に存在するため、他のブラウザーでのサポートは時間の問題です。



ただし、すべてのユーザーのブラウザがこのAPIをサポートしている必要はまったくありません。単なる改善であり、 <video>



などの新しい機能の追加ではありません。 サポートがある場合、ユーザーにとってより便利になります。そうでない場合、サイトは通常のサイトのように機能し、ユーザーは常にサイトを表示すると考えます。 Visibility.jsの高レベル関数は特別に作成されているため、開発者はAPIのサポートがあるかどうかについて考えることができません。



州



現在、標準には4つのページ可視性状態があります。



そして、別の状態が標準に追加されたときに何が起こるか、そしてサイトがユーザーに見えるかどうかを確認する必要があります。 これを行うには、 document.hidden



プロパティ（ベンダープレフィックスを忘れないでください。Chromeではdocument.webkitHidden



になりdocument.webkitHidden



）またはVisibility.hidden()



メソッドがあります。 サイトが表示されているかどうかを確認する必要がある場合は、このプロパティを使用し、状態の名前を"hidden"



と比較しないでください。



Visibility.js



ベンダープレフィックスのチェックの束で低レベルのコードを怖がらないように、Visibility.jsの例を使用してすぐにPage Visibility APIを操作する方法を示します。記事の最後で、API標準の低レベルメソッドについて説明します。



ライブラリコードはユニットテストで完全にカバーされ、文書化されており、ライブラリはロシアグルーポンですでに正常に使用されています。 圧縮バージョンでは、わずか1 KBの重さですが、余分なコードの束からあなたを救います。



Visibility.every


Visibility.every(interval, callback)



はsetInterval(callback, interval)



に類似していsetInterval(callback, interval)



が、ユーザーがページを表示した場合にのみcallback



開始します。



たとえば、ユーザーにページが表示されたときにのみカウントダウンアニメーションを表示します。 

 Visibility.every(1000, function() { updateCountdownAnimation(); });




Visibility.every(visible, hidden, callback)



は2時間間隔をとることができます-ページがユーザーに表示されるときは可視、 hidden



時には非表示になります。



たとえば、ユーザーがサイトを開くたびに新しいメッセージをチェックできます（つまり、ユーザーにとって重要です）。 また、ユーザーがサイトを表示しない（別のページを読む）場合、トラフィックを保存し、5分ごとにメールをチェックします。 

 var minute = 60 * 1000; Visibility.every(minute, 5 * minute, function () { checkForEmail(); });




しかし、一般的にミリ秒単位で時間を示します-人のm笑。 したがって、Visibility.jsはjQuery Chronoプラグインとの統合をサポートします （Visibility.jsの前に接続する必要があります）。 コードが明確になり、甘く甘くなります： 

 Visibility.every('minute', '5 minutes', function () { checkNewMails(); });




Visibility.every



を使用して開始されたタイマーを停止するには、 Visibility.stop(timerID)



を使用する必要があります（ clearInterval



は機能しません）。 

 var slideshow = Visibility.every(5 * 1000, function () { nextSlide(); }); $('.stopSlideshow').click(function () { Visibility.stop(slideshow); });




ブラウザーがPage Visibility APIをサポートしていない場合、 Visibility.every



はユーザーが常にサイトを見ると想定します（つまり、 setInterval



完全な類似物になりsetInterval



、悪いことは何も起こりません）。



Visibility.onVisible


別の標準的な状況は、ユーザーがサイトを見るまで待つときです（たとえば、バックグラウンドタブでリンクを開いたため）。 これを行うには、ページが表示されたときにのみコードを実行するVisibility.onVisible(callback)



メソッドがあります。 ページがすでに表示されている場合、 callback



すぐcallback



呼び出されます。



たとえば、サイトにアクセスすると、何らかの通知が表示され、10秒後にそれが美しく表示されます。 ただし、ユーザーがバックグラウンドタブですぐにサイトを開いた場合、通知をスキップできます。 ユーザーが実際にサイトを閲覧してから10秒後にカウントダウンします。 

 Visibility.onVisible(function () { setTimeout(function() { Notification.hide(); }, 10 * 1000); });




ブラウザがPage Visibility APIをサポートしていない場合、 Visibility.onVisible(callback)



はすぐにコールcallback



を呼び出しcallback



。



Visibility.afterPrerendering


Firefoxには rel="prefetch"



rel="prefetch"



は、ユーザーが後でこのリンクを開く可能性が高いことをブラウザーに伝えるため、ブラウザーはそのコンテンツをプリロードします。 これは、たとえば記事の次の章をダウンロードしたり、検索結果の最初の結果を得るために必要です。



Google Chromeはさらに進んで rel="prerender"



rel="prerender"



-ロードするだけでなく、事前にページをレンダリングしてすぐに開くことができます（Googleのビデオ例）。



ただし、ページがレンダリングされない場合、多くの制限があります。 AJAXリクエストの作成、オーディオまたはビデオの投稿、ポップアップのオープン、重い計算の実行は禁止されています。 さらに、ユーザーが実際にサイトを開くまで、ユーザーを統計に考慮しないことをお勧めします。



これらのすべてのタスクにはVisibility.afterPrerendering(callback)



がありVisibility.afterPrerendering(callback)



。これは、ページが実際に開いたときにのみcallback



実行しcallback



（つまり、事前レンダリング状態を終了します）。 callback



AJAXを介して自動更新を有効にし、 <video>



ページに追加して、統計でユーザーをカウントできます。 



 Visibility.afterPrerendering(function () { Statistics.countVisitor(); });




ブラウザがPage Visibility APIまたは事前レンダリングをサポートしていない場合、 Visibility.afterPrerendering(callback)



はすぐにコールcallback



を呼び出しcallback



。



低レベル関数


上記の例のすべての「砂糖」がどのように機能するかを理解したい場合、またはより複雑なことをしたい場合は、Visibility.jsの低レベル関数が必要になります。 すぐに、Page Visibility APIの仕組みを示します。



ブラウザがPage Visibility APIをサポートしている場合、 Visibility.isSupported()



はtrue



返します。 Page Visibility APIをサポートしていないブラウザーは簡単に認識できます-document.hidden undefined



を持ち、 true



またはfalse



ではありません（例えば、 document.webkitHidden



などのベンダープレフィックスがあることに注意してください）。



Visibility.state()



は、状態の名前（ "visible"



、 "hidden"



または"prerenderer"



）を返します。 このメソッドは、ベンダープレフィックス（ document.webkitVisibilityState



）を考慮して、 document.visibilityState



プロパティを単純に調べます。 固定する小さな例： 

 if( Visibility.isSupported() ) { if ( 'hidden' == Visibility.state() ) { Statistics.userOpenPageInBackgroundTab(); } if ( 'prerender' == Visibility.state() ) { Statistics.pageIsPrerendering(); } })




ユーザーにページが表示されるかどうかを確認するだけの場合は、 Visibility.hidden()



を使用することをお勧めします（状態のリストは将来補充される可能性があるため）。 document.hidden



プロパティを調べるだけです。 次の例は、ページがアクティブなタブですぐに開く場合にのみ、新しい背景ではなくビデオの自動再生を有効にします。 

 $(document).load(function () { if ( !Visibility.hidden() ) { VideoPlayer.play(); } });




ページの状態を監視するために、 document



にはvisibilitychange



イベント（Chromeではwebkitvisibilitychange



）があります。 Visibility.change(callback)



はもっと短い方法がありVisibility.change(callback)



メソッドはイベントハンドラー自体をハングさせ、ページの可視性が変わるたびにコールcallback



を呼び出しcallback



。 callback



の最初の引数はイベントオブジェクトになり、2番目は状態の名前になります。 例： 

 Visibility.change(function (e, state) { Statistics.trackChangeVisibility(state); });




設置




参照資料





More articles:


All Articles