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:
|
| Through a scale from 0.0 to 1.0, the attribute states that:
|
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.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter