怎么使用HTML5中BatteryAPI实时监控设备剩余电量并提示低电量保护-H5教程-PHP中文网

battery status api 已被主流浏览器弃用并移除，因隐私安全风险被 w3c 标准废弃；调用 navigator.getbattery() 会失败，无标准化替代方案可获取精确电量，仅能通过 page visibility、online、prefers-reduced-motion 等间接优化体验。

怎么使用html5中batteryapi实时监控设备剩余电量并提示低电量保护

HTML5 的 Battery Status API（电池状态 API）曾提供获取设备电池信息的能力，但该 API 已被主流浏览器弃用并移除，目前无法在 Chrome、Firefox、Edge 或 Safari 中正常使用。自 2016 年起，Chrome 开始限制访问；2020 年后所有现代浏览器均已完全移除对 navigator.getBattery() 的支持，且不触发任何事件或返回有效数据。

为什么 Battery API 不再可用

出于隐私与安全考虑，浏览器厂商认定电池信息属于敏感硬件特征，可能被用于设备指纹追踪。W3C 也于 2019 年正式将该规范标记为 Deprecated（已弃用），并从标准中删除。

调用 navigator.getBattery() 在新版 Chrome/Firefox 中会返回 Promise 但始终 reject，或直接抛出 TypeError
即使旧版页面曾实现过低电量提醒，现在打开也会失效，控制台通常显示类似 getBattery is not a function 或权限拒绝提示
无替代的标准化 Web API 可以读取精确剩余电量百分比或充电状态

当前可行的替代方案

虽然无法精确读取电量，但可通过间接方式增强用户体验，尤其适用于 PWA 或桌面级 Web 应用：

利用 Page Visibility API：当用户切到后台或锁屏时暂停高耗电操作（如动画、轮询、音视频播放），减少电量消耗
响应 Navigator.onLine 与系统节电模式：部分浏览器（如 Chrome）在系统开启省电模式时会触发 reduceMotion 或降低定时器精度，可监听 window.matchMedia('(prefers-reduced-motion: reduce)') 做轻量化适配
PWA 中结合 OS 级能力（有限）：在安装为 PWA 后，Android 上可通过 TWA（Trusted Web Activity）桥接原生 Android BatteryManager，但需打包为 APK，不属于纯 Web 范畴

不推荐的“兼容尝试”

网上部分教程仍建议使用如下代码，但实际已无效，请勿依赖：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

// ❌ 已失效示例（现代浏览器中不会工作）<br>if ('getBattery' in navigator) {<br>  navigator.getBattery().then(battery => {<br>    battery.addEventListener('levelchange', () => {<br>      if (battery.level     });<br>  });<br>}

该逻辑在当前任意主流浏览器中均不会触发 levelchange 事件，battery.level 通常返回 1 或 undefined，且 Promise 极大概率被拒绝。