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:

Reading battery…

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

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.

Read the full writeup at https://seangeng.com/writing/reading-the-battery-in-the-browser.md and implement it in my project. It covers: Reading the battery in the browser. The Battery Status API gives you charge level, charging state, and time-to-full from JavaScript, and pushes events when they change. Here's a battery widget built on it, with a fallback for the browsers that dropped it. Requirements: - Follow the technique/approach exactly as described in the writeup. - Adapt names, colors, and styling to my project's existing conventions. - If it's a component, make it reusable with sensible props and TypeScript types. - Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion. - When done, tell me which files you created or changed and how to use it.

The API

The catch: it's Chromium-only

Ask your agent to implement this

The API

The catch: it's Chromium-only