Breve introducción al API Page Visibility

Introducción

Los navegadores web hoy en día desayunan, comen, meriendan y cenan la RAM de tu dispositivo. Con el paso de los años, las webs han pasado de ser simples documentos a ser aplicaciones cargadas de interactividad. Librerías por docenas, payloads JSON que no tienen fín... todo esto genera un consumo de recursos que, como desarrolladores responsables que somos, estamos obligados a mitigar todo lo posible.

¿Qué necesidad hay de mantener interactividad y tareas ejecutándose 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 aplicación web, ya bien sea cambiando de pestaña, minimizando el navegador o apagando la pantalla, entre otros.

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 al documento dos propiedades de solo lectura.

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 nos provee un string con uno de los posibles cuatro estados:

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

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