·您当前的位置:首页 > 技术教程 > Html5技术 >

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

时间:2017-03-06 14:14web前端教程
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 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>');

};

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器