HTML怎么做电池状态检测_html Battery API电池状态获取速查

navigator.getBattery()基本不可用，因Chrome 120+默认禁用、Firefox 109起移除、Safari从未支持，调用常返回undefined或TypeError；纯HTML无法检测电池状态，真实项目应移除该功能或改用服务端下发的用户偏好。

HTML 本身不能检测电池状态——必须通过 JavaScript 调用 navigator.getBattery()，且该 API 已被现代浏览器逐步弃用或限制，实际可用性极低。

为什么 navigator.getBattery() 基本不可用

Chrome 从 120+ 版本起默认禁用该 API（仅在 HTTPS + 安全上下文下对部分桌面端临时开放），Firefox 自 109 起完全移除，Safari 从未支持。调用后常见返回：undefined 或直接抛出 TypeError: navigator.getBattery is not a function。

• 它不是 HTML 属性或标签，<meta>、<script> 标签里写死也无效
• 即使成功获取，返回的 BatteryManager 对象是只读的，无法触发硬件级检测
• 移动端 WebView（如微信、QQ 内置浏览器）几乎全部屏蔽，连 Promise 都不会 resolve

替代方案：用 Navigator.onLine + 系统提示做粗略判断

虽然不能读取电量百分比，但可监听系统级低电量事件（需用户授权且仅限 PWA）：

• 注册 PWA 后，在支持的 Android Chrome 中可监听 lowpowermodechange 事件（非标准，仅实验性）
• 更现实的做法是检查 navigator.onLine 并结合用户手动选择（如设置页加个「省电模式」开关）
• 若页面已离线（navigator.onLine === false），大概率设备处于深度休眠或电量耗尽边缘，可提前降级 UI

真要显示电量？只能靠客户端桥接

Web 页面纯前端无解。可行路径只有：

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

• Electron / Tauri 桌面应用：用 systeminformation.battery()（Node.js 层）或 app.getGPUInfo() 间接推断
• Android/iOS 原生 App 内嵌 WebView：通过 JSBridge 向宿主发消息，由 Java/Kotlin 或 Swift 获取 BatteryManager 或 UIDevice.batteryLevel 后回传
• PWA 添加 "permissions": ["battery-status"] 到 manifest.json —— 但目前没有任何浏览器会真正授予该权限

别在 HTML 里折腾 <meter> 或 CSS 动画模拟电池图标了，只要 navigator.getBattery() 返回 undefined，所有后续逻辑都跑不起来。真实项目中，建议直接移除该功能，或改用服务端下发的用户设备偏好（比如用户上次手动选的「深色+省电」模式）。