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:
<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:
<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:
<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:
<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.
<!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 unplugging*/
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 unplugging*/
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:
- Without charger:
As the charger is not connected it shows battery charging time as ‘Infinity’.