While not really one of the fancy-pants APIs, the Battery API is quite useful. Especially if you're building an offline web-app. We can read out the charging status, battery level, charge and discharge time, all within the browser.

Your current battery status

Currently only works in Firefox (Note: on OS X it's slightly wonky and sometimes doesn't trigger events, Firefox Aurora seems to work fine).

remaining

Mister, could you explain this to me?

The Battery API is generally a clean and well-behaved API, although it does have it's quirks :). The API allows you to request battery information on the navigator.battery object. The navigator.battery object exposes: the level (a value between 0 and 1), the chargeTime (time until fully charged in seconds, 0 when full), the dischargeTime (time until empty, infinity when plugged in) and charging (wether we're currently charging or not — this value is false if the battery is full)

Other than just reading out values, the navigator.battery object also has a couple of events:

• The chargingchange event is triggered when the charging state is changed.
• The levelchange event is triggered if the battery level has changed.
• The chargingtimechange event is triggered when the chargingtime changed.
• The dischargingtimechange event is triggered when the dischargingtime changed.

Useful?

Sort of, but only in some fringe cases. You could disable certain effects or other CPU intensive tasks that aren't vital to conserve a user's battery life. If you had to store data on a server, you could detect the battery status and when it drops under 10% send the data more frequently.

Nice! Can I have it?

It's only supported on Firefox at this time, but on OS X it acts a bit wonky. Firefox Aurora on OS X seems fine. There used to be support in Chrome (somewhere in 2012) but it has since been removed (no reason given).

Show me the source!

Feel free to look around the differente source files we used for this example.

• The javascripts
• The stylesheet