Skip to content
Related Articles

Related Articles

Improve Article

What is the Battery Status API in HTML5 ?

  • Last Updated : 01 Sep, 2021
Geek Week

Introduction: The Battery Status API sometimes referred to as the Battery API provides information about the battery of the computer. It provides the remaining battery level and charging status of the battery. It also gives an estimate of the remaining time to completely charge the battery or discharge the battery if it is charging or discharging.

The Battery Status API is not an external API. It is available in the navigator.getBattery() method inside the built-in  window.navigator property of the navigator object. 

Get the battery object:

  • Fetch the battery information of the system using the navigator.getBattery() method.
  • Add a JavaScript then() method to the navigator.getBattery() object. The then() method is needed because the function used as a parameter will only execute when we successfully fetch the battery information from the system.
  • The function used as a parameter for the then() method takes the battery object as an argument. This battery object carries all information about the battery of the system.

Now let’s understand different methods of Battery Status API.

 



1. battery.charging method: This method is used for getting the charging status of the battery.

  • Return Value: It returns a Boolean ‘true’ if the battery is actively charging and ‘false’ if the battery is not charging.
  • chargingchange event: We can detect the change in the charging status of the battery by adding event listeners to the battery object. If the ‘chargingchange‘ event occurs then the event listener function will be triggered.

Syntax:

Javascript




<script>
  
    // Event listener for 'chargingchange' event
    battery.addEventListener('chargingchange', function () {
  
        // Code after the event is triggered
    });
      
    // battery.charging object
    var isBatteryCharging = battery.charging
</script>

2. battery.level method: This method returns the battery level as a number assuming the full battery level as 1. We have to multiply it by 100 to get the battery level in percentage.

  • levelchange event: This event detects the change in battery level. We can trigger our conditions whenever the battery level changes by adding an event listener to the event ‘levelchange’.

Syntax:

Javascript




<script>
  
    // An eventListener to 'levelchange' event
    battery.addEventListener('levelchange', function () {
  
        // Code after the event is triggered
    });
  
    // battery.level object
    var batteryPercentage = battery.level * 100
</script>

3. battery.chargingTime method: This method returns the estimated time left to completely charge the battery in seconds. It returns ‘Infinity’ if the battery is not connected to a charger.

  • chargingtimechange event: This event detects the change in this estimated time. We can add a listener to this event and update it.

 



Syntax:

Javascript




<script>
  
    // A listener to chargingtimechange event
    battery.addEventListener('chargingtimechange'
    function () {
  
        // Code after the event is triggered
    });
  
    // Time left for completion of charging
    var chargingTimeLeft = battery.chargingTime
</script>

4. battery.dischargingTime method: This method returns the estimated time left to completely discharge the battery in seconds. It returns ‘Infinity’ if the battery is connected to a charger.

  • dischargingtimechange event: This event detects the change in this estimated time. We can add a listener to this event and update it.

Syntax:

Javascript




<script>
  
    // Listener to 'dischargingtimechange' event.
    battery.addEventListener('dischargingtimechange'
        function () {
  
        // Code after the event is triggered
    });
  
    // battery.dischargingTime method
    var disCharge = battery.dischargingTime
</script>

Example: In this example, we have fetched the battery status using Battery Status API and shown the data on our webpage.

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <div class="battery-info">
        <p>
            <b>The Battery Percentage is:</b>
            <span id="battery-percentage">0</span>
        </p>
  
        <p>
            <b>Is Battery Charging? :</b>
            <span id="is-battery-charging">No</span>
        </p>
  
        <p>
            <b>Battery Charging Time:</b>
            <span id="chargingtime"></span>
        </p>
  
        <p>
            <b>Battery discharging Time:</b>
            <span id="dischargingtime"></span>
        </p>
    </div>
  
    <script>
        navigator.getBattery().then(function (battery) {
            function showAllBatteryInfo() {
                editChargeInfo();
                editLevelInfo();
                editChargingInfo();
                editDischargingInfo();
            }
            showAllBatteryInfo();
  
            battery.addEventListener('chargingchange',
                function () {
                    editChargeInfo();
                });
            function editChargeInfo() {
  
                /* Test with the charger and without 
                charger by unpluging*/
                var isBatteryCharging = (battery.charging ? "Yes" : "No")
                document.getElementById('is-battery-charging')
                    .innerText = isBatteryCharging
            }
  
            battery.addEventListener('levelchange', function () {
                editLevelInfo();
            });
            function editLevelInfo() {
                /* Shows the battery level*/
                var batteryLevel = battery.level * 100
                document.getElementById('battery-percentage')
                    .innerText = batteryLevel
            }
  
            battery.addEventListener('chargingtimechange', function () {
                editChargingInfo();
            });
            function editChargingInfo() {
  
                /* Test with the charger and without charger by unpluging*/
                var charge = battery.chargingTime
                document.getElementById('chargingtime').innerText = charge
            }
  
            battery.addEventListener('dischargingtimechange', function () {
                editDischargingInfo();
            });
            function editDischargingInfo() {
                var disCharge = battery.dischargingTime
                document.getElementById('dischargingtime')
                    .innerText = disCharge
            }
        });
    </script>
</body>
  
</html>

Output:

  • With charger connected:

With the charger

  • Without charger:

As the charger is not connected it shows battery charging time as ‘Infinity’.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :