The Battery API in HTML5

- Andrés Cruz

En español
The Battery API in HTML5

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:

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:

chargingBoolean that indicates whether the mobile device is in the charging phase (true) or not (false).
chargingTimeRepresents 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:

onchargingchangeFor the charging property.
onchargingTimechangeFor the charging Time property.
ondischargingTimechangeFor the dischargingTime property.
onlevelchangeFor 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

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.