Saber si la batería está cargando con HTML5

11/Oct/2015 HTML5 3 Comentarios

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().

  1. avigator.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.

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

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.

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

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

Vídeos sobre HTML5


3 comentarios en “Saber si la batería está cargando con HTML5”

Víctor Cuervo

ana Diseño Web

Muy buena esa API, me parece muy útil y eficaz, y encima está toda hecha con código html.

Víctor Cuervo

Joaquin Copete

Y para sacar provecho de este API, podemos usar esta información para identificar a los usuarios

http://tecnologia.elpais.com/tecnologia/2015/08/04/actualidad/1438686007_043163.html

Víctor Cuervo

Víctor Cuervo

Buenas Joaquín,

Me ha dejado alucinado el artículo. La verdad que es una pasada lo que puede llegar a ser una huella digital. La verdad que es de recomendada lectura. Muchas gracias por la información.

Saludos.

Responder a Joaquin Copete Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*