Example Download

One of the many JavaScript APIs that allow you to work with mobile device components is the battery API, which is accessible through the navigator.battery object; this API provides information about the current charge level of the mobile device; It also provides a series of events that are executed when the mobile device goes from one state to another, for example:

• If the mobile device goes from charging phase to disconnected (from power).
• Battery life time.

Among other states; although you may think that this API is not very useful when creating a web application for devices compared to others such as:

• 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.

It is important to mention that it can be useful depending on the desired purpose of the application; for example, a web application that darkens certain elements of the interface in order to adjust the colors when the battery is low in order to turn off pixels on the screen and thus save the battery.

Attributes of the navigator.battery object

The following properties are provided by the navigator.battery object:

charging	Boolean that indicates whether the mobile device is in the charging phase (true) or not (false).
chargingTime	Represents the remaining time in seconds until the mobile device's battery is fully charged; the chargingTime attribute should be close to 0, if the battery is full or no battery is connected, and to positive infinity if the battery is discharged or the application cannot report the remaining charging time.
dischargingTime	Represents the remaining time in seconds until the mobile device's battery is completely discharged; the dischargingTime attribute takes the value of positive infinity if: The battery is charging. The app cannot report the remaining discharge time (time until the battery runs out). There is no battery connected to the system.
level	Through a scale from 0.0 to 1.0, the attribute states that: The attribute is set to 0 if the battery is depleted. The attribute is set to 1.0 if the battery is at full capacity (100%).

Navigator.battery object events

It is possible to define a series of events:

onchargingchange	For the charging property.
onchargingTimechange	For the charging Time property.
ondischargingTimechange	For the dischargingTime property.
onlevelchange	For the level property.

We can see the summary of all properties and events in the following section:

// 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);

Important! Unfortunately, it seems that Firefox is the only browser that allows you to use this feature at the moment: see browser compatibility.

Link to official documentation Battery Status API - W3C.

Example Download