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.
- charging: Is a type of Boolean and readonly that indicates whether the device is charging the battery. The default value is true.
- chargingTime: Is type is double and readonly that gives you the remaining time in seconds to charge the device battery fully. The default values is 0.
- dischargingTime: Is the type of double and readonly that represents the remaining time for a complete discharge of the device battery. The default values is calculated based on the other property values.
- level: Is a type of double and readonly that represents the battery level in the scale of 0 - 1.0. The default values is 1.0.
Events
The Battery Status API provides the following four basic events.
- onchargingchange: will be fired when you put the device for charging or when you disconnect the device from charging.
- onchargingtimechange: will be fired when the battery charging time is changed.
- ondischargingtimechange: will be fired when the battery discharging time is changed.
- 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