Mozilla's JavaScript Battery API

As more and more web browsing devices are becoming mobile and/or battery-powered, we need to become more aware of that battery power we use in our applications. Mozilla has come up with a solution for JavaScript that allows us to monitor the battery levels of the devices that our code runs on. Sadly, Firefox is the only browser that has the API implemented, but it shouldn’t be too far in the future before the API is accepted by the other browsers.

The API

You can access everything from the Battery API straight from window.navigator.battery, at least it should be once it is a standard, but for now it’s found at window.navigator.mozBattery. Below you can find the list of properties:

charging:

A Boolean value indicating whether the device is plugged in and charging. It is also true if the battery is full, the device doesn’t have a battery, or the implementation is unable to report the state.

chargingTime:

The number of seconds until the device’s battery is 100% charged. If the device is fully charged, or doesn’t use a battery, this will return 0. If the device is not plugged in, this will be Infinity.

dischargingTime:

The number of seconds until the system’s battery is fully drained and would be suspended. If there is no battery or the device is plugged in, this will be Infinity.

level:

The percentage of battery remaining. The number is between 0 and 1.0 (e.g. if the battery is at 75% charge, this will return .75). If there is no battery or the implementation is unable to report the battery’s level, this will be 1.0.

Events

You can also watch events for the battery. There is an event for each of the properties above that fires whenever there is a change to their value. You can either set the on[eventname] (e.g. onchargingchange, notice no capitals) property to a function or, even better, you can use addEventListener the same way you would for a normal DOM element.

navigator.mozBattery.addEventlistener('chargingchange', function(e) {
    if (navigator.mozBattery.charging) {
        console.log('The battery is now charging');
    }
    else {
        console.log('The battery is no longer charging');
    }
});

The Battery is Nearly Dead

This API can be used to note when a “low power mode” should be activated to make your application run with less power consumption to keep a user’s battery from burning out quickly. Or, if you want, you could just use it to create a battery life indicator app, just like you would find on any laptop or other mobile device already, except this one would be big and beautiful, because it can be! I’m sure some of you can find some wonderful ways to use this API, too. If you have any great ideas, drop it in the comments below. Don’t forget to share this with your programming buddies, and as always: Happy Coding!