引言
前端其实也能获取电池信息，以往都是通过客户端提供的JSBridge获取
获取电池信息
通过 Battery Status API,前端可以获取用户设备电池的相关信息,比如电量百分比、充电状态等。
// 获取 BatteryManager 对象 navigator.getBattery().then(battery => { // TODO });
- BatteryManager 对象提供了 level、charging、chargingTime 等属性反映电池状态。
- 监听 chargingchange、levelchange 等事件可以感知状态变化。
不同电量的反馈
获取电池信息后,可以根据电量百分比显示不同的提示:
- 电量低于 20%时,给出明显的低电量警告,建议立即充电
- 电量在 20% ~ 40%时,给出友善的充电提醒
- 电量充足时,不需要特殊反馈
针对充电状态,也可以给出不同的反馈:
- 当设备处于充电状态,可以显示充电图标、电量数字的充电动画等
- 不在充电时,显示普通的电量信息
// 处理不同电量的反馈 function handleBattery(battery) { if (battery.level < 0.2) { showWarning(); } else if (battery.level < 0.4) { showReminder(); } if (battery.charging) { showCharging(); } else { showLevel(battery.level); } } // 监听电池状态变化 navigator.getBattery().then(battery => { battery.addEventListener('chargingchange', () => { handleBattery(battery); }); // ...其他事件监听 })
兼容性
