浏览器的电源接口由 Battery Status API 实现,目前的整体兼容性不太好,也就 Chrome 浏览器支持,但考虑到 Chrome 市场占比较大,结合 Battery API 其实可以存在更多的可能性。

封装一层 API

基本上官方文档是使用 Promise 回调中进行事件绑定:

navigator.getBattery().then(function(battery) {
 // Update the battery status initially when the promise resolves ...
 updateBatteryStatus(battery);
 // .. and for any subsequent updates.
 battery.onchargingchange = function () {
 updateBatteryStatus(battery);
 };
 battery.onlevelchange = function () {
 updateBatteryStatus(battery);
 };
 battery.ondischargingtimechange = function () {
 updateBatteryStatus(battery);
 };
});

并且实测发现 charging 和 level 可用性比较好,我们针对 Battery 进行简单的二次封装:

// 绑定事件:电池相关回调
Page.on('event:battery', (event) => {
 event = {
 name: 'event:battery',
 data: {
 level: 0-1,
 charging: true/false
 }
 };
});

为什么要使用事件订阅模式呢?因为我接下来还要研究很多偏门但对体验有帮助的 Web API ,敬请期待~

使用场景

1. 数据轮询降频

当检测到用户端设备非充电状态时,可以根据用户电池电量的比例来针对性对页面数据轮询的请求进行相应的降频,这样可以相对来节省用户设备电量,代码如:

let duration = 5 * 1000; // 默认5秒轮询
const fn = () => {
 fetch(...);
 setTimeout(fn, duration);
};
fn();
// 当非充电状态且电量小于 80% 让轮询间隔为10秒
Page.on('event:battery', (event) => {
 if (event.data.charging) {
 duration = 5 * 1000;
 } else if (!event.data.charging && event.data.level < 0.8) {
 duration = 10 * 1000;
 }
});

2. 动画降频

同数据轮询降频逻辑一致,页面会有一些高特效、浪费 GPU 的开销,相应的减少特效的频次、频率、时长也会对节能有帮助。

3. 省电模式

可以根据自身产品特点设计一套"省电模式",当电量达到临界值时给予一定提示,甚至询问用户是否开启省电模式,甚至还可以跟用户的个人设置进行关联。

省电模式下还可以针对数据压缩、全埋点日志、图片质量、极简版式、数据预取方式、图片加载策略、默认播放清晰度等等都可以有一定的干预。

发表于 2022年03月08日 20:23:19 ,添加在分类 前端技术 下 ,并被添加「 用户体验 前端优化 Battery 」标签 ,最后修改于 2022年03月08日 21:11:23