HTML5 Battery Status API
The HTML5 Battery Status API allows you to access information about the battery status of a machine through a browser.
How much charge do we have? ¶
With the HTML5 Battery Status API you can gain access to battery information for
the host machine of the browser you are using. The uses for this might be to
reduce operations that use battery life in your application if the battery is
low or show battery graphics. You can get access to battery information through
navigator.battery
. Particularly for mobile devices I can see this being really
useful.
This returns a JavaScript object with battery status information.
navigator.battery
{
charging: true,
chargingTime: 0,
dischargingTime: Infinity,
level: 1,
onchargingchange: null,
onchargingtimechage: null,
ondischargingtimechange: null,
onlevelchange: null
}
You will notice a number of events that you can bind to
navigator.battery.onchargingchange = function () {
console.log(navigator.battery.charging);
};
navigator.battery.onchargingtimechange = function () {
console.log(navigator.battery.chargingTime);
};
navigator.battery.oncdischargingtimechange = function () {
console.log(navigator.battery.dischargingTime);
};
navigator.battery.onlevelchange = function () {
console.log(navigator.battery.level);
};
You could use these to update graphics or change application behaviour when battery life or status changes.
Browser support ¶
At the time of writing the Battery Status API is candidate recommendation but my
experience of browser support is poor. I wasn’t able to find much information on
the status of this API. In my current version of Chromium (31.0.1650.63) it is
unsupported either as navigator.battery
or navigator.webkitBattery
. I found
that my version of Firefox (26.0) is supported but only default values are
returned so the browser isn’t able to read battery status.
References ¶
Tags
Can you help make this article better? You can edit it here and send me a pull request.
See Also
-
The HTML5 Geolocation API
The HTML5 Geolocation API allows you to request geolocation data including longitude, latitude, altitude, speed and direction of travel. -
The HTML5 Vibrate API
The HTML5 Vibrate API allows you to trigger vibration on a device. -
Abstracting the design layer
Abstracting the entire front-end layer may seem like a drastic measure but with some excellent tools available there are compelling reasons to do it.