by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3922

该死，忘记充电了

21世纪出的基本生理需求已经不是食物了，而是电源和wifi.

没电没网寸步难行，有电有网雷厉风行。

因此，手机上实时反馈电量的一些信息很有必要。

所有的手机系统对此都有不错的反应。比如说下面这个：

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

随着HTML5以及CSS3技术支持与发展，以及手机越来越高性能带来的可行性。移动端的页面显然会越来越烧电。例如，流畅的动画效果，模糊阴影等视觉体验。因此可能会出现这样的情况，用户电量快不行了，又没有电源来一发，你的网页还呼呼的烧电，显然，用户一旦感觉到浏览这破页面手机电量流失比武大郎那个还快，怕是会红杏出墙，寻找类似西门庆这种更持久的产品了。

因此，如果网页能够感知手机的电源，我们似乎能够为用户做的更多。比方说，当用户电量不足15%, 需要再来一发的时候，我们网页端提示：“尊敬的用户你好，您的手机需要来一发，是否需要进入省电浏览模式？需要 不需要”。如果用户点击需要省电，则我们可以：

屏幕

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还是很有用的。

HTML5 Battery的属性、方法

目前手机上浏览器多半webkit内核，目前PC要想测试这个API，只有FireFox浏览器支持。因此，API使用之前，需要如下捕获：

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
 
if (battery) {
    // battery API可用
}

一些属性如下：

• battery.charging 布尔值。表示是否正在充电，如果返回值是true，则表示正在充电。
• battery.chargingTime 数值。PC上值为0.
• battery.level 数值。0~1. 显示电池电量的百分比，1表示电量满血复活。
• battery.dischargingTime 数值或关键字字符串。显示当前电量能使用多长时间。在PC上，此数值为“无限”，也就是“英菲尼迪”(Infinity)。

在FireBug控制台测试结果如下截图：

目前PC上的Chrome不鸟该API，包括mac.

一些方法

battery.addEventListener("chargingchange", function (e) {
   // 充电状态改变的时候会触发，例如发现正在充电，果断不使用节能模式。
}, false);
battery.addEventListener("chargingtimechange", function (e) {
   // 还需要充电的时间改变的时候触发
}, false);
battery.addEventListener("dischargingtimechange", function (e) {
   // 剩余电量的使用时间改变时候触发
}, false);

battery.addEventListener("levelchange", function (e) {
   // 电池电量的百分比改变时候触发
}, false);

由于我的手机浏览器不支持HTML5 Battery API，身边也没有测试机，因此恕我无法呈现demo。

不过，您可以试试下面这个我厂其他同事制作的demo, 二维码扫起来：

我个人觉得，HTML5 Battery API的实际应用，绝不是上面的电池管理，这个手机自身就做得不错，没必要重复造轮子。而是应该通过感知手机电池的状态，让我们的web页面在不同电量下做不同的事情。也就是我们常常听到的：人性化以及智能化！

参考文章+新年祝福

• HTML5 Device API(一)
• How to Use the HTML5 Battery Status API

最后的最后，祝您新年快乐，策马奔腾！微信红包抢的都是最大的！！

本文为原创文章，包含脚本行为，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=3922

（本篇完）