使用 BatteryManager 来查看电池状态

大家都知道HTML5中新增了不少有意思的API,比如消息通知(Notification)、定位(Geolocation)、音乐、视频。。。在去年,我利用一些API写了一个简单的音乐可视化的小玩意,演示地址:http://blog.codeartisan.name/music-visualizer/。今天我们来看看BatteryManager这个API,看看它能干些什么。

根据 mozilla 社区提供的文档,我们可以看到关于 BatteryManager 的简介:BatteryManager 接口提供方法获取系统电量。navigator.getBattery 方法返回一个promise对象,该promise将提供一个BatteryManager接口,你可以从 Battery Status API 查询到相关信息。关看不练假把式,干技术的,怎么能只看不动手呢?来个例子玩玩吧!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
navigator.getBattery().then((response) => {
console.log(response);
response.onchargingchange = function (event) {
console.log(response.charging);
};
response.ondischargingchange = function (event) {
console.log(response.dischargingTime);
};
response.ondischargingtimechange = function (event) {
console.log(response.dischargingTime);
};
response.onlevelchange = function () {
console.log(response.level);
}
});

你可以拷贝以上的代码片段,粘贴到 console 面板中执行,看看都有什么信息返回。我这里的返回信息见下图:

0d5644e7-6f60-463c-ad48-8d6849bc77c4
image
image

其中 charging 是指当前电池是否正在充电,chargingTime 代表距离充满电还需要多少时间(注意:单位是秒),如果为0则充电完毕。dischargingTime 代表距离电池耗尽且挂起需要多少秒,如果电池是充电状态,返回的则是Infinity,level 代表电量的放大等级,这个值在 0.0 到 1.0 之间,剩下几个为事件回调函数。

属性:

  • BatteryManager.charging(只读) 一个布尔值,说明当前电池是否正在充电。
  • BatteryManager.chargingTime (只读) 一个数字,代表距离充电完毕还需多少秒,如果为0则充电完毕。
  • BatteryManager.dischargingTime (只读) 一个数字,代表距离电池耗电至空且挂起需要多少秒。
  • BatteryManager.level (只读) 一个数字,代表电量的放大等级,这个值在 0.0 至 1.0 之间。

事件:

  • BatteryManager.onchargingchange 当充电池充电时且电量发生改变时会被触发。
  • BatteryManager.onchargingtimechange 当充电池充电时且所需充电时间发生改变时会被触发。
  • BatteryManager.ondischargingtimechange 当电池放电(即非充电状态)且距离电池耗尽时间发生改变时会被触发。
  • BatteryManager.onlevelchange 当电量放大等级发生改变时会被触发。

兼容:

image
image

扩展阅读:

1、https://developer.mozilla.org/zh-CN/docs/Web/API/BatteryManager
2、https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/getBattery