舒彩光的互联网生涯
用心做事做人,做最认真的程序员

如何使用HTML5检测电池的状态?

2014年01月07日 00:41,by 舒彩光

一个充满电的手机或平板电脑只能使用7-8小时左右,而笔记本电脑只能使用4小时左右。电池技术技术始终跟不上移动设备的计算能力。10年前也许你的PDA用两台AAA电池持续工作一个月,但如今,你每晚的工作就是给手机充电。

在开发web应用程序时,我们很少担心电池的寿命,但现在大约有五分之一的用户在使用手机。Mozilla和Google开始联合实施了一个电池状态API,并且使用起来很简单。

哪些是不容易做到的?

当电池没有电池我们很容易检测到。但检测到没电的状态后,我们可以做什么呢?这将取决于你的应用。消耗电量的原凶是……

屏幕

手朵屏幕是消耗我们电能的首要元凶。当电池电量不足时,你可以做以下操作:

  • 使用亮度较暗的样式。
  • 禁用不重要的CSS和javascript动画。
  • 尽可能避免更改DOM结构。

网络传输

WIFI和无线网络会消耗电能传输无线电波,建议:

  • 减少或停止频繁的AJAX请求。
  • 使用缓存或创建离线APP
  • 使用Web Storage将数据存储到客户端
  • 避免请求不重要的资源,比如图片

声音和震动

声音和震动是电量的杀手,你可以使用简短的音响效果,或干脆禁用声音。

处理器

繁重的计算任务使电池电量会产生明显的下降,并使手机大量的发热。除了手机游戏外,也有少量的客户端程序的需要大量且持久的运算,使电量大量的下降。我猜测很少的应用会设计成这样,除非你让用户边充电边使用。

你可以使用“页面可见性API”来节约电能。比如,一个游戏页面不在当前标签页中,这个游戏会暂运行,直到你回到这个页面。

浏览器支持

支持Battery API的浏览器有:

  • Firefox 桌面版和移动版。(navigator.battery)(FF10到FF16使用navigator.mozBattery)
  • 最新版的Chiome(navigator.webkitBattery)

我们可以使用如下面的方法检测浏览器是否支持电量API.

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
if (battery) {
	//支持电池电量API
}

点击链接测试你的浏览器是否支持电池API

常用属性

你可以通过navigator.battery.level来获取电池的电量。返回的数值是介于0和1之间的小数。

console.log( "电量: ", Math.floor(battery.level * 100) + "%" );

然而,如果手机正在充电,这时获取电池的电量就不重要了。我们可以通过navigator.battery.charging来检测是否在充电。它返回true(在充电)或flase(不在充电)。

console.log( "状态", (battery.charging ? "在充电" : "不在充电") );

接下来,我们来一些实战内容吧。当电池电量低下,比方25%。并且没有在充电。

var enableEffects = (battery.charging || battery.level > 0.25);
 
// 震动一秒种
if (enableEffects) navigator.vibrate(1000);

还有两个属性我们需要了解一下:

  • navigator.battery.chargingTime——返回值为秒数,返回开始充电到电充满把经历的时间。
  • navigator.battery.dischargingTime——返回值为秒数,返回从使用到手机没电快要关机时所经历的时间。

这两个属性的用处不是很大,比如在Firefox中他们总是返回0或无穷大。

电池状态事件

共有四个事件:

  • chargingchange——当开始对手机充电或断开充电器时发生该事件
  • levelchange——电池的电量发生变化时触发该事件。
  • chargingtimechange——电池完全充满时触发该事件
  • dischargingtimechange——电池的电完全用完触发该事件

我们来看一个示例:

battery.onlevelchange = function() {
    var ee = enableEffects;
    enableEffects = (battery.charging || battery.level > 0.25);
     
    if (enableEffects != ee) {
        if (enableEffects) {
            console.log( "Battery power is OK." );
        }else {
            console.log( "Battery power is critical!" );
        }
    }
}