Geekly Articles each Day

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); });


設置


参照資料


Source: https://habr.com/ru/post/J125833/

More articles:


All Articles