获取电池电量 JavaScript答案

【问题标题】：Get battery level JavaScript获取电池电量 JavaScript
【发布时间】：2015-11-04 11:53:53
【问题描述】：

/!\ 使用 window.navigator.battery IS STRONGLY DISCOURAGED 这个问题现在不值得检查谢谢/！\

我想获取当前系统的电池电量。这是我打算得到的输出：

如果是台式机（无电池） 电池电量：100%

如果是笔记本电脑 电池电量：XXX%（取决于电量）

所以我在我的 JSFiddle 中尝试了 Mozilla 基金会的 sn-p，而不是 window.navigator.battery。

问题： 运行 Chrome 20+ 版本（目前是 46），我在控制台还是报错：

未捕获的类型错误：无法读取未定义的属性“addEventListener”

所以我的理解是用假定的电池电量实例化的对象 battery 没有返回任何内容。

有人已经想通了吗？

当这个 sn-p 起作用时，我的算法的重点是定义用户在剩余电池电量方面不能执行的操作。例如，我不希望用户执行可能会将其电池电量降低到临界点并导致关键操作失败的繁重操作。

【问题讨论】：

请注意，您指向 JSFiddle 的链接指向主页，而不是展示问题的特定小提琴。
##Chrome 60:## 输入 > window.navigator.battery ---------- 输出
由于它已弃用，我将在本期顶部提及它，谢谢。
一行：navigator.getBattery().then(battery => console.log(battery.level));

标签： javascript battery batterylevel

【解决方案1】：

来自English version of that page：

此功能已从 Web 标准中删除。尽管某些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或 Web 应用程序可能随时中断。

和

battery 属性已弃用，并已替换为返回电池 Promise 的 Navigator.getBattery() 方法。但它的支持仍然是部分的。

【讨论】：

我刚刚发现法语文档不是最新的，因为我将 URL 切换为 en 并且我实际上看到了 depecrated 消息错误。

【解决方案2】：

警告

不要在生产中使用以下答案，因为它一直是deprecated since then。由于privacy and security issues，规范将被重新修改，因此预计会看到更改和故障。

回答

为了回答我自己的问题，感谢 @Quentin 提供给我的文档的帮助，我使用BatteryManager.level 实现了我的目标，实现了承诺Navigator.getBattery()。可以在此处找到提供有效 sn-p 的链接：https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager/level。

以下 JSFiddle 在控制台中显示 (F12) 剩余电池的值（我无法在桌面上验证输出，所以如果它在桌面上不起作用，请纠正我）：

JSFiddle

JavaScript

navigator.getBattery().then(function(battery) {

    var level = battery.level;

    console.log(level);
});

【讨论】：

【解决方案3】：

event.target.level 是事件处理程序中的级别值。

navigator.getBattery().then((battery) => {

    battery.ondischargingtimechange = (event) => { 
       console.warn(`Discharging : `, event.target.level) 
    };

    battery.onchargingtimechange = (event) => { 
       console.info(`Charging : `, event.target.level) ;
    };
});

Live Example at Jsfiddle

【讨论】：

这个答案与@Zeratops 的answer 有何不同？
这是一个 REALTIME 输出，因为使用了 事件处理程序 @MikeMcCaughan
你有任何 JSFiddle 来测试它@AbdennourTOUMI 吗？
阿琳@Anwar！答案中添加了一个 Jsfiddle 链接
感谢您更新答案！在我的华为 P20 上，显示的充电时间没有改变（即使我给手机充电并在充电过程中保持屏幕打开）。可能是股票 Android 浏览器的实现问题。必须在 Android Chrome 上尝试一下。无论如何，谢谢你的意见，我猜这个电池 API 很难驯服......

【解决方案4】：

包括作品、演示和代码
我推荐Battery API。
你可以找到演示here或代码here
它非常有用，并提供了很多关于
电池。免费使用。

(function() {
  let batterySupported = document.getElementById("battery-supported"),
    batteryLevel = document.getElementById("battery-level"),
    chargingStatus = document.getElementById("charging-status"),
    batteryCharged = document.getElementById("battery-charged"),
    batteryDischarged = document.getElementById("battery-discharged");

  let success = function(battery) {
    if (battery) {
      function setStatus() {
        console.log("Set status");
        batteryLevel.innerHTML = Math.round(battery.level * 100) + "%";
        chargingStatus.innerHTML = (battery.charging) ? "" : "not ";
        batteryCharged.innerHTML = (battery.chargingTime == "Infinity") ?         
"Infinity" : parseInt(battery.chargingTime / 60, 10);
        batteryDischarged.innerHTML = (battery.dischargingTime == "Infinity") 
? "Infinity" : parseInt(battery.dischargingTime / 60, 10);
      }

      // Set initial status
      setStatus();

      // Set events
      battery.addEventListener("levelchange", setStatus, false);
      battery.addEventListener("chargingchange", setStatus, false);
      battery.addEventListener("chargingtimechange", setStatus, false);
      battery.addEventListener("dischargingtimechange", setStatus, false);
    } else {
      throw new Error('Battery API not supported on your device/computer');
    }
  };

  let noGood = function(error) {
    batterySupported.innerHTML = error.message;
  };

  navigator.getBattery() //returns a promise
    .then(success)
    .catch(noGood);
})();

@import url('https://fonts.googleapis.com/css2? 
   family=Roboto:wght@300&display=swap');

/* General font styles */

html {
  font-family: 'Roboto', sans-serif;
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
}

img {
  border: none;
  vertical-align: middle;
}


/* Basic element styles */

a {
  color: #0366d6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

html {
  color: #000;
}

body {
  padding-top: 20px;
}

body {
  margin-bottom: 30px;
}

ul {
  margin: 10px 0;
}


/* Structure */

.container {
  background: #fff;
  border-top: none;
  text-align: center;
}

#battery-supported {
  color: #f00;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Battery API</title>
</head>

<body>

  <div class="container">
    <h1>
      Battery API demo
    </h1>

    <section class="main-content">
      <p>A demo of the Battery API</p>

      <p id="battery-supported"></p>

      <p>Battery level is <b id="battery-level"></b></p>

      <p>Battery status is <b id="charging-status"></b><b>charging</b></p>

      <p>Battery will be fully charged in <b id="battery-charged"></b> 
minutes.</p>

      <p>Battery will be discharged in <b id="battery-discharged"></b> 
minutes.</p>


    </section>

        <p class="footer">All the code is available in the <a 
href="https://github.com/robnyman/robnyman.github.com/tree/master/battery">
 Battery 
repository on GitHub</a>.</p>
  </div>




</body>

</html>

【讨论】：

【解决方案5】：

Navigator.getBattery() 现在已过时。尽管它在某些浏览器中可能仍然有效，但不鼓励使用它，因为它可能随时被删除。

【讨论】：

谢谢@Temkit，我会在我自己的答案中添加这条重要信息。