如何使用 JavaScript 操作设备的电量 (Battery Status API)？

推荐答案

// www.javascriptcn.com code example
async function getBatteryStatus() {
  try {
    if ('getBattery' in navigator) {
      const battery = await navigator.getBattery();

      const charging = battery.charging;
      const chargingTime = battery.chargingTime;
      const dischargingTime = battery.dischargingTime;
      const level = battery.level;

      console.log('Battery Charging:', charging);
      console.log('Battery Charging Time (seconds):', chargingTime);
      console.log('Battery Discharging Time (seconds):', dischargingTime);
      console.log('Battery Level:', level * 100 + '%');


      battery.addEventListener('chargingchange', () => {
        console.log('Charging Status Changed:', battery.charging);
      });

      battery.addEventListener('levelchange', () => {
        console.log('Battery Level Changed:', battery.level * 100 + '%');
      });


    } else {
      console.log('Battery Status API is not supported in this browser.');
    }
  } catch (error) {
      console.error('Error getting battery status:', error);
  }
}

getBatteryStatus();

本题详细解读

Battery Status API 简介

Battery Status API 提供了一种方式，让 Web 应用程序可以访问设备的电池信息，包括电量水平、充电状态等。这使得开发者可以根据设备的电池状态优化应用性能，例如在低电量时禁用耗电功能，或提示用户连接电源。

API 使用步骤

1. 检查 API 支持: 首先要检测当前浏览器是否支持 navigator.getBattery 方法。如果不支持，则不能使用此 API。
2. 获取 BatteryManager 对象: 使用 navigator.getBattery() 方法返回一个 Promise，该 Promise resolves 为一个 BatteryManager 对象。
3. 读取电池信息: BatteryManager 对象提供了以下属性：
   • charging: 布尔值，指示设备是否正在充电。
   • chargingTime: 数值（秒），表示设备充满电还需要多长时间。如果无法确定，则为 Infinity。
   • dischargingTime: 数值（秒），表示设备电量耗尽还需要多长时间。如果无法确定，则为 Infinity。
   • level: 0 到 1 之间的数值，表示当前电池电量水平。 1 表示满电，0 表示空电。
4. 监听事件: BatteryManager 对象可以监听以下事件：
   • chargingchange: 当 charging 属性的值发生变化时触发（充电状态改变）。
   • levelchange: 当 level 属性的值发生变化时触发（电量水平改变）。
   • chargingtimechange 当 chargingTime 属性的值发生变化时触发（充满电时间改变）。
   • dischargingtimechange 当 dischargingTime 属性的值发生变化时触发（放电时间改变）。
5. 处理异常: 捕获 navigator.getBattery() Promise 的 rejection， 以处理任何获取电池状态的错误。

代码解释

• async function getBatteryStatus() 定义一个异步函数，以便使用 await 获取 Promise 的结果。
• if ('getBattery' in navigator) 检测 navigator 对象是否包含 getBattery 方法。
• const battery = await navigator.getBattery(); 获取 BatteryManager 对象。
• battery.charging, battery.chargingTime, battery.dischargingTime, battery.level 分别获取充电状态、充电时间、放电时间和电量水平。
• 使用 addEventListener 监听 chargingchange 和 levelchange 事件，当充电状态或电量水平发生改变时，在控制台输出对应信息。
• try...catch 结构用来捕获可能出现的错误，比如用户权限被拒绝或浏览器不支持的情况。

注意事项

• Battery Status API 在某些浏览器和设备上可能不可用。
• 出于隐私考虑，某些浏览器可能限制访问电池信息。
• 由于该API需要https协议或者localhost访问，因此需要确保代码在安全的环境中运行，才能使用。