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:
- La API Vibration (Vibración) en HTML5.
- Eventos de Luz Ambiental con JavaScript.
- Accediendo a la cámara y el micrófono de un dispositivo con JavaScript.
- Detectando la orientación del dispositivo con el API de javaScript.
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:
charging | Booleano que indica si el dispositivo móvil está en fase de cargo (true) o no (false). |
chargingTime | Representa 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
|
level | A través de una escala de 0.0 a 1.0, el atributo establece que:
|
Eventos del objeto navigator.battery
Es posible definir una serie de eventos:
onchargingchange | Para la propiedad charging. |
onchargingTimechange | Para la propiedad chargingTime. |
ondischargingTimechange | Para la propiedad dischargingTime. |
onlevelchange | Para 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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter