navigator.getBattery() is the entry point to the Battery Status API. Learn how to get a BatteryManager, read charging and level, listen for chargingchange, use HTTPS, and try five beginner examples.
Method
Promise<BatteryManager>
Limited availability
Secure (HTTPS)
Battery Status API
charging · level
Laptops and phones have a battery. Your page can optionally read a simple status snapshot — is it charging? how full is it? — through navigator.getBattery().
The method does not return the numbers directly. It returns a Promise that resolves to a BatteryManager object. From there you read properties and listen for change events.
Good uses: pause heavy animations on low battery, show a gentle “plug in” hint. Bad uses: fingerprinting or forcing behavior when the API is missing.
getBattery() Methodnavigator.getBattery().BatteryManager — properties include charging, level, chargingTime, dischargingTime.chargingchange, levelchange, time-change events.battery directive.General form of the method:
navigator.getBattery()Promise that fulfills with a BatteryManager object.// MDN: track charging state
let batteryIsCharging = false;
navigator.getBattery().then((battery) => {
batteryIsCharging = battery.charging;
battery.addEventListener("chargingchange", () => {
batteryIsCharging = battery.charging;
});
});
// Async / await with feature detect
async function readBatterySnapshot() {
if (!navigator.getBattery) return null;
const battery = await navigator.getBattery();
return {
charging: battery.charging,
levelPercent: Math.round(battery.level * 100)
};
}| Goal | Code |
|---|---|
| Feature detect | typeof navigator.getBattery === "function" |
| Get manager | const battery = await navigator.getBattery() |
| Charging? | battery.charging |
| Level 0–1 | battery.level |
| Listen for plug/unplug | battery.addEventListener("chargingchange", …) |
| Secure context? | window.isSecureContext |
Four facts to remember about navigator.getBattery().
PromiseBatteryManager
LimitedNot Baseline
HTTPSSecure required
0.0–1.0Multiply by 100
BatteryManager Properties| Property | Meaning |
|---|---|
charging | Boolean — currently charging? |
level | Number 0–1 — remaining charge fraction |
chargingTime | Seconds until full (or Infinity / 0 depending on state) |
dischargingTime | Seconds until empty (or Infinity when charging / unknown) |
Examples follow MDN Battery Status API patterns. Prefer Try It Yourself — many browsers omit the API, and desktops without a battery may report always-charging / full.
Detect the API and read charging state like MDN.
Check support and secure context before calling.
const lines = [
"getBattery: " +
(typeof navigator.getBattery === "function" ? "available" : "missing"),
"isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));If the method is missing, skip battery UX and keep the app fully usable.
MDN’s basic pattern: store battery.charging and update on change.
let batteryIsCharging = false;
if (!navigator.getBattery) {
console.log("getBattery not supported");
} else {
navigator.getBattery().then((battery) => {
batteryIsCharging = battery.charging;
console.log("charging: " + batteryIsCharging);
battery.addEventListener("chargingchange", () => {
batteryIsCharging = battery.charging;
console.log("charging changed: " + batteryIsCharging);
});
}).catch((err) => {
console.log("getBattery error: " + err.name);
});
}Always .catch — Permissions-Policy or insecure context can reject.
Read level percent, listen for updates, and react to low battery.
Convert level (0–1) into a friendly percentage.
async function getLevelPercent() {
if (!navigator.getBattery) return "getBattery not supported";
try {
const battery = await navigator.getBattery();
return "level: " + Math.round(battery.level * 100) + "%";
} catch (err) {
return "Error: " + err.name;
}
}
getLevelPercent().then(console.log);Listen to levelchange if you show a live percentage in the UI.
Log a full snapshot and attach common BatteryManager events.
async function watchBattery() {
if (!navigator.getBattery) return "getBattery not supported";
const battery = await navigator.getBattery();
const snapshot = () =>
"charging=" + battery.charging +
" level=" + Math.round(battery.level * 100) + "%";
console.log("initial: " + snapshot());
battery.addEventListener("chargingchange", () => {
console.log("chargingchange: " + snapshot());
});
battery.addEventListener("levelchange", () => {
console.log("levelchange: " + snapshot());
});
return "Listening for chargingchange + levelchange";
}
watchBattery().then(console.log);Remove listeners when your component unmounts to avoid leaks in SPAs.
Beginner UX helper: suggest reducing work when charge is low and not charging.
async function shouldUsePowerSaver(threshold = 0.2) {
if (!navigator.getBattery) {
return { powerSaver: false, reason: "unsupported" };
}
try {
const battery = await navigator.getBattery();
const low = battery.level <= threshold && !battery.charging;
return {
powerSaver: low,
reason: low ? "low-battery" : "ok",
levelPercent: Math.round(battery.level * 100),
charging: battery.charging
};
} catch (err) {
return { powerSaver: false, reason: err.name };
}
}
shouldUsePowerSaver().then((result) => {
console.log(JSON.stringify(result));
});Treat power-saver as optional: never break core features when battery data is unavailable.
BatteryManager events safely.navigator.getBattery() WorksConfirm getBattery exists on HTTPS / localhost.
Receive a BatteryManager (or catch a policy / security error).
Use properties for a snapshot; listen for change events.
Optional power-saver hints — never hard-require battery data.
battery (NotAllowedError).navigator.getBattery() implements the Battery Status API and is not Baseline. Chromium browsers support it in secure contexts; Firefox removed it for privacy; Safari support is limited or absent. Always feature-detect, use HTTPS, and keep core UX independent of battery data.
Promise → BatteryManager — charging, level, and change events.
Bottom line: Detect getBattery, await BatteryManager on HTTPS, handle rejections, and never require battery status for essential features.
navigator.getBattery() opens the Battery Status API with a Promise for a BatteryManager. Detect support, use HTTPS, read charging and level, listen for changes, and treat battery insights as optional UX — never as a hard dependency.
Continue with getGamepads(), getAutoplayPolicy(), or the JavaScript hub.
navigator.getBatterygetBattery()Promise → BatteryManager — optional power-aware UX.
Promise
BatteryManagerLimited
Not Baselinesecure HTTPS
Requiredcharging · level
Statusoptional UX
PrivacyOn many desktop machines without a battery (or with the OS reporting “always plugged in”), charging may stay true and level may stay at 1. Always treat those values as hints, not absolute truth.
Read controller buttons and axes for browser games.
8 people found this page helpful