Artículos
HTML5

Nivel de la batería con HTML5

30/Ago/2015

Dentro de los estándares que hay alrededor de HTML5 nos encontramos con el Battery API. Mediante el Battery API podremos consultar el nivel de la batería con HTML5. Es decir, sabremos el nivel de la batería/s que contenga el dispositivo que cargue nuestra página web.

Ten en cuenta que la especificación Battery API o Battery Status API está todavía en Candidate Recommendation por parte de W3C y es por ello que la implementación puede variar atendiendo a los diferentes navegadores.

Para poder calcular el nivel de la batería con HTML5 tenemos que saber que el objeto que contiene la información acerca de la batería es el BatteryManager. Para obtener una instancia del BatteryManager deberemos de invocar al método .getBattery() del navegador.

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

Es importante saber que este método devuelve una promesa, la cual es resuelta mediante el objeto BatteryManager.

De esta forma podemos acceder a la información del nivel de la batería con HTML5 mediante la propiedad .level.

console.log("Nivel de batería " + battery.level * 100 + "%");

Es importante saber que el nivel de la batería se muestra en decimales entre 0.0 y 1.0 por lo cual deberemos de multiplicarlo por 100 para obtenerlo en formato de porcentaje.

Con lo realizado hasta ahora podríamos decir que ya hemos mostrado el nivel de la batería con HTML5. Si bien, la especificación Battery API, nos ofrece un elemento adicional. Este es el evento "levelchange". Es decir, el BatteryManager va a avisar cada vez que cambie el nivel de batería. Bien porque se esté cargando o descargando.

Así que vamos a crear un listener sobre el BatteryManager.

battery.addEventListener('levelchange', function() {...});

Y simplemente lo que tenemos que hacer es volver a acceder a la propiedad .level para conocer el nuevo nivel de la batería.

battery.addEventListener('levelchange', function() {
  console.log("Nivel de batería " + battery.level * 100 + "%");
});

Si vas a realizar uso del Battery API debes de mirar bien el soporte de los navegadores. Ya que ahora mismo (30.agosto.2005) es soportado solo por Chrome 42+, Opera 30+ y el Android Browser 40+. Por otro lado Firefox 38+ de forma parcial. Como siempre os recomiendo que utilicéis Can I Use Battery API? para ver el estado actual de implementación.

Ya habéis visto lo sencillo que es conocer y estar actualizado del nivel de la batería con HTML5.

Código Fuente

Descárgate el código fuente de Nivel de la batería 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
0 Comentarios
Opiniones integradas
Ver todos los comentarios