Battery Status API

This lesson explains Battery Status API with clear examples, use cases, and best practices so you can use HTML5 APIs confidently in real web applications.

HTML5 Battery Status API Overview

The Battery Status API is a browser API that allows web applications to access limited information about a device's battery level, charging status, charging time, and discharging time. It was designed to help developers optimize application behavior based on available battery power.

In modern browsers, support for the Battery Status API is limited because of privacy and fingerprinting concerns. Developers should treat this API as optional, check browser support before using it, and always provide a fallback experience when battery information is unavailable.

Feature	Description
API Name	Battery Status API
Main Method	navigator.getBattery()
Battery Level	Returns battery percentage as a value from 0 to 1.
Charging State	Indicates whether the device is charging.
Use Case	Power-aware web application behavior.
Browser Support	Limited and not available in all modern browsers.

Battery Status API Example

// HTML5 Battery Status API

if ("getBattery" in navigator) {
  navigator.getBattery().then((battery) => {
    console.log("Battery Level:", battery.level * 100 + "%");
    console.log("Charging:", battery.charging);

    battery.addEventListener("levelchange", () => {
      console.log("Battery level changed:", battery.level * 100 + "%");
    });

    battery.addEventListener("chargingchange", () => {
      console.log("Charging status changed:", battery.charging);
    });
  });
} else {
  console.log("Battery Status API is not supported.");
}

This example first checks whether navigator.getBattery() is supported. If available, it reads the battery level and charging status, then listens for battery level and charging state changes.

BatteryManager Properties

The Battery Status API returns a BatteryManager object that exposes battery-related properties and events.

Property	Description	Example Value
level	Current battery charge from 0 to 1.	0.75
charging	Returns true if the device is charging.	true
chargingTime	Estimated seconds until fully charged.	3600
dischargingTime	Estimated seconds until battery is empty.	7200

Battery Status Events

Battery events allow applications to respond when the battery level, charging status, charging time, or discharging time changes.

Event	Triggered When
levelchange	The battery level changes.
chargingchange	The device starts or stops charging.
chargingtimechange	The estimated charging time changes.
dischargingtimechange	The estimated discharging time changes.

Battery Status API Use Cases

Because browser support is limited, the Battery Status API should be used only as a progressive enhancement. Applications must continue working even when battery data is unavailable.

Use Case	How It Helps
Reduce Background Work	Pause non-essential tasks when battery is low.
Lower Animation Activity	Reduce animations to save power.
Delay Sync Operations	Wait until charging before running heavy synchronization.
Optimize Media Quality	Lower video quality or effects on low battery.
Improve Mobile UX	Provide power-aware experiences for mobile users.

Battery Status API Best Practices

Always check whether navigator.getBattery exists before using it.
Use the API only as progressive enhancement.
Never block core functionality when battery information is unavailable.
Avoid collecting or storing battery data for analytics or tracking.
Respect user privacy and minimize battery-related logic.
Use general performance optimization techniques instead of relying only on battery data.
Provide the same essential experience for all users and browsers.

Common Battery Status API Mistakes

Assuming the Battery Status API works in every browser.
Using battery information for tracking or fingerprinting.
Breaking application behavior when the API is unavailable.
Running heavy background tasks even when battery is low.
Not removing event listeners when they are no longer needed.
Using battery state as the only performance optimization strategy.

Key Takeaways

The Battery Status API provides battery level and charging information.
The main method is navigator.getBattery().
Battery information should be used only as progressive enhancement.
Browser support is limited because of privacy concerns.
Applications must work normally when battery data is unavailable.
Power-aware design can improve user experience on mobile devices.

Important Note

The Battery Status API is not widely supported in modern browsers due to privacy and fingerprinting concerns. Use it carefully, avoid collecting battery data, and always design your application to work correctly without access to battery information.