Cómo usar la API de visibilidad de páginas

Ernest Delgado

Introducción

Como desarrolladores web, nos entusiasman las nuevas tecnologías que nos permiten crear páginas web interactivas y atractivas. ¿Gráficos 3D con WebGL? Por supuesto. ¿Funciones de audio avanzadas con WebAudio? Sin duda. Aplicaciones de colaboración en tiempo real que usan la cámara web y el micrófono ¡Cuenten conmigo!

Menos emocionantes, pero 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 una página es visible para el usuario. Esta información básica permite crear páginas web que se comportan de manera diferente cuando no se están viendo. Considera algunos ejemplos:

• Una página web que recupera información de un servidor puede ralentizar su ciclo de actualización cuando no se está viendo de forma activa.
• Una página que muestra un carrusel de imágenes giratorias 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, esta API puede no parecer muy útil más allá de la conveniencia del usuario, pero, teniendo en cuenta el gran aumento en la navegación web móvil, todo lo que ayude a ahorrar batería del dispositivo se vuelve muy importante. Con el uso de la API de PageVisibility, tu sitio puede ayudar a que el dispositivo del usuario consuma menos energía y dure más.

La especificación de la API, que en el momento de escribir este artículo se encuentra en la etapa de recomendación de candidato, proporciona propiedades para detectar el estado de visibilidad del documento y un evento para responder a los cambios de visibilidad.

En este instructivo, explicaré los conceptos básicos de la API y mostraré cómo aplicarla a algunos ejemplos prácticos (no dudes en avanzar a ellos si eres de los impacientes).

Propiedades de visibilidad del documento

La versión actual de la especificación de PageVisibilityAPI define dos propiedades de documentos: el valor 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 verdadero cuando el documento no es visible en absoluto. Por lo general, esto significa que el documento está minimizado, en una pestaña en segundo plano, la pantalla de bloqueo del SO está activa, etcétera. El atributo se establece como "false" si alguna parte del documento es visible, al menos de forma parcial, 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, oculta completamente el documento, pero muestra una vista de él.

Cómo tratar con prefijos de proveedores

Para mantener el enfoque en el código en lugar de todos los prefijos específicos del proveedor, usaré algunas funciones auxiliares para aislar los aspectos específicos del navegador. En cuanto quites la compatibilidad con el navegador de Android 4.4, puedes quitar esta parte y usar los nombres estándar.

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 multinavegador, 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 los siguientes cuatro valores:

• hidden: El documento está completamente oculto.
• visible: El documento es al menos parcialmente visible en al menos un dispositivo de visualización.
• prerender: El documento se carga fuera de la pantalla y no es visible (este valor es opcional; no todos los navegadores lo admiten necesariamente).
• unloaded: Si se descargará el documento, se mostrará este valor (este valor es opcional; no necesariamente todos los navegadores lo admitirán).

El 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 compilación de una gran aplicación web implica mucho más que solo usar las funciones llamativas y atractivas que los usuarios pueden ver y con las que pueden interactuar. Una aplicación realmente excelente hace un uso considerado de los recursos y la atención del usuario, y la API de Page Visibility es una pieza importante de ese rompecabezas. Para obtener más información sobre cómo compilar aplicaciones web que tengan en cuenta los recursos, consulta nuestros otros artículos relacionados con el rendimiento.

Referencias externas

• Especificación de la API de PageVisibility del W3C
• Grupo de trabajo de rendimiento web
• Ejemplo de PageVisibility en IE10
• Visibility.js: Un polyfill para PageVisibility
• isVis: otro polyfill de PageVisibility