js如何检测电池状态设备电池状态监测API详解-js教程-PHP中文网

js如何检测电池状态设备电池状态监测API详解

冰火之心

发布： 2025-07-01 19:21:01

原创

107人浏览过

javascript检测电池状态需使用battery status api，兼容不支持的浏览器可通过提示用户、降级方案或服务端配合实现；api常用属性包括charging、chargingtime、dischargingtime和level，事件有chargingchange、chargingtimechange、dischargingtimechange和levelchange；使用时需注意权限限制、信息限制及隐私保护策略，避免用户追踪；优化方法包括按需监听、节流防抖、使用requestanimationframe、避免长时间监听及减少计算量。

js如何检测电池状态设备电池状态监测API详解

JavaScript检测电池状态，核心在于利用浏览器提供的Battery Status API。这个API允许网页访问设备的电池信息，比如电量、充电状态等。

// 检查浏览器是否支持 Battery API
if (navigator.getBattery) {
  navigator.getBattery().then(battery => {
    // 获取电池电量
    let level = battery.level;
    console.log("电池电量:", level * 100 + "%");

    // 获取充电状态
    let charging = battery.charging;
    console.log("是否正在充电:", charging);

    // 监听电池电量变化
    battery.addEventListener('levelchange', () => {
      level = battery.level;
      console.log("电池电量变化:", level * 100 + "%");
    });

    // 监听充电状态变化
    battery.addEventListener('chargingchange', () => {
      charging = battery.charging;
      console.log("充电状态变化:", charging);
    });
  });
} else {
  console.log("您的浏览器不支持 Battery API");
}

登录后复制

如何兼容不支持Battery API的浏览器？

如果浏览器不支持 Battery API，navigator.getBattery 会返回 undefined。所以，在调用 API 之前，务必进行特性检测。针对不支持的浏览器，可以考虑以下方案：

提示用户： 直接告知用户浏览器不支持此功能，建议更换浏览器。
降级方案： 尝试使用其他方式获取电池信息，但这通常比较困难，因为电池信息属于敏感数据，浏览器出于安全考虑通常不会开放。一些旧的浏览器可能支持一些非标准的属性，但强烈不推荐使用，因为兼容性无法保证。
服务端配合： 如果应用是混合应用（例如 Cordova 或 Capacitor），可以通过原生代码获取电池信息，然后通过桥接方式传递给 JavaScript。

Battery API的常用属性和事件有哪些？

属性：
- charging: 布尔值，指示设备是否正在充电。
- chargingTime: 数值，表示充满电还需要多少秒。如果无法估计，则返回 Infinity。
- dischargingTime: 数值，表示电池耗尽还需要多少秒。如果无法估计，则返回 Infinity。
- level: 数值，表示电池电量水平，范围是 0 到 1。
事件：
- chargingchange: 当 charging 属性发生变化时触发。
- chargingtimechange: 当 chargingTime 属性发生变化时触发。
- dischargingtimechange: 当 dischargingTime 属性发生变化时触发。
- levelchange: 当 level 属性发生变化时触发。