[html5]API详解3：为何网页上要增加Battery电池状态API

手机自身的电源管理已经相当不错了，那为何网页上还要增加一个HTML5 Battery电池状态API呢？

随着HTML5以及CSS3技术支持与发展，以及手机越来越高性能带来的可行性。移动端的页面显然会越来越烧电。例如，流畅的动画效果，模糊阴影等视觉体验。因此可能会出现这样的情况，用户电量快不行了，又没有电源来一发，你的网页还呼呼的烧电，显然，这不是用户所愿意看到的。

因此，如果网页能够感知手机的电源，我们似乎能够为用户做的更多。

屏幕

1. 页面白色背景变灰一点，或整体暗度降低；

2. 移除gif动图

3. 移除一些不关键的动画

4. 如果可能的话，避免DOM操作

网络
手机网络或者wifi等的使用也是烧电的，我们可以：

1. 停止使用频繁的Ajax操作

2. HTML5离线存储技术

3. HTML5 WebStorage本地存储技术

4. 不要请求一些不重要的图片（如装饰性图片）

听觉和触觉输出
声音(HTML5 audio API)啊，震动（HTML5 vibrate API）什么的只会让手机早泄的更快。渐弱这些效果，或者干脆不用。

线程
借助Page Visibility API等，对于非激活态的选项卡页面，例如游戏页面什么的，都暂停掉。等其他一些省电的处理。这一里一外的用户体验，势必让产品更加人性化。

由此可见，HTML5 Battery API还是很有用的。

下面我们来学习一下Battery的使用！

注意：目前唯有手机QQ浏览器使用的x5内核比较良好的支持该API。但也只是部分属性支持，比如chargingTime 和dischargingTime 属性，显示的永远都是infinity（无限）。chargingtimechange 事件和dischargingtimechange 事件无法触发。

属性1：charging 表示电池是否在充电

属性2：chargingTime 表示电池充满需要的时间

属性3：dischargingTime 表示电池可用时间

属性4：level 表示电池当前的电量0 ~ 1

事件1：chargingchange 充电状态改变触发

事件2：chargingtimechange 所需充电时间改变触发

事件3：dischargingtimechange 剩余电量的是使用时间改变触发

事件4：levelchange 当前电量改变时触发

案例代码：

var battery = navigator.battery ||

navigator.webkitBattery ||

navigator.mozBattery ||

navigator.msBattery;

if(battery){

console.log(battery);

log('是否在充电：'+battery.charging);

log('充电时间：'+battery.chargingTime);

log('当前电量能用多长时间：'+battery.dischargingTime);

log('电量百分比：'+(battery.level*100)+'%');

battery.addEventListener("chargingchange", function(e) {

// 充电状态改变的时候会触发，例如发现正在充电，果断不使用节能模式。

log( battery.charging ? "电源已接通":"电源已断开");

}, false);

battery.addEventListener("levelchange", function (e) {

// 电池电量的百分比改变时候触发

log('电量百分比：'+(battery.level*100)+'%');

}, false);

battery.addEventListener("chargingtimechange",function(e){

// 还需要充电的时间改变的时候触发

log('充电时间：'+battery.chargingTime);

},false);

battery.addEventListener("dischargingtimechange",function(e){

// 剩余电量的使用时间改变时候触发

log('当前电量能用多长时间：'+battery.dischargingTime);

},false);

}

else{

console.log(battery);

document.write('你的浏览器不支持Battery API');

}

function log(str){

document.write(str+'<br>');

};