Page Visibility API es otra de las características de HTML 5 que, sin duda, es digna de mención 🙂 Hasta ahora, cuando desarrollábamos una aplicación web teníamos que asegurarnos de que siempre estaba lista y actualizada, incluso si el usuario no tenía la ventana visible en ese momento.

¿Cuál es el objetivo de Page Visibility?

Dicha especificación define que los desarrolladores serán capaces de determinar cuándo un usuario está visualizando o no la aplicación web, con el objetivo de minimizar los esfuerzos por el sitio mientras el usuario no esté prestando atención (o como hace Facebook, indicar cuándo un usuario ha leído los mensajes que tenía pendientes :P). Esta nueva funcionalidad cambia totalmente la forma de trabajar con nuestro sitio web, ya que tenemos más capacidad para mejorar tanto la concurrencia en nuestro servidor, como el proceso que debamos gestionar en cliente 😀

Como es habitual, he creado un pequeño ejemplo para que veamos su funcionamiento:

En él, lo que hago es cargar un archivo de audio y mostrar un pequeño registro de cada vez que el usuario oculta la ventana. Asimismo cada vez que esta ventana del navegador se minimice o se cambie de pestaña dentro del navegador la música comenzará a sonar. Ahora veamos el código:

function log(msg){
    var output = document.getElementById("output");
    output.innerHTML += "<li>" + msg + "</li>";
}
window.onload = function() {
    var hidden, visibilityState, visibilityChange;
    var music = document.getElementById("music");

    if (typeof document.hidden !== "undefined") {
        hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
    }
    else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState";
    }
    else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
    }
    else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState";
    }
    document.addEventListener(visibilityChange, function() {
        log("hidden: " + document[hidden]);
        log(document[visibilityState]);
        switch (document[visibilityState]) {
        case "visible":
            music.pause();
            break;
        case "hidden":
            music.play();
            break;
        }
    });
    log("hidden: " + document[hidden]);
    log(document[visibilityState]);
};​

Lamentablemente, esta es una de las APIs que necesitamos compatibilizar con cada uno de los navegadores. Para poder trabajar con ella, es necesario ser conciente de las siguiente variables: hidden, visibilityState y visibilitychange.

hidden nos devolverá true cuando el documento esté totalmente oculto y false si como mínimo una parte del mismo está visible. Según la especificación oficial estos serían los siguientes supuestos:

Se retornará true cuando:

• La ventana esté minimizada.
• La ventana no esté minimizada pero esté en una pestaña en segundo plano.
• El sistema operativo esté mostrando la pantalla de bloqueo.
• La ventana esté minimizada y se esté mostrando una vista preliminar de la misma.

Por otro lado se retornará false en los siguientes casos:

• La ventana no está minimizada y la página está en primer plano.
• La página no se está visualizando como tal porque se está viendo a través de alguna herramienta, como un zoom, pero está siendo mostrada.

visibilityState nos indicará exactamente el estado de la página: hidden, visible, preview (opcional), prerender (opcional)

Por último, el evento visibilitychange nos dará la oportunidad de capturar cada vez que visibilityState sufra modificaciones a consecuencia de las acciones del usuario. En este ejemplo, capturo dicho evento para conocer el estado de la página y reproducir el audio o no.

Esta característica está disponible en Internet Explorer 10, Chrome 14+, Opera 12.10+, Firefox 10+ y, lamentablemente, se nos cae Safari 🙁

A través de este enlace podéis acceder al ejemplo completo.

Espero que os haya sido de utilidad 🙂