How to Check Battery Status with JavaScript (Full Guide)

1. What is the Battery Status API?

The Battery Status API allows JavaScript applications to retrieve information about the system's battery — including charge level, charging status, and estimated time to full or empty.

This API is accessible via the navigator.getBattery() method, which returns a Promise that resolves to a BatteryManager object.

The BatteryManager object provides:
| Property | Description |
| ----------------- | ----------------------------------------- |
| charging | Boolean: true if device is charging |
| level | Battery level (between 0.0 and 1.0) |
| chargingTime | Seconds until battery is fully charged |
| dischargingTime | Seconds until battery is fully discharged |

Events:

chargingchange – triggered when charging status changes
levelchange – triggered when battery level changes
chargingtimechange – triggered when charging time estimate changes
dischargingtimechange – triggered when discharging time estimate changes

2.Basic Battery Check in JavaScript

Let’s start with a simple example to retrieve the current battery status:

if ("getBattery" in navigator) {
  navigator.getBattery().then(function(battery) {
    console.log("Battery Level:", battery.level * 100 + "%");
    console.log("Charging:", battery.charging ? "Yes" : "No");
    console.log("Charging Time (sec):", battery.chargingTime);
    console.log("Discharging Time (sec):", battery.dischargingTime);
  });
} else {
  console.log("Battery Status API not supported in this browser.");
}

Explanation
battery.level * 100 gives you a human-readable percentage.

battery.chargingTime and battery.dischargingTime provide estimates in seconds.

The API is asynchronous, so you must use .then() or async/await.

3.Real-Time Monitoring with Events

The real power of this API lies in its ability to listen for live battery status changes. Let’s set up dynamic listeners:

navigator.getBattery().then(function(battery) {

  // Initial values
  updateAll(battery);

  // Add event listeners
  battery.addEventListener("chargingchange", () => {
    console.log("Charging status changed:");
    console.log("Charging:", battery.charging);
  });

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

  battery.addEventListener("chargingtimechange", () => {
    console.log("Charging time updated:", battery.chargingTime + " seconds");
  });

  battery.addEventListener("dischargingtimechange", () => {
    console.log("Discharging time updated:", battery.dischargingTime + " seconds");
  });

  function updateAll(b) {
    console.log("Initial Status:");
    console.log("Charging:", b.charging);
    console.log("Level:", b.level * 100 + "%");
    console.log("Charging Time:", b.chargingTime);
    console.log("Discharging Time:", b.dischargingTime);
  }

});

You can now integrate this into any UI component to reflect real-time battery info.

4.Real-World Use Cases

Battery data can help apps behave smarter and be more user-friendly. Here are practical use cases:

Adaptive UI/UX

Reduce animations when battery is low.
Enable "Battery Saver Mode" (like disabling auto-play videos).

Media Apps

Stream at lower resolution when the device is discharging quickly.
Display warning prompts if battery is low before long downloads.

Smart Defaults

Enable dark mode automatically when on battery power.
Suggest closing power-hungry features or tabs.

Analytics

Gather insights on user behavior under low battery.
Optimize app engagement under different device conditions.

5. Privacy & Browser Support

Due to privacy concerns, the Battery Status API has faced criticism and deprecation in some browsers.

Not supported in:

Firefox
Safari
iOS browsers

Still works in:

Chrome
Edge
Opera
Most Chromium-based browsers

Privacy Concerns
Websites can fingerprint users by analyzing battery level fluctuations, charging patterns, and time estimates. This unique signature can be used to track users across sessions — even with cookies disabled.

As a result, W3C deprecated the API on the standards track.

6. Best Practices

To ensure your app behaves responsibly:

Use feature detection:

if ('getBattery' in navigator) {
  // Safe to use
} else {
  // Graceful fallback
}

Respect user battery status:
Only modify app behavior if it helps the user — don’t degrade experience unnecessarily.

Don’t fingerprint:
Avoid collecting or logging detailed battery data server-side.

Keep it optional:
Provide toggles or options if behavior changes based on battery (e.g., "Enable Battery Saver Mode").

Final Thoughts

While the Battery Status API may be on its way out in some ecosystems, it remains a useful tool in Chromium-based browsers. For web apps focused on mobile experience, power efficiency, or adaptive UX, it provides simple insights to make better decisions for users.

Use it responsibly, gracefully handle unsupported platforms, and design with user intent in mind.

Docy @docy