JavaScript: gestire la visibilità dei tab dei browser

L'evento visibilitychange è stato introdotto con le relative API del W3C per gestire la visibilità dei tab dei browser. Questo evento si innesca quando un altro tab viene aperto nel browser ed il tab corrente passa in secondo piano.

L'evento si usa in questo modo:

document.addEventListener( "visibilitychange", function() {
  var visibility = document.visibilityState;
  console.log( visibility ); // hidden, visible, prerender
});

Il valore prerender indica una fase intermedia della visibilità di un tab. Questo evento in genere si usa in tandem con la proprietà booleana document.hidden:

document.addEventListener( "visibilitychange", function() {
	var video = document.querySelector( "#movie" );
  	if( document.hidden ) {
  		video.pause();
  	} else {
  		video.play();
  	}
});

I browser, tranne le più recenti versioni di Firefox, usano i loro prefissi sia per questo evento che per la loro proprietà. Quindi:

var hidden, visibilityChange; 

if ( typeof document.hidden !== "undefined" ) {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if ( typeof document.mozHidden !== "undefined" ) {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if ( typeof document.msHidden !== "undefined" ) {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if ( typeof document.webkitHidden !== "undefined" ) {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

document.addEventListener( visibilityChange, function() {
	var video = document.querySelector( "#movie" );
  	if( document[hidden] ) {
  		video.pause();
  	} else {
  		video.play();
  	}
});