那些被忽略但很好用的 Web API / Battery

低电量～低～低～电量～吕士轩-低电量

今天要分享的也是一个使用情境偏少的 API，但如果你有想要做移动端的应用的话，或许可以尝试使用看看。

Battery

Battery API 是一个与使用者的装置电池相关的 API，我们可以透过它来得知电池的相关资讯，也可以监听电量的变化，以此来做到一些提示或警告的功能效果。

# Navigator.getBattery

装置电池的资讯会被包裹在一个叫做 BatteryManager 的物件中，要取得该物件的话，我们必须要透过呼叫 navigator.getBattery 来取得：

navigator.getBattery().then(battery =>  {
  console.log(battery) // BatteryManager
});

可以看到，互叫後 getBattery 回传的是 Promise，其被 resolve 後才会传递 BatteryManager 给我们，所以我们要用 then 去串接取得。

# BatteryManager

取得 BatteryManager 後，我们就可以看到里面会有四个比较重要的属性：

{
  charging: true,             // 是否正在充电
  chargingTime: 2940,         // 多少时间会满电（单位：秒）
  dischargingTime: Infinity,  // 多少时间会没电（单位：秒）
  level: 0.86                 // 目前的电量 （乘上100，即为百分比）
}

其中比较特别的是 chargingTime 和 dischargingTime，若是目前装置正在充电，那 dischargingTime 必为 Infinity，反之为充电时 chargingTime 必为 Infinity。

而除了上面这四个属性之外呢，你还会看到四个事件属性，让你可以监听不同的电量事件：

{
  onchargingchange: null,         // 监听充电状态
  onchargingtimechange: null,     // 监听满电时间
  ondischargingtimechange: null,  // 监听没电时间
  onlevelchange: null             // 监听电量
}

只要像下面这样撰写的话就可以在电池状态有变更的时候触发 Callback:

navigator.getBattery().then(battery =>  {
  battery.onchargingchange = function() {
    console.log(this.level)
  }
  // 或是这样写也可以
  battery.addEventListener("chargingchange", function {
    console.log(this.level)
  })
});

接下来我们只要透过以上这些属性就可以做到这样的一个小应用：

<div class="battery-level"></div>
<div class="battery-wrap"></div>

const batteryLevel = document.querySelector(".battery-level")
const batteryWrap = document.querySelector(".battery-wrap")

navigator.getBattery().then(battery => {
  const count = Math.floor(battery.level / 0.20);
  const callback = function() {
    batteryLevel.textContent = battery.level * 100 + "%";
    batteryWrap.innerHTML = "";
    for(let i = 0; i < count; i++) {
      const batteryLevel = document.createElement("div");
      batteryLevel.setAttribute("class", "battery");
      batteryWrap.appendChild(batteryLevel);
    }
  }
  battery.onlevelchange = callback;
  callback();
});