Battery Status API in HTML5

Introduction

 

When a user downloads an application for their device, they are more conscious of the battery usage of the application. So as a mobile application developer, you should consider the battery usage of your application.

 

If you are developing a web application for a mobile device then your choice is to use HTML5’s Battery Status API if you are concerned about the user’s device battery status/charging levels. Yes, HTML5 provides an API for a device's battery.

 

W3.org says: “The Battery Status API specification defines a means for web developers to programmatically determine the battery status of the hosting device”.

 

Consider that you are developing a web application that has a huge number of transactions in a page. If you start the transaction without knowing the battery charge level then if the battery level is low, the transaction may fail if the battery is dead.

 

So in this scenario, the HTML’s Battery Status API can help mobile web application developers.

 

Check for Battery Status API

 

You can check whether the battery status API is supported by the browser or not as shown below.

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
if (battery) {
  // Battery Status API is supported
}

The battery status API is currently supported by the latest version of Chrome and Firefox.

 

Properties

 

There are four basic properties available in the battery status API.

1. charging: This is a type of Boolean and read-only that indicates whether the device is charging the battery. The default value is true.
2. chargingTime: Is type is double and read-only which gives you the remaining time in seconds to charge the device battery fully. The default values are 0.
3. dischargingTime: This is the type of double and read-only that represents the remaining time for a complete discharge of the device battery. The default values are calculated based on the other property values.
4. level: This is a type of double and read-only that represents the battery level on a scale of 0 - 1.0. The default values are 1.0.

Events

 

The Battery Status API provides the following four basic events.

1. onchargingchange: will be fired when you put the device for charging or when you disconnect the device from charging.
2. onchargingtimechange: will be fired when the battery charging time is changed.
3. ondischargingtimechange: will be fired when the battery discharging time is changed.
4. onlevel: will be fired when the battery level is changed.

Example

 

HTML

< div id = "charging" > Charging state unknown < /div>
<div id = "level" > Battery level unknown < /div>
<div id = "levelText" > Battery level in % unknown < /div>
<div id = "dischargingTime" > Discharging time unknown < /div>
<div id = "chargingtime" > Charging time unknown < /div>
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBatter ||
    navigator.msBattery,
    previousState;
if (battery) {
    // battery API supported
    battery.onchargingchange = function () {
        document.querySelector('#charging').textContent = battery.charging ?
            charging ' : '
        not charging ';
    };
    battery.onlevelchange = function () {
        var currentState = previousState;
        previousState = (battery.charging || battery.level > 0.25);
        if (previousState !== currentState) {
            if (previousState) {
                document.querySelector('#level').textContent = "Battery power
                is OK ";
            } else {
                document.querySelector('#level').textContent = "Battery power
                is critical!";
            }
            document.querySelector('#levelText').textContent = "battery level
            " + Math.floor(battery.level * 100) + " % ";
        }
    };
    battery.ondischargingtimechange = function () {
        document.querySelector('#dischargingTime').textContent = battery.disc
        argingTime / 60;
    };
    battery.onchargingtimechange = function () {
        document.querySelector('#charging').textContent = battery.chargingTim /
            60;
    };
}

In the preceding example, we handle all the events and update the text based on the battery property values.

 

For a live example, please access the jsfiddle in the mobile.

 

Source: W3.org