HTML5如何借助BatteryAPI获取电量数据_HTML5电量取数法【拾萃】

现代浏览器已弃用 Battery API，navigator.getBattery() 不再可用；Chrome 120+、Firefox 125+、Edge 已禁用，仅能通过 Electron、PWA 原生桥接或本地代理服务获取电量信息。

Browser 不再支持 navigator.getBattery() —— 这不是你代码写错了，而是现代浏览器已普遍弃用 Battery API。

为什么调用 navigator.getBattery() 总是返回 Promise rejected

Chrome 从 120 版本起、Firefox 自 125 起、Edge 同步跟进，均已禁用该 API。触发条件包括：

• 页面未运行在 https://（但即使 HTTPS 也不再管用）
• 用户未主动交互（实际已无关紧要）
• 系统策略强制关闭（当前主流行为）

错误典型表现为：

Uncaught (in promise) TypeError: navigator.getBattery is not a function

或更隐蔽的：

Promise {}
// 然后永远 pending，不 resolve 也不 reject

替代方案只有服务端 + 硬件配合

纯前端 HTML5 已无合法、稳定、跨平台的电量读取路径。可行路径仅剩：

• Electron 应用：通过 powerMonitor 模块监听 onBatteryStatus
• PWA + 原生桥接（如 Capacitor / Cordova）：调用 iOS UIDevice.batteryLevel 或 Android BatteryManager
• 桌面端 WebApp 配合本地代理服务：例如用 Node.js 启一个 http://localhost:3001/

  

  battery 接口，由本地程序读取系统电源状态并返回 JSON

示例（Node.js 本地代理返回）：

{
  "level": 0.72,
  "charging": true,
  "dischargingTime": 7200,
  "chargingTime": 1800
}

别再尝试 Polyfill 或降级 fallback

所有基于 navigator.getBattery() 的封装库（如 battery-js、power-monitor-web）均已失效。常见误操作包括：

• 加 try/catch 后 fallback 到 mock 数据 —— 用户感知明显，且违反 PWA 可信原则
• 监听 visibilitychange 后重试 —— 无意义，API 已被移除而非延迟加载
• 检查 'battery' in navigator —— 现代浏览器返回 false，无法动态恢复

Chrome DevTools 的 Application → Manifest 面板里，“Battery status” 权限条目已彻底消失。

真正需要电量信息的场景（比如低电量自动暂停视频下载），必须接受「前端不可知」这一事实，把判断逻辑下沉到客户端进程或原生层。Web 层只负责接收和响应，不负责采集。