网页 API 为开放网页应用程序提供了一种通过 JavaScript 访问设备硬件、数据和传感器的途径，为移动设备、电视、交互式信息亭和物联网 (IoT) 应用程序开辟了许多可能性。

了解设备的电池状态在许多情况下或用例中都很有用。以下是一些示例：

• 收集电池使用统计数据或简单地告知用户设备是否已充满电以玩游戏、观看电影或浏览网页的实用应用程序。
• 优化电池消耗的高质量应用程序：例如，如果设备电量不足，电子邮件客户端可能会减少检查服务器是否有新邮件的频率。
• 文字处理器可以在电池耗尽之前自动保存更改，以防止数据丢失。
• 一个系统检查安装在展厅或活动中的交互式信息亭或电视是否正在充电，或者电缆是否出现问题。
• 一个模块检查无人机的电池状态，以便在无人机电量耗尽之前将其送回基地。

本文介绍了一种管理能源消耗的标准化方法：电池状态 API。

电池状态 API

开放网页应用程序可以通过 电池状态 API 获取电池状态信息，这是一个 W3C 建议，自 Firefox 16 版本起得到支持。该 API 还受到 Firefox OS 的支持，最近还得到 Chrome、Opera 和 Android 浏览器的支持，因此现在可以在许多主要平台上用于生产。

此外，W3C 建议最近得到了改进，引入了 Promise 对象，并能够处理安装在同一设备上的多个电池。

截至撰写本文时，此 W3C 更新 尚未由 Firefox 实现：请检查以下错误以获取实现更新或如果您想为 Gecko 开发做出贡献。

• [1050749] 通过返回 Promise 而不是同步访问器 (navigator.battery) 来公开 BatteryManager。 navigator.getBattery() 方法现在可以在 Firefox 43 中使用。
• [1050752] BatteryManager：指定主机设备有多个电池时的行为。

下面我们将看看如何在运行在 Firefox OS 和当前支持该 API 的所有浏览器上的即时消息应用程序中使用电池状态 API。

演示：低能耗消息

低能耗消息是一个即时消息演示应用程序，它密切关注电池状态。该应用程序使用 HTML + CSS + Javascript（无库）构建，并使用静态数据。它不包含在互联网上运行的 web 服务，但包含与电池状态 API 的实际集成，并具有逼真的外观和感觉。

您将找到一个 低能耗消息的工作演示，以及 GitHub 上的演示代码，以及一篇名为 检索电池状态信息 的 MDN 文章，该文章逐步解释了代码。

低能耗消息具有以下功能：

• 一个电池状态栏，包含电池状态信息。
• 一个聊天部分，包含所有接收或发送的消息。
• 一个操作栏，包含一个文本字段、一个发送消息按钮、一个拍照按钮和一个在 Firefox OS 上安装应用程序的按钮。
• 为了在电量不足时节省电池寿命，该应用程序不允许用户在设备电量不足时拍照。

应用程序状态栏中电池的视觉表示会根据充电级别而改变。例如：

低能耗消息包含一个名为 EnergyManager.js 的模块，该模块使用电池状态 API 获取上面显示的信息并执行检查。

电池对象（类型为 BatteryManager）由 navigator.getBattery 方法（使用 Promise）或过时的 navigator.battery 属性（作为先前 W3C 规范的一部分，目前由 Firefox 和 Firefox OS 使用）提供。如上所述，请关注此错误 以获取实现更新或如果您想为 Gecko 开发做出贡献。

EnergyManager.js 模块以以下方式消除了 API 实现中的这种差异：

/* EnergyManager.js */
 init: function(callback) {
     var _self = this;

    /* Initialize the battery object */
    if (navigator.getBattery) {
       navigator.getBattery().then(function(battery) {
           _self.battery = battery;
           callback();
       });
    } else if (navigator.battery || navigator.mozBattery) { // deprecated battery objects
        _self.battery = navigator.battery || navigator.mozBattery;
        callback();
    }
 }

navigator.getBattery 方法返回一个电池 promise，它在 BatteryManager 对象中得到解决，该对象提供您可以处理的事件来监控电池状态。过时的 navigator.battery 属性直接返回 BatteryManager 对象；上面的实现还检查供应商前缀，以获取 Mozilla 在规范的早期阶段进行的更旧的实验性 API 实现。

登录到浏览器的 网页控制台 是了解电池状态 API 如何工作的有用方法。

/* EnergyManager.js */

 log: function(event) {
    if (event) {
        console.warn(event);
    }

    console.log('battery.level: ' + this.battery.level);
    console.log('battery.charging: ' + this.battery.charging);
    console.log('battery.chargingTime: ' + this.battery.chargingTime);
    console.log('battery.dischargingTime: ' + this.battery.dischargingTime);
 }

以下是网页控制台上日志的显示方式：

每当事件 (dischargingtimechange、levelchange 等) 触发时，BatteryManager 对象都会提供应用程序可用于任何目的的更新值。

结论

电池状态 API 是一种访问设备硬件的标准化方法，可以随时投入生产使用，即使在撰写本文时，仍然需要在 Firefox 上执行一些兼容性检查。此外，W3C 规范足够通用，可以在不同的环境中使用，因此 API 涵盖了许多现实世界的用例。