Reading the battery in the browser

I didn't know the browser would just tell you the battery level until Bilal Hussain posted it. One call, and you get charge, charging state, and time-to-full:

The API

navigator.getBattery() resolves to a battery object with four live properties:

const battery = await navigator.getBattery();
 
battery.level;            // 0..1  (0.22 = 22%)
battery.charging;         // boolean
battery.chargingTime;     // seconds until full, or Infinity
battery.dischargingTime;  // seconds until empty, or Infinity

The nice part is you don't poll. The object fires events when anything changes, so you read once and re-read on each event:

const read = () => render(battery);
read();
battery.addEventListener("levelchange", read);
battery.addEventListener("chargingchange", read);

Plug battery.level into the width of a fill bar, swap the color by charge (green, amber, red), drop in a bolt when charging is true, and the raw number turns into something you'd actually ship.

The catch: it's Chromium-only

This is where it gets interesting. The Battery Status API only exists in Chromium now. Firefox and Safari both removed it, and for a good reason: a precise charge level combined with the discharge-time estimate is a surprisingly strong fingerprint. Two visits a few seconds apart share a battery reading almost no other device has at that exact moment, which is enough to re-link a user who cleared their cookies. Researchers showed this in practice, and the feature got pulled.

So treat it as progressive enhancement. Feature-detect getBattery, and have a real plan for when it's absent rather than rendering a broken empty state. The widget above animates a simulated battery on those browsers, labelled as simulated, so it still reads as a battery instead of an error.

if ("getBattery" in navigator) {
  // live readout
} else {
  // simulate, or hide the widget entirely
}

Inspired by Bilal Hussain. Grab the component on the Battery Status page.