HTML中如何使用Battery Status API获取电量信息-html教程-PHP中文网

navigator.getbattery() 并非所有现代浏览器都支持：chrome 38+、edge 79+、firefox 109+ 支持，safari 全系不支持；必须先检测 'getbattery' in navigator 再调用，返回 promise 且仅在 https 安全上下文中可用，移动端基本不可用。

html中如何使用battery status api获取电量信息

Browser support 与 navigator.getBattery() 是否可用

现代浏览器中，navigator.getBattery() 是获取设备电量状态的唯一标准接口，但它不被所有浏览器支持。Chrome 38+、Edge 79+、Firefox 109+ 支持；Safari 全系不支持（包括 iOS 和 macOS），且没有计划支持的公开信号。

调用前必须先检测是否存在：

if ('getBattery' in navigator) {
  navigator.getBattery().then(battery => {
    console.log(battery.level); // 0–1 之间的数值
  });
} else {
  console.warn('Battery Status API not supported');
}

不要假设 navigator.battery 存在——它已被废弃，仅旧版 Chrome 使用过
即使支持，navigator.getBattery() 返回的是 Promise，不能同步读取
部分 Android WebView 或 PWA 环境下可能因权限策略返回拒绝（如未启用「后台运行」或未通过 HTTPS）

监听电量变化：onchargingchange / onlevelchange / onchargingtimechange

电量信息是动态的，需通过事件监听更新状态，而不是只取一次值。三个核心事件对应不同状态变更：

onchargingchange：充电状态切换（插拔电源）
onlevelchange：电量百分比变化 ≥ 1%（注意：不是每次 0.1% 都触发）
onchargingtimechange：预估充满/耗尽时间变化（受负载影响大，精度低）

推荐写法（避免重复绑定）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

navigator.getBattery().then(battery => {
  const update = () => {
    console.log({
      level: battery.level,
      charging: battery.charging,
      chargingTime: battery.chargingTime, // 秒数，Infinity 表示未知或已满
      dischargingTime: battery.dischargingTime
    });
  };

  battery.addEventListener('levelchange', update);
  battery.addEventListener('chargingchange', update);
  battery.addEventListener('chargingtimechange', update);

  update(); // 立即触发一次
});

level 值不准？注意离散化和系统上报延迟

battery.level 是只读属性，范围为 0–1，但实际值往往被系统离散化处理。例如某些 Android 设备只上报 100% → 90% → 80%… 的整十数值，中间变化不会触发 levelchange。

不要用 battery.level === 0.5 做精确判断，改用范围比较：battery.level
battery.chargingTime 和 battery.dischargingTime 在多数设备上初始为 Infinity，需等待几秒才可能变为具体数值
部分笔记本在合盖休眠后，battery.level 可能长时间不更新，直到用户唤醒设备