La API Battery (Batería) en HTML5

17-11-2014 - Andrés Cruz

La API Battery (Batería) en HTML5 In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

Ver ejemplo Descargar fuente

Una de las muchas APIs para JavaScript que permiten trabajar con los componentes de los dispositivos móviles, es la API de la batería, que se encuentra accesible a través del objeto navigator.battery; esta API provee información sobre el nivel de carga actual del dispositivo móvil; además provee una serie de eventos que se ejecutan cuando el dispositivo móvil pasa de un estado a otro, por ejemplo:

  • Si el dispositivo móvil pasa de fase de carga a desconectado (de la energía).
  • Tiempo de duración de la batería.

Entre otros estados; aunque se pueda llegar a pensar que esta API no tiene mucha utilidad al momento de la creación de una aplicación web para dispositivos en comparación con otras como:

Es importante mencionar que puede tener una utilidad según el propósito que se desee de la aplicación; por ejemplo una aplicación web que oscurezca ciertos elementos de la interfaz con tal de ajustar los colores cuando la batería es escasa con el objetivo de apagar pixeles en la pantalla y de esta forma ahorrar la batería.

Atributos del objeto navigator.battery

Las siguientes propiedades están provistas por el objeto navigator.battery:

chargingBooleano que indica si el dispositivo móvil está en fase de cargo (true) o no (false).
chargingTimeRepresenta el tiempo restante en segundos hasta que la batería del dispositivo móvil está totalmente cargada; el atributo chargingTime debe estar cercano a 0, si la batería está llena o no hay batería conectada, y al infinito positivo si la batería se descarga o la aplicación no puede informar el tiempo de carga restante.
dischargingTime

Representa el tiempo restante en segundos hasta que la batería del dispositivo móvil está totalmente descargada; el atributo dischargingTime toma el valor de infinito positivo si: 

  • La batería se está cargando.
  • La aplicación no puede informar el tiempo de descarga restante (tiempo hasta que se agote la batería).
  • No hay ninguna batería conectada al sistema.
level

A través de una escala de 0.0 a 1.0, el atributo establece que: 

  • El atributo está establecido en 0 si la batería se a agotado.
  • El atributo está establecido en 1.0 si la batería está al tope de su capacidad (100%).

Eventos del objeto navigator.battery

Es posible definir una serie de eventos:

onchargingchangePara la propiedad charging.
onchargingTimechangePara la propiedad chargingTime.
ondischargingTimechangePara la propiedad dischargingTime.
onlevelchangePara la propiedad level.

Podemos ver el resumen de todas las propiedades y eventos en la siguiente sección:

// Obtenemos el objeto battery segun el navegador
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// propiedades
battery.charging;
battery.level;
battery.dischargingTime;

// eventos
battery.addEventListener("chargingchange", function(e) {}, false);
battery.addEventListener("chargingtimechange", function(e) {}, false);
battery.addEventListener("dischargingtimechange", function(e) {}, false);
battery.addEventListener("levelchange", function(e) {}, false);

¡Importante! lamentablemente, parece ser que Firefox es el único navegador que permite utilizar esta característica por los momentos: ver compatibilidad en los navegadores.

Enlace para la documentación oficial Battery Status API - W3C.

Ver ejemplo Descargar fuente


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!