Home Carbon Ads HTML5 Battery Status API with Code Example

HTML5 Battery Status API with Code Example

This post is a part 2 of Advanced JavaScript APIs post series.

Battery status API can be used in mobile and desktop browsers. It gives us the battery status(charging or not) and level(percentage remaining).

window.navigator.batter property is the heart of Battery status API.

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
 
if(battery)
{
    console.log("Battery level: " + Math.floor(battery.level * 100) + "%" );//battery level returns a value between 0 and 1. 1 means 100%
    console.log("Device is: " + (battery.charging ? "charging" : "discharging"));//battery.charing returns boolean value
    console.log("Time required for charing: " + battery.chargingTime);//in seconds
    console.log("Time required for discharing: " + battery.dischargingTime);//in seconds

    //charging or discharging, status changed
    battery.addEventListener("chargingchange", function(){
        console.log("Time required for charing: " + battery.chargingTime);
    }, false);

    //battery level changed
    battery.addEventListener("levelchange", function(){
        console.log("Battery level: " + Math.floor(battery.level * 100) + "%" );
    }, false);

    //total charging time changed
    battery.addEventListener("chargingtimechange", function(){
        console.log("Time required for charing: " + battery.chargingTime);
    }, false);
   
    //total discharging time changed
    battery.addEventListener("dischargingtimechange", function(){
        console.log("Time required for discharing: " + battery.dischargingTime);
    }, false);
}
else
{
    alert("Battery Status API not supported");
}
Narayan Prusty
JavaScript Vibration API with DemoHTML5 Full Screen API Tutorial with Demo
Comments: 1
  1. Antonio
    6 years ago

    Hi! I read your page all the time. Congrats!

    This example doesn’t work in chrome but in firefox its perfect. I want to do this in an app for Intel XDK, but doesn’t work.
    Any idea?

    thanks!

    ReplyCancel

Leave a Reply to Antonio Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 1 Comment Web Development
Share this
Related Articles