How to Retrieve and Display Battery Status with HTML5

Apart from introducing new elements, the people behind web standard, W3C, also introduced a set of JavaScript APIs that allow developers to communicate with the device system including retrieving battery status.

Many people today are on the move with their mobile devices, phone, and tablet, everywhere. Battery power is still a force of nature to contend with, but we will discuss that on another day.

This API may come in handy when, let’s say, you build an App that at some point will run a function that will take some power out of the battery. If we can retrieve the battery information and then display a notification if the amount of power is not up to the app’s requirement, this will advise the user to manage their resources accordingly.

How to Use Battery Status API

In this example, however, I’m not going to build an app. Rather we are going to simply retrieve the battery status and display it on the browser. Sadly, the support for this API is not great. At the time of the writing, it only works in Firefox 10+ (with prefix).

The battery is defined with navigator.battery, and to get the battery level, we use navigator.battery.level. The battery level output is in decimal format, so we multiply it by 100 to remove the decimal numbers, like so.

var battery = navigator.battery;
var level = battery.level * 100;
var levelBar = $('.level');

 

The API also provides charging property, which we can use to identify whether the battery is in a charging state.

In the following code snippet we set add HTML class to our HTML markup based on battery status, so that we are able to add specific style rules later in the CSS.

if (battery.charging) {
    levelBar.addClass('charging');
} else if (level > 65) {
    levelBar.addClass('high');
} else if (level >= 35) {
    levelBar.addClass('med');
} else {
    levelBar.addClass('low');
}

 

In the above, if the battery is being charged we add a class named charging, then add respectively high, med, and low class upon the specified range of battery level. Then, we also need to specify the bar width that should follow the battery level.

if (!battery.charging) {
  levelBar.css('width', level + '%');
}

 

In CSS, we set the battery styles and colors, as follows;

.battery .level {
    height: 100%;
    width: 2%;
}

.battery .level.high {
    background-color: #27AE60; 
}

.battery .level.med {
    background-color: #E67E22; 
}

.battery .level.low {
    background-color: #E74C3C; 
}

.battery .level.charging {
    background-color: #27AE60; 
    width: 100%;
    text-align: center;
}

.battery .level.charging:before {
    content: '\e800';
    display: block;
    height: 100%;
    width: 100%;
    color: #fff;
    line-height: 40px;
    font-family: 'Battery';
    font-size: 25px;
}

That’s all, head over to the demo page to see it in action. Just make sure that you are on portable device like a laptop and open the demo in the latest Firefox for the demo to work.

• View Demo
• Download Source

Further Reference

• Battery Status API — W3C
• Battery Status API — MDN