Hace unos años, había navegadores que no contaban con la característica de la navegación por pestañas, pero hoy en día, si nos fijamos en todos los navegadores disponibles, podemos ver que ya, todos los navegadores lo ofrecen. Al ser un programador, normalmente tengo unas 10-15 pestañas abiertas a la vez, y en algunos momentos ese número puede subir por encima de 25-30 pestañas.
¿Por qué esta API?
Antiguamente, no era posible determinar qué pestaña estaba activa y cuál no, pero con la ayuda de la Page Visibility API de HTML5, podemos detectar si nuestro visitante está navegando en nuestro sitio web o no.
En este tutorial vamos a entender cómo tratar con la Page Visibility API de HTML5 y, a través de una demostración sencilla, vamos a comprobar el estado de nuestra página. En esta demo modificaremos el título del documento basándonos en el estado de visibilidad de la página.
Comprobar el estado de visibilidad de la página
Con el lanzamiento de esta API hemos recibido dos nuevas propiedades document, que cuentan con diferentes funciones. La primera de ellas es document.visibilityState y la segunda es document.hidden.
document.visibilityState tiene cuatro valores diferentes, que son los siguientes:
- hidden: La página no es visible en cualquier pantalla
- prerender: La página se carga off-screen y no es visible para el usuario
- visible: La página es visible
- unloaded: La página está cargada (el usuario está navegando en otra página que no es tu página)
document.hidden es una propiedad booleana, que se establece en false si la página es visible y en true si, por el contrario, está oculta.
Ahora podemos controlar cómo se comportarán los sitios cuando nuestra página web esté oculta para el usuario.
Ya hemos conocido las distintas propiedades sobre disponibilidad de nuestra página, pero también es importante detectar el evento para que puedas ser notificado con cada cambio de condición de la visibilidad de la página. Esto se realiza mediante el evento visibilitychange. Vamos a ver una pequeña demostración de cómo hacer frente a este evento.
document.addEventListener('visibilitychange', function(event) {
if (!document.hidden) {
// The page is visible.
} else {
// The page is hidden.
}
});
Este código es simplemente un ejemplo básico de la utilización de este evento para descubrir el estado actual de la página web. Aún así, debo decirte que estas propiedades y métodos deben ser usadas con el prefijo del navegador, ya que muchas son específicas. Ahora vamos a ver el mismo código de manera que sea compatible con todos los navegadores:
// Get Browser-Specifc Prefix
function getBrowserPrefix() {
// Check for the unprefixed property.
if ('hidden' in document) {
return null;
}
// All the possible prefixes.
var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];
for (var i = 0; i < browserPrefixes.length; i++) {
var prefix = browserPrefixes[i] + 'Hidden';
if (prefix in document) {
return browserPrefixes[i];
}
}
// The API is not supported in browser.
return null;
}
// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
if (prefix) {
return prefix + 'Hidden';
} else {
return 'hidden';
}
}
// Get Browser Specific Visibility State
function visibilityState(prefix) {
if (prefix) {
return prefix + 'VisibilityState';
} else {
return 'visibilityState';
}
}
// Get Browser Specific Event
function visibilityEvent(prefix) {
if (prefix) {
return prefix + 'visibilitychange';
} else {
return 'visibilitychange';
}
}
Tenemos todas las propiedades del navegador y el evento con el prefijo puestos. Ya estamos listos. Ahora vamos a cambiar nuestro anterior código en consecuencia.
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
document.addEventListener(visibilityEvent, function(event) {
if (!document[hidden]) {
// The page is visible.
} else {
// The page is hidden.
}
});
¿Dónde puedo utilizar esta API?
Existen un sinfín de diferentes escenarios en los que podemos considerar el uso de esta API.
Imagínate que estás en el dashboard de un sitio web y en dicho dashboard no ofrecen noticias y artículos que son alimentados por un feed RSS que se actualiza pasados unos cuantos minutos. Lo más óptimo sería, aprovechando esta API, que el feed unicamente se actualizase cuando la página esté visible para el usuario.
Para un slider de imágenes. Podemos limitar el movimiento de las imágenes del slide cuando la página esté oculta.
De una manera similar, podemos mostrar notificaciones HTML sólo cuando la página está oculta para el usuario.
Hasta aquí hemos visto solamente la teoría para utilizar la Page Visibility API de HTML5, pero creo que es el momento de entrar en acción.
Demo
El HTML
<!-- This element will show updated count -->
<h1 id="valueContainer">0</h1>
El Javascript
<script type="text/javascript">
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
var timer = null;
function increaseVal() {
var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
$('#valueContainer').text(newVal);
document.title = newVal + ': Running';
timer = setTimeout(function() {
increaseVal();
}, 1);
}
// Visibility Change
document.addEventListener(visibilityEvent, function(event) {
if (document[hidden]) {
clearTimeout(timer);
var val = parseInt($('#valueContainer').text());
document.title = val + ': Pause';
} else {
increaseVal();
}
});
increaseVal();
</script>
Me gustaría decir que esta API es una muy buena API, a pesar de incluir sólo dos propiedades y un evento. De esta manera, puedes integrarla fácilmente en tu aplicación y mejorar enórmemente la experiencia del usuario. En última instancia, ahora podemos controlar cómo se comportarán los sitios cuando nuestra página web esté oculta para el usuario.
Fuente: Avinash Zala