Estado de la batería con HTML 5: Battery Status API

Aunque parezca increíble :), otras de las especificaciones de HTML 5 trata sobre el estado de la batería: Battery Status API. La misma nos proporcionará información sobre el estado de la batería del dispositivo donde estamos ejecutando nuestra aplicación web, ya sea un teléfono móvil, un portátil o una tablet.

Lamentablemente la misma sólo está disponible a día de hoy en la versión experimental Firefox Aurora.
El ejemplo de lo que podría llegar a ser esta API algún día sería el siguiente:

function log(msg){
    var output = document.getElementById("result");
    output.value += msg;
}

window.onload = function() {

    var battery = navigator.battery || navigator.mozBattery; 
    
    if (battery) {

        var level = battery.level * 100;
        var dischargingTime = Math.round(battery.dischargingTime / 60);
        var chargingTime = Math.round(battery.chargingTime / 60);
        var IsCharging = battery.charging;
        
        var info = "Battery Level: " + level + "%" +
                  "nDischarging in " + dischargingTime + " minutes" +
                  "nCharging in " + chargingTime + " minutes" +
                  "nIs It Charging?: " + IsCharging;
     
        log(info);
        
        //Handlers
        battery.addEventListener("levelchange", function(){
            level = battery.level * 100;
            log("nBattery level is changed to: " + level + "%");
        });
        
        battery.addEventListener("chargingchange", function(){
            if(battery.charging)
                log("nCharging");
            else
                log("nNot charging");
        });
        
        battery.addEventListener("chargingchange",function(){
            chargingTime = Math.round(battery.chargingTime / 60);
            log("nCharging time is changed to: " + chargingTime  + " minutes");
        });
        
        battery.addEventListener("dischargingtimechange",function(){
            dischargingTime = Math.round(battery.dischargingTime / 60);
            log("nDischarging time is changed to: " + dischargingTime + " minutes");
        });

    }
    else {
        log("Battery Status API is not available");
    }

};

Para poder probar este ejemplo, lo he hecho en un tablet con Windows 8 Pro, pero podría haber sido un portátil, con Firefox Aurora:

Los únicos pasos en dicha prueba han sido arrancar el ejemplo de más arriba y esperar los valores iniciales. Acto seguido he conectado la fuente de alimentación para comprar que mostraba Charging en el log y el resto de eventos involucrados mostraran los nuevos valores. Del mismo modo, he vuelto a desconectar el dispositivo de la red eléctrica, mostrando en este caso el texto Not charging, y le he dejado unos minutos para comprobar que efectivamente la batería poco a poco se iba agotando y mostraba los nuevos valores. Antes de capturar el resultado, he posicionado el ratón sobre el icono de la batería, en la barra de tareas, para poder comprobar que los valores coincidían 🙂

Como podemos ver, tenemos varias propiedades a nuestra disposición:

  • level: Representa el nivel de batería actual de 0 a 1.0. En este ejemplo se ha multiplicado por cien para obtener el porcentaje.
  • chargingTime: Nos indica el tiempo en segundos que le queda a la batería para estar totalmente cargada.
  • dischargingTime: Tiempo restante para que la batería se haya descargado por completo y que el sistema entre en suspensión.
  • charging: Otra propiedad muy útil que nos indicará si el dispositivo se está cargando.

Por otro lado, dispondremos de una serie de eventos a los que poder suscribirnos:

  • levelchange: Para controlar cuándo el nivel de la batería ha variado.
  • chargingchange: Nos avisa cuando el dispositivo ha sido conectado/desconectado a la red eléctrica.
  • chargingtimechange: El tiempo que tardará el dispositivo en cargarse ha variado.
  • dischargingtimechange: El tiempo de descarga y suspensión ha cambiado.

Lo cierto es que gracias a esta nueva funcionalidad vamos a poder ser capaces de gestionar nuestras aplicaciones web de una forma más óptima, sobre todo en aquellos dispositivos donde la batería es un bien muy preciado 🙂

A través de este enlace accederemos al ejemplo completo.

Espero que haya sido de vuestro interés 😀

¡Saludos!