Page Visibility APIで現在のWEBページが開いているかどうか - なんちゃってウェブ系エンジニアの備忘録

JavascriptのPage Visibility APIを使うことで現在閲覧しているWEBページが
開いているかどうか確認することができる。

詳しいことは以下のサイトから参照
Page Visibility API の使用 - Web developer guide | MDN

利用シーンとしては･･･

ブラウザのタブ機能を利用して複数の動画を再生。結果的にサーバに負荷が掛かり、他の利用者に迷惑かけてしまう。
画像を順次表示しているサイトで、ユーザがページを見ていないのに次のスライドへ進むべきではないもの
ブラウザメールで、開いている時に数分毎メールサーバへ問い合わせを行い、新しいメールをチェックしたいとき
利用者から見えなくなっている（離れている）間はゲームを停止する

など･･･色々使えそうですね。

Page Visibility APIを利用すれば、Web ページが見えていないときに不要なタスクを実行しないようにすることができ、結果的にクライアントマシンのCPUやネットワークなどのハードウェアリソースの消費を抑えることができる。
ユーザーの視点をもってWEB開発していくことはどの時代においても重要になってくると思います。

ただ、Page Visibility APIが使えるブラウザについては、
IEの場合は10以上、FirefoxやChromeはほぼ実装となっており、
その辺を留意しておく必要があるかと思います。
対応ブラウザやバージョンは以下のURLからご確認していただけます。
Can I use... Support tables for HTML5, CSS3, etc

簡単でありますが、以下がJavascriptのサンプルです。
ユーザーがWEBページを見ている状態は、表示してからの秒数カウント。
別のブラウザや他ページ（最小化も含む）を見たときは秒数カウントを
一時停止するサンプルです。
その後ユーザーが戻ったときに秒数カウントを再開できます。

var timer = 0;
var PassSec = 0;
$(document).ready(function(){
  timer = setInterval(timeCount, 1000);
  if(document.addEventListener) {
  // ページの表示状態が変更されたときに常に発生するイベント。
  document.addEventListener("visibilitychange",visibilitychangeShow);
       };
});
function visibilitychangeShow() {
  // ドキュメントの可視性を表す値を取得する
  // [visible]ページのコンテンツは少なくとも部分的に可視状態
  // [hidden] ページのコンテンツはユーザから見えていない状態
  visibilitySet = document.visibilityState;
  if (visibilitySet == "visible") {
     timer = setInterval(timeCount,  1000);
  } else {
     clearTimeout(timer);
  }
}
function timeCount() {
   PassSec++;
   var msg = "表示してから" + PassSec + "秒が経過";
   document.title = msg
}

実際の動作は以下のURLからご確認していただけます。
http://owen11.web.fc2.com/visibility.html