Usando la API de Visibilidad de Página en JavaScript

Ver Ejemplo

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios una vez que el usuario no está visitando la página en cuestión; la siguiente imagen indica qué página se están visualizando y cuales no:

Es decir, cuando el usuario se mueve a otra pestaña o minimiza la ventana; se activa un evento llamado visibilitychange para indicar que la página no esta siendo visualizada (hidden); esto puede resultar bastante útil para personalizar secciones de la página web; por ejemplo el presentado por la MDN.

En esta entrada explicaremos cómo usar la API de Visibilidad de Página que es una de otras APIs JavaScript que hemos tratado en DesarrolloLibre:

• Geolocalización con JavaScript
• La API Vibration (Vibración) en HTML5
• La API Battery (Batería) en HTML5
• Introducción a las notificaciones en JavaScript

La API de Visibilidad de Página en la práctica

En esta parte nos introduciremos en el uso de la API explicando sus principales componentes.

Acceso a la API de Visibilidad de Página en JavaScript

La propiedad document.hidden permite obtener acceso a la API de Visibilidad de Página; sin embargo debido a la gran cantidad de navegadores y sus versiones es posible que algunos no soportan esta API o sea necesario emplear los prefijos.

La siguiente función permite verificar si el navegador soporta la API de Visibilidad de Página y obtener su prefijo si el mismo lo amerita; la misma puede ser fácilmente adaptada para cualquiera de las APIs de JavaScript:

	// Obtenemos el prefijo para cada navegador
	function getPrefix() {
		// verificamos si el navegador soporta el prefijo por defecto
		if ('hidden' in document) 
			return NULL;
		
		// otros prefijos posibles
		var prefixes = [ 'moz', 'ms', 'o', 'webkit' ];

		for (var i = 0; i < prefixes.length; i++) {
			var testPrefix = prefixes[i] + 'Hidden';
			if (testPrefix in document) 
				return prefixes[i]; // retornamos el prefijo
		}

		// el navegador no soporta la API
		return NULL;
	}

Una vez que tengamos el prefijo del navegador para acceder a la API, podemos obtener acceso a la propiedad en cuestión mediante la siguiente función que recibe como parámetro el prefijo obtenido anteriormente:

	// Obtenemos la propiedad
	function getHiddenProperty(prefix) {
		if (prefix) {
			return prefix + 'Hidden';
		} else {
			return 'hidden';
		}
	}

Eventos de la API de Visibilidad de Página

Utilizando nuevamente el prefijo obtenido en la función definida anteriormente, obtenemos el evento visibilitychange en su variación dependiente del navegador empleado:

	// Obtenemos el prefijo para acceder al evento visibilitychange
	function getVisibilityEvent(prefix) {
		if (prefix) {
			return prefix + 'visibilitychange';
		} else {
			return 'visibilitychange';
		}
	}

Finalmente la definición del evento visibilitychange:

	// Obtenemos el prefijo para acceder al evento visibilitychange
	function getVisibilityEvent(prefix) {
		if (prefix) {
			return prefix + 'visibilitychange';
		} else {
			return 'visibilitychange';
		}
	}

Puedes ver un ejemplo final que pone en práctica todo lo visto hasta ahora:

Ver Ejemplo