Firefox浏览器获取设备电池电量的可行实现方案咨询

报错根因 #

Firefox 从52版本开始，出于用户隐私保护考量，完全移除了对公开Web API Battery Status API 的支持，普通网页无权调用navigator.getBattery()接口，这就是你在Firefox下运行代码报错的核心原因。
该API本身已被W3C标记为废弃特性，目前仅Chrome、Edge、Safari 14.1及以上版本保留了临时支持，不存在全浏览器通用的原生实现方案。

兼容改造方案 #

你可以对现有代码做兼容处理，对不支持该API的浏览器（包括Firefox）做优雅降级，优化后的代码如下：

// 提前判断API是否存在
if ('getBattery' in window.navigator && typeof window.navigator.getBattery === 'function') {
  window.navigator.getBattery().then(function (battery) {
    // 复用更新逻辑，减少冗余代码
    const updateBatteryDisplay = () => {
      const chargingStatus = battery.charging ? 'Charging' : 'Not Charging';
      const batteryPercent = Math.round(battery.level * 100);
      batteryLevel.innerHTML = `${batteryPercent}% ( ${chargingStatus} )`;
    };

    // 初始化展示电量
    updateBatteryDisplay();

    // 监听电量、充电状态变化
    battery.addEventListener('levelchange', updateBatteryDisplay);
    battery.addEventListener('chargingchange', updateBatteryDisplay);
  }).catch(() => {
    // 捕获权限禁用等异常场景
    batteryLevel.innerHTML = '无法获取设备电池信息';
  });
} else {
  // 不支持API的场景（如Firefox）直接提示
  batteryLevel.innerHTML = '当前浏览器不支持电池状态查询';
}

Firefox场景特殊说明 #

如果你的应用仅在内部可控场景使用，可以要求用户手动修改Firefox配置临时开启API支持，该方案不适合面向普通用户的公开产品：

• 打开Firefox，地址栏输入about:config进入高级配置页，确认安全提示后进入
• 搜索配置项dom.battery.enabled，双击将值修改为true
• 重启浏览器后即可正常调用电池API

内容的提问来源于stack exchange，提问作者Sharyar Vohra