Krypton Solid

Creación de sitios con buen comportamiento con la API de visibilidad de la página

Creación de sitios con buen comportamiento con la API de visibilidad de la página

Todos estamos resignados a ello: al iniciar un navegador, se recargan todas las pestañas que tenías abiertas anteriormente, lanzando una mezcla cacofónica de sonido y video. Si bien los navegadores han facilitado el control de esta experiencia con iconos de pestañas y extensiones como MuteTab, para la mayoría de las personas este comportamiento presenta una experiencia confusa y desorientadora. Como desarrolladores y diseñadores es nuestro trabajo hacer que la web sea acogedora, no abrumador. ¿No tiene sentido que los sitios solo deberían estar activos cuando son la pestaña de enfoque principal? ¿Por qué quemamos las baterías y los ciclos del procesador con una animación que no se puede ver?

Todos estamos resignados a ello: al iniciar un navegador, se recargan todas las pestañas que tenía abiertas anteriormente, lanzando una mezcla cacofónica de sonido y video. Si bien los navegadores han facilitado el control de esta experiencia con iconos de pestañas y extensiones como MuteTab, para la mayoría de las personas este comportamiento presenta una experiencia confusa y desorientadora. Como desarrolladores y diseñadores, nuestro trabajo es hacer que la web sea acogedora, no abrumadora.

¿No tiene sentido que los sitios solo deberían estar activos cuando son la pestaña de enfoque principal? ¿Por qué quemamos las baterías y los ciclos del procesador con una animación que no se puede ver?

Otras lecturas en SmashingMag:

Afortunadamente, hay una solución: la API de visibilidad de página HTML5. Puede ver que se usa de manera particularmente efectiva en proyectos recientes de Active Theory, como su trabajo para Under Armour y Una nave espacial para todos: haga clic en otra pestaña y verá que la presentación multimedia se detiene y la música se desvanece. Este comportamiento tipifica lo que me gusta llamar la “web educada”: sitios que son considerados con la atención, el ancho de banda y las habilidades de los usuarios.

En el pasado, los desarrolladores han intentado crear este comportamiento agregando onblur() y onfocus() manipuladores de ventanas. Si bien son considerablemente mejores que nada, el enfoque está limitado por el hecho de que no puede decir si la ventana está realmente oculta para el usuario. Por ejemplo, tener dos ventanas de navegador una al lado de la otra y cambiar entre ellas aún se registraría como onblur() o onfocus(), aunque el contenido de cada uno permanece perfectamente visible.

Implementar la visibilidad de la página

Si bien existen muchas posibilidades para usar la API de visibilidad de la página, quizás el caso de uso más obvio es cuando una página contiene video: por lo general, no tiene mucho sentido continuar reproduciendo contenido de video si el usuario no puede verlo.


<video autoplay controls id="videoElement">
    <source src="https://www.smashingmagazine.com/2015/01/creating-sites-with-the-page-visibility-api/rar.mp4">
    <source src="rar.webm">
</video>

<script>
var videoElement = document.getElementById("videoElement");
document.addEventListener("visibilitychange", function() {
if (document.hidden) {     
videoElement.pause();  
} else {
videoElement.play();   
} 
});
</script>

El único problema con esto es que es un poco abrupto: el audio del video comienza y se detiene como si se cortara con una guillotina cuando el usuario cambia de pestaña. La presentación podría mejorarse significativamente si el audio entra y sale a medida que se enfoca la pestaña. Si estamos usando jQuery, podemos emplear un uso ordenado de la animate método para hacerlo.

<script>
var videoElement = document.getElementById("videoElement");

document.addEventListener("visibilitychange", function() {
if (document.hidden) {     
$("#videoElement").animate({volume: 0}, 1000, "linear", function() {
videoElement.pause();
});
} else {
videoElement.play();  
$("#videoElement").animate({volume: 1}, 1000, "linear");
} 
});
</script>

La especificación

La especificación de la API de visibilidad de página es sorprendentemente simple y consta de solo dos métodos: document.hidden devoluciones true o false dependiendo del estado de la ventana del navegador; y esos mismos estados se reflejan en forma de cadena para document.visibilityState (hidden y visible, respectivamente, con dos valores opcionales de prerender y unloaded), con visibilitychange disponible como evento. document.visibilityState puede ser útil para determinar por qué un documento no es visible, pero de lo contrario document.hidden cubre la mayoría de las necesidades.

Principios de precaución y compatibilidad con el navegador

La API de visibilidad de la página adopta un enfoque deliberadamente conservador para informar sobre un documento oculto: su página se informará como oculta si el usuario cambia a otra pestaña en la misma ventana del navegador, pero no si mueve otra ventana para ocultar su página. La API no es infalible y devolverá falsos positivos en algunas circunstancias, por lo que se pecará de precaución.

La compatibilidad con la API de visibilidad de la página es excelente: todos los navegadores modernos, con la excepción de Opera Mini, son totalmente compatibles con la API, incluido IE10 +. Los prefijos de proveedores también están refrescantemente ausentes de la implementación de la especificación: los únicos navegadores que actualmente necesitan un –webkit prefijo son Android y Blackberry. Por esa razón (y en aras de una ilustración simplificada) no he incluido ningún prefijo en los ejemplos de código anteriores, aunque son bastante fáciles de incluir y probar.

La API de visibilidad de página también es un excelente ejemplo de mejora progresiva. Si el navegador no es compatible con la API, el script se ignorará y el usuario simplemente estará sujeto a la habitual cacofonía incontrolada.

Otros usos

Si bien el contenido de audio y video son candidatos obvios para usar la API de visibilidad de página, existen muchas otras posibilidades: pausar un control deslizante o una presentación mientras el sitio permanece desenfocado o cambiar el estado visual de la página ya que permanece descuidada.

El uso cuidadoso de la API puede ayudar a hacer de la Web un lugar mejor, más ecológico y más responsable, y recomiendo encarecidamente a los desarrolladores que consideren cómo integrarlo en sus proyectos.

Deja un comentario