浏览器电池 API（Battery Status API）详解
Battery Status API（电池状态 API）允许 Web 应用程序访问用户设备的电池状态信息，例如电量、充电状态、充电时间和放电时间等。开发者可以通过这个 API 提供更节能的用户体验，比如在低电量时降低动画效果或减少资源消耗。
1. Battery API 简介
Battery API 通过 navigator.getBattery() 方法获取 BatteryManager 对象，该对象提供了各种电池相关信息及事件监听功能。
检查浏览器支持情况
if ("getBattery" in navigator) {
console.log("浏览器支持 Battery API");
} else {
console.log("浏览器不支持 Battery API");
}
2. navigator.getBattery() 方法
该方法返回一个 Promise，解析后得到 BatteryManager 对象，包含电池的详细信息。
基本用法
navigator.getBattery().then(function (battery) {
console.log("电量: " + battery.level * 100 + "%");
console.log("是否充电中: " + battery.charging);
console.log("充电时间: " + battery.chargingTime + " 秒");
console.log("放电时间: " + battery.dischargingTime + " 秒");
});
3. BatteryManager 对象
BatteryManager 对象提供了多个属性和事件，可以用于获取电池状态并监听变化。
（1）BatteryManager 属性
属性类型描述chargingboolean是否正在充电（true= 充电中，false= 放电中）chargingTimenumber预计充满电所需时间（单位：秒，0 表示已充满）dischargingTimenumber预计电池用尽时间（单位：秒，Infinity 表示充电状态）levelnumber电池电量（范围 0.0 - 1.0，如 0.75 代表 75%）（2）BatteryManager 事件
Battery API 允许监听电池状态变化，提供以下事件：
事件名触发时机chargingchange充电状态发生变化（true ↔ false）levelchange电池电量发生变化（充电或放电）chargingtimechange充电时间变化（不同充电状态）dischargingtimechange预计电池放电时间变化
4. Battery API 实战
监听电池状态变化
可以使用 addEventListener 监听 BatteryManager 事件，动态响应电池状态变化。
navigator.getBattery().then(function (battery) {
function updateBatteryInfo() {
console.log("电量: " + battery.level * 100 + "%");
console.log("是否充电中: " + battery.charging);
console.log("充电时间: " + battery.chargingTime + " 秒");
console.log("放电时间: " + battery.dischargingTime + " 秒");
}
// 初始电池信息
updateBatteryInfo();
// 监听电池状态变化
battery.addEventListener("chargingchange", updateBatteryInfo);
battery.addEventListener("levelchange", updateBatteryInfo);
battery.addEventListener("chargingtimechange", updateBatteryInfo);
battery.addEventListener("dischargingtimechange", updateBatteryInfo);
});
5. 低电量优化示例
当电池电量低时，减少资源消耗（如降低动画帧率、暂停后台任务等）。
navigator.getBattery().then(function (battery) {
function checkLowBattery() {
if (battery.level < 0.2 && !battery.charging) {
console.warn("⚠ 电量低于 20%，建议减少动画效果！");
document.body.style.filter = "grayscale(100%)"; // 变灰色以节能
} else {
document.body.style.filter = "none";
}
}
checkLowBattery();
battery.addEventListener("levelchange", checkLowBattery);
});
6. 兼容性
Battery API 主要支持桌面端和部分移动设备：
浏览器支持情况Chrome✅ 支持Edge✅ 支持Firefox❌ 已移除（从 v52 开始）Safari❌ 不支持Opera✅ 支持
7. 总结
Battery API 允许网页获取设备的电池状态，如电量、充电状态、预计充满/放电时间。通过 navigator.getBattery() 获取 BatteryManager 对象。提供了多个 属性（level、charging 等）和 事件（levelchange、chargingchange 等）。适用于 优化用户体验，如低电量时减少动画、降低资源消耗等。目前 Firefox 和 Safari 不支持，在使用前需检查兼容性。
示例：完整 Battery API 监控界面
Battery 状态监控
加载中...
🔋 这个网页会 实时显示电池状态，可以尝试拔掉电源或连接充电器，查看信息变化！
总结
Battery API 适用于节能优化（如减少动画、降低刷新率）。属性：level（电量）、charging（是否充电）、chargingTime（充电时间）、dischargingTime（放电时间）。事件：chargingchange、levelchange、chargingtimechange、dischargingtimechange。兼容性：不适用于 Safari 和 Firefox，但适用于 Chrome、Edge 和 Opera。