1. 概述
Battery Status API，更多时候被称之为 Battery API, 提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。这个可以在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失。
Battery Status API 向 window.navigator 扩展了一个 navigator.getBattery 方法，其返回了一个 battery promise, 完成后传递一个 BatteryManager 对象，并提供了一些新的可以操作电池状态的事件。
2. BatteryManager接口
该接口接口提供了系统电池电量的一些信息。
2.1 实例属性
-
BatteryManager.charging只读属性一个布尔值，说明当前电池是否正在充电。
-
BatteryManager.chargingTime只读属性一个数字，代表距离充电完毕还需多少秒，如果为 0 则充电完毕。
-
BatteryManager.dischargingTime只读属性一个数字，代表距离电池耗电至空且系统挂起需要多少秒。
-
BatteryManager.level只读属性一个数字，代表系统电量的水平，这个值放缩在 0.0 至 1.0 之间。
实例如下，我用正在充电的手提电脑运行以下代码。
<div id="charging">(charging state unknown)</div>
navigator.getBattery().then(function(battery) {
console.log('%c 🍓 battery: ', 'font-size:20px;background-color: #33A5FF;color:#fff;', battery);
var charging = battery.charging;
document.querySelector('#charging').textContent = charging ;
});
打印的结果如下：
以上打印结果得知，charging属性是true,表明正在充电，chargingTime值为0表示充电已经完毕，确实是充满了。dischargingTime值为Infinity，因为一直充着电，所以是Infinity，最后是level值为1，表示系统电量的水平为1。 接着我拔开充电线，再查看一下。如图：
很明显，charging的属性变为false了，表示不在充电，chargingTime属性自然也是Infinity。
2.2 实例事件
以上处理四个只读属性外，还有四个监听事件，分别是：
- chargingchange
- chargingtimechange
- dischargingtimechange
- levelchange
chargingchange
该事件只有charging发生变化时，才能触发。
即，刚连接电源充电时触发一次，拔开充电电源时，触发一次。
以下两种方式监听：
addEventListener("chargingchange", (event) => { })
onchargingchange = (event) => { }
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
navigator.getBattery().then((battery) => {
battery.onchargingchange = () => {
document.querySelector("#level").textContent = battery.level;
document.querySelector("#chargingTime").textContent = battery.chargingTime;
};
// battery.addEventListener("chargingchange", (event) => {
// document.querySelector("#level").textContent = battery.level;
// document.querySelector("#chargingTime").textContent = battery.chargingTime;
// })
});
chargingtimechange
当距离充满电源的时间更新时，触发该事件。
可以实时监听电源的进度。
addEventListener("chargingtimechange", (event) => { })
onchargingtimechange = (event) => { }
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
navigator.getBattery().then((battery) => {
battery.onchargingtimechange = () => {
document.querySelector("#level").textContent = battery.level;
document.querySelector("#chargingTime").textContent = battery.chargingTime;
};
});
dischargingtimechange
当距离电池耗电至空且系统挂起需要多少秒发生更新时，就会触发。
addEventListener("dischargingtimechange", (event) => { })
ondischargingtimechange = (event) => { }
<div id="level">(battery level unknown)</div>
<div id="chargingTime">(charging time unknown)</div>
navigator.getBattery().then((battery) => {
battery.ondischargingtimechange = () => {
document.querySelector("#level").textContent = battery.level;
document.querySelector("#chargingTime").textContent = battery.chargingTime;
};
});
levelchange
当电量的水平发生变化时，事件就触发。
addEventListener("levelchange", (event) => { })
onlevelchange = (event) => { }
<div id="level">(battery level unknown)</div>
<div id="stateBattery">(charging state unknown)</div>
navigator.getBattery().then((battery) => {
battery.onlevelchange = () => {
document.querySelector("#level").textContent = battery.level;
if (battery.charging) {
document.querySelector("#stateBattery").textContent = `Charging time: ${
battery.chargingTime / 60
}`;
} else {
document.querySelector(
"#stateBattery"
).textContent = `Discharging time: ${battery.dischargingTime / 60}`;
}
};
});
