HTML怎么做电池信息_HTML Battery Status电池信息获取解析

现代浏览器已废弃 Battery Status API，Chrome 80+、Firefox 109+默认禁用或移除，Safari从未支持；navigator.getBattery() 在HTTPS下仍报SecurityError或返回undefined，纯前端无标准替代方案。

现代浏览器已废弃 Battery Status API，无法可靠获取电池信息。 Chrome 从 80 版本起移除支持，Firefox 在 109 版本后默认禁用，Safari 从未实现。你看到的旧教程或示例代码现在基本都失效了。

为什么 navigator.getBattery() 总是报错或返回 undefined

这是最常见现象：调用后 Promise 拒绝、抛出 SecurityError，或直接返回 undefined。根本原因不是代码写错，而是浏览器策略变更：

• 该 API 被列为“不安全特性”，仅允许在 HTTPS + 安全上下文（如顶级页面）中使用，但即便满足条件，Chrome/Firefox 也已彻底下线
• 部分 Electron 或 WebView 环境可能仍保留，但行为不可靠，且无标准兜底逻辑
• 调用 navigator.getBattery() 不再触发权限提示——它被静默禁用，而非拒绝授权

替代方案：只能通过系统级或混合方式间接判断

纯前端 HTML/JS 已无标准途径。可行路径取决于你的实际场景：

• 如果是 PWA 应用：可尝试通过 chrome.runtime.sendNativeMessage 调用本地 Native Host 程序（如用 Python 读取 /sys/class/power_supply/BAT0/capacity），但需用户手动安装和授权，跨平台成本高
• 如果是桌面端（Electron）：直接使用 app.isPackaged + powerMonitor 模块监听 onBatteryStatus 事件，注意 Windows/macOS/Linux 返回字段不同（如 isBatteryPowered vs dischargingTime）
• 如果是移动 Web：完全不可行；iOS WebKit 明确屏蔽所有电源相关接口；Android Chrome 同样不响应 getBattery()

检查兼容性时别信 MDN 的“实验性”标签

MDN 页面仍保留文档，但底部小字写着 “Deprecated. Not for use in new websites.”。实测中：

立即学习“前端免费学习笔记（深入）”；

• Chrome 120+：调用 navigator.getBattery() 直接返回 Promise.reject(new DOMException("Operation is insecure."))
• Firefox 125+：即使在 about:config 中设 dom.battery.enabled = true，也只返回空 BatteryManager 对象（level 恒为 1，charging 恒为 true）
• 检测代码形如 if ('getBattery' in navigator) 已失去意义——它存在但不可用

真正要做的，不是修复某个函数调用，而是放弃依赖电池状态做核心逻辑。比如“低电量自动休眠”这类功能，必须降级为基于时间、用户交互或网络状态的启发式判断。浏览器把这块关死了，就没留缝。