Artículos
HTML5

Saber si la batería está cargando con HTML5

11/Oct/2015

Para saber si la batería está cargando con HTML5 vamos a apoyarnos sobre el Batttery API. Esta funcionalidad es una de las que ofrece dicho API, dónde también podemos saber el nivel actual de la batería o el tiempo de vida que le puede quedar a la batería.

Es bueno saber si la batería está cargando con HTML5 sobre todo si nuestra aplicación es de consumo excesivo de CPU. Ya que una alta computación dentro de nuestros programas hará que la batería del dispositivo disminuya más rápidamente y pueda dejar al usuario con una mala experiencia. En estos casos deberíamos de recomendar al usuario que ponga a cargar la batería del dispositivo para no tener problemas.

No sé por qué, pero el juego Agar.io me viene ahora mismo a la cabeza como una de estas aplicaciones web que hacen un alto consumo de batería.

Pero vamos a la codificación, lo primero es utilizar el elemento BatteryManager, este lo conseguimos mediante el objeto navigator y su método .getBattery().

navigator.getBattery().then(function (battery) { ... }

Bueno, en concreto, lo que estamos recuperando es una promesa. De esta manera la propiedad battery es la que representa a nuestro BatteryManager.

La propiedad que nos ayuda a saber si la batería está cargando con HTML5 es .charging. Así que deberemos de preguntar por ella en nuestro código.

navigator.getBattery().then(function (battery) {
	
	// Volcamos la información por consola
	var txt = " se está cargando la batería.";
	console.log((battery.charging)?"SÍ"+txt:"NO"+txt);
	
});

Como el estado de carga de la batería puede cambiar, el objeto BatteryManager nos da la oportunidad de escuchar el evento chargingchange el cual saltará cada vez que dejemos de cargar la batería o empecemos a cargar la batería.

Es por ello que podremos utilizar el método .addEventListener() para controlar este evento e informar de que ha habido un cambio y así saber si la batería está cargando con HTML5.

	battery.addEventListener('chargingchange', function() {
  console.log((battery.charging)?"SÍ"+txt:"NO"+txt);
})

De esta forma habremos realizado nuestro código para saber si la batería está cargando con HTML5.

Código Fuente

Descárgate el código fuente de Saber si la batería está cargando con HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
3 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios