Introducción
Como desarrolladores web, solemos entusiasmarnos con las nuevas tecnologías que nos permiten crear páginas web cada vez más interactivas y atractivas. ¿Gráficos 3D con WebGL? Sí. ¿Funciones de audio avanzadas con WebAudio? Sin duda. aplicaciones de colaboración en tiempo real que utilizan la cámara web y el micrófono? ¡Cuenten conmigo!
Menos emocionantes, aunque igualmente importantes, son las tecnologías que nos permiten compilar aplicaciones que se ejecutan de manera más eficiente y proporcionan una mejor experiencia general del usuario. Aquí es donde entra en juego una API como PageVisibility.
La API de visibilidad de páginas realiza una función simple, pero importante: le permite a tu aplicación saber cuándo el usuario puede ver una página. Esta información básica permite la creación de páginas web que se comportan de manera diferente cuando no se visualizan. Considera los siguientes ejemplos:
- Una página web que recupera información de un servidor puede ralentizar su ciclo de actualización cuando no se la está viendo de forma activa
- Una página que muestra un carrusel de imágenes rotativo o contenido de video o audio puede pausarse hasta que el usuario vuelva a mostrar la página
- Una aplicación puede decidir mostrar notificaciones al usuario solo cuando está oculta.
Al principio, es posible que esta API no parezca muy útil más allá de la comodidad del usuario, pero teniendo en cuenta el enorme aumento de la navegación web móvil, todo lo que ayude a ahorrar batería en el dispositivo se vuelve muy importante. Al usar la API de PageVisibility, tu sitio puede ayudar al dispositivo del usuario a consumir menos batería y a durar más tiempo.
La especificación de la API, que en el momento de la redacción de este documento se encuentra en la etapa de recomendación potencial, proporciona ambas propiedades para detectar el estado de visibilidad del documento, así como un evento para responder a los cambios de visibilidad.
En este instructivo, explicaré los conceptos básicos de la API y te mostraré cómo aplicarla a algunos ejemplos prácticos (no dudes en pasar a ellos si eres del tipo impaciente).
Propiedades de visibilidad del documento
La versión actual de la especificación de PageVisibilityAPI define dos propiedades del documento: el booleano hidden y la enumeración visibilityState. Actualmente, la propiedad visibilityState tiene cuatro valores posibles: hidden, visible, prerender y unloaded.
Como es de esperar, el atributo oculto muestra el valor "true" cuando el documento no es visible en absoluto. Por lo general, esto significa que el documento se minimiza, en una pestaña en segundo plano, la pantalla de bloqueo del SO está activa, etc. El atributo se establece como falso si alguna parte del documento es, al menos, parcialmente visible en al menos una pantalla. Además, para adaptarse a las herramientas de accesibilidad, el atributo oculto se puede establecer como falso cuando una herramienta como una lupa oscurece por completo el documento, pero muestra una vista de él.
Trabaja con prefijos de proveedores
Para mantener el foco en el código en lugar de en todos los prefijos específicos del proveedor, voy a usar algunas funciones auxiliares para aislar los detalles específicos del navegador. Tan pronto como deje de ser compatible con el navegador Android 4.4, puedes eliminar esta parte y utilizar los nombres estándares.
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++){
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
Ejemplo de propiedades del documento
Ahora, podemos escribir una función en varios navegadores, isHidden(), para ver si el documento es visible.
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
Para obtener una vista más detallada de la visibilidad del documento, puedes usar la propiedad visibilityState. Esta propiedad muestra uno de cuatro valores:
hidden: El documento está completamente oculto.visible: El documento es al menos parcialmente visible en al menos una pantalla.prerender: El documento se carga fuera de la pantalla y no es visible (este valor es opcional; no necesariamente todos los navegadores lo admitirán).unloaded: Si se debe descargar el documento, se mostrará este valor (este valor es opcional y no necesariamente todos los navegadores lo admitirán).
Evento VisibilityChange
Además de las propiedades de visibilidad, hay un evento visibilitychange que se activa cada vez que cambia el estado de visibilidad del documento. Puedes registrar un objeto de escucha de eventos para este evento directamente en el objeto del documento:
Ejemplo de evento
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(evtname, visChange);
}
function visChange() {
var txtFld = document.getElementById('visChangeText');
if (txtFld) {
if (isHidden())
txtFld.value += "Tab Hidden!\n";
else
txtFld.value += "Tab Visible!\n";
}
}
Resumen
La creación de una aplicación web excelente implica mucho más que solo usar las funciones ingeniosas y llamativas que los usuarios pueden ver e interactuar con ellas. Una aplicación realmente excelente hace un uso considerado de los recursos y la atención del usuario, y la API de visibilidad de la página es una pieza importante de ese rompecabezas. Para obtener más información sobre la compilación de aplicaciones web que consideran los recursos, consulta nuestros otros artículos relacionados con el rendimiento.