How to Retrieve and Display Battery Status with HTML5

Apart from introducing new elements, the people behind the 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—phones and tablets—everywhere. Battery power is still a force of nature to contend with, but we will discuss that 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 draw significant power from the battery. If we can retrieve the battery information and then display a notification if the power level is below the app’s requirement, this can advise the user to manage their resources accordingly.

How to Use the 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 in the browser. Sadly, the support for this API is not great. At the time of writing, it only works in Firefox 10+ (with prefix).

The battery status is accessed via 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 get a percentage value, like so:

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

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

In the following code snippet, we add an HTML class to our markup based on the battery status, allowing us to apply 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 code above, if the battery is being charged, we add a class named charging. Otherwise, we add the classes high, med, or low based on the specified battery level range. Then, we also need to set the width of the status bar to reflect the battery level.

  levelBar.css('width', level + '%');
}

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

.battery .level {
  height: 100%;
  width: 2%; /* Default width, gets overridden by JS */
}

.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'; /* Ensure backslash is escaped for CSS */
  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 you are on a portable device like a laptop and open the demo in the latest Firefox version for it to work.

Further Reference

• Battery Status API – W3C
• Battery Status API – MDN