Controla el estado de tu aplicación con el Page Visibility API

Los navegadores web de hoy en día son como esos niños que te roban el bocadillo en el colegio. Lo que ocurre es que, ni la web es un colegio, ni el bocadillo es de chorizo. Estamos hablando de la memoria RAM, un recurso limitado al que los navegadores parecen ser adictos.

Con el paso de los años, las webs han pasado de ser simples documentos a ser aplicaciones cargadas de interactividad. Que si llamadas HTTP por aquí, que si animaciones por allá... Todo esto genera un consumo de recursos que, como desarrolladores responsables, estamos obligados a mitigar todo lo posible.

¿Qué necesidad hay de mantener esa interactividad cuando el usuario ni siquiera está mirando?

Page Visibility API

El API de HTML5 llamado Page Visibility (estandarizado hace ya algún tiempo), se encarga de avisarnos mediante eventos cuando el usuario elimina el foco de nuestra página web, ya bien sea cambiando de pestaña, minimizando el navegador, apagando la pantalla...

Mediante estos eventos podemos controlar nuestra aplicación para ayudar a gestionar los recursos con mayor eficiencia. Algunos usos típicos engloban detener vídeos, animaciones o carruseles de imágenes, silenciar sonidos o el auto-pausado de juegos.

El API añade dos propiedades de solo lectura al documento.

La primera propiedad es hidden e indica, mediante un valor booleano, si el documento es visible o no.

Por otro lado, visibilityState es la propiedad que, mediante una cadena, nos provee de uno de los siguientes posibles cuatro estados:

• visible: El documento es visible al menos parcialmente.
• hidden: El documento no se encuentra visible.
• prerender: El documento ha cargado pero el usuario todavía no lo ha visto.
• unloaded: El documento está apunto de cerrarse por acción del usuario.

Funcionamiento

Podemos escuchar los cambios de estado añadiendo un listener a los eventos del tipo visibilitychange.

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // El documento no es visible, parar interactividad.
  } else {
    // El documento vuelve a ser visible, reanudar interactividad.
  }
});

Conclusión

La compatibilidad a día de hoy es prácticamente total, incluyendo Internet Explorer 11.

Así pues, Page Visibility es un API muy simple y sencillo que nos ayudará a implementar mejoras sustanciales en nuestras aplicaciones web. Seguro que los usuarios lo agradecerán.