La API de visibilidad de HTML5 – Cómo detectar si una página está visible o no

Hombre-InvisibleUna cuestión peliaguda de resolver por medios tradicionales es la que encabeza este artículo: ¿Cómo puedo detectar si el usuario actual tiene nuestra página oculta o visible?.

Esto nos puede servir para muchas cosas, como por ejemplo:

  • Dejar de hacer llamadas en segundo plano al servidor para obtener datos cuando el usuario no esté usando la aplicación web, ya que no habrá nadie para verlos. Así que nos ahorraremos carga innecesaria nuestros servicios. Típico en aplicaciones que utilizan AJAX.
  • Si el usuario está reproduciendo un vídeo o cualquier otro elemento (por ejemplo, una presentación), podemos detenerlo mientras no está mirando, dejando que continúe automáticamente cuando el usuario vuelva a la página.
  • En una aplicación de email, cuando el usuario esté mirando la página podemos verificar si hay nuevos correos cada pocos segundos. Si no está en primer plano bajamos el periodo de comprobación para hacerlo cada pocos minutos y ahorrarle carga al servidor.
  • También podemos usar notificaciones cuando esté oculta, obviándolas cuando el usuario esté viéndola.

Tradicionalmente lo que se solía hacer para conseguir algo parecido a esto era tratar de detectar el evento blur de la ventana (objeto window) para que cuando perdiese el foco lo detectásemos, y luego el evento focus de la misma para cuando se volviese a recuperar. Pero este método es bastante imperfecto ya que, por ejemplo, si queremos colocar una ventana en un monitor para verla de vez en cuando, ésta perdería el foco pero realmente estaría visible, así que usar este método del foco haría que la aplicación no funcionase adecuadamente.

Para ayudarnos con este problema el W3C ha definido una API de visibilidad que, aunque no forma parte formal del estándar HTML5, su especificación está ya terminada y aprobada hace tiempo (como recomendación) y en la actualidad está soportada por todos los navegadores modernos:

Sigue leyendo en JASoft.org…

Sin categoría

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *