IT博客汇 | 新的 JavaScript Battery API

新的 JavaScript Battery API

安·记发表于 2015-02-24 20:43:00

JavaScript Battery 接口允许你通过 JavaScript 来获取电池的状态。

navigator.getBattery()方法

在新的标准里，电池的状态信息是通过navigator.getBattery()方法获取的。 navigator.getBattery()是一个异步方法，会返回一个es6标准的promise对象。所以我们获取电池状态的回调方法，必须通过该promise对象的then方法来注册：

navigator.getBattery().then(function(result) {
    console.log(result);
});

BatteryManager接口

上个例子里的result是一个表示电池状态的对象，它是由BatteryManager接口实现的，具有如下属性：

{
    charging: false,                // 是否正在充电
    chargingTime: Infinity,         // 剩余多少秒充满电。
    dischargingTime: 8940,          // 剩余多少秒放完电
    level: 0.59,                    // 电量比（当前电量/电池容量）
    onchargingchange: null,         // chargingchange事件的回调函数
    onchargingtimechange: null,     // chargingtimechange事件的回调函数
    ondischargingtimechange: null,  // dischargingtimechange事件的回调函数
    onlevelchange: null             // levelchange事件的回调函数
}

事件

当电池状态发生变化时，会相应地更新charging、chargingTime、dischargingTime、level等属性的值，并触发对应的事件：

chargingchange事件： charging属性变化时触发
chargingtimechange事件： chargingTime属性变化时触发
dischargingtimechange事件： dischargingTime属性变化时触发
levelchange事件： level属性变化时触发

可以直接挂载一个事件回调函数：

navigator.getBattery().then(function(battery) {
    console.log(battery.level);
    // ... and any subsequent updates.
    battery.onlevelchange = function() {
        console.log(this.level);
    };
});

也可以通过addEventListener()方法监听事件：

navigator.getBattery().then(function(battery) {
    console.log(battery.level);
    battery.addEventListener('levelchange', function() {
        console.log(this.level);
    });
});

demo

<!</span><span class="nx">DOCTYPE</span> <span class="nx">html</span><span class="o">></span>
<span class="o"><</span><span class="nx">html</span><span class="o">></span>
<span class="o"><</span><span class="nx">head</span><span class="o">></span>
<span class="o"><</span><span class="nx">title</span><span class="o">></span><span class="nx">Battery</span> <span class="nx">Status</span> <span class="nx">API</span> <span class="nx">Example</span><span class="o"><</span><span class="err">/title></span>
<span class="o"><</span><span class="nx">script</span><span class="o">></span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="kd">function</span> <span class="nx">updateBatteryStatus</span><span class="p">(</span><span class="nx">battery</span><span class="p">)</span> <span class="p">{</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#charging'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">charging</span> <span class="o">?</span> <span class="s1">'charging'</span> <span class="o">:</span> <span class="s1">'not charging'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#level'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">level</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#dischargingTime'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">dischargingTime</span> <span class="o">/</span> <span class="mi">60</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nx">navigator</span><span class="p">.</span><span class="nx">getBattery</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">battery</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">// Update the battery status initially when the promise resolves ...</span>
        <span class="nx">updateBatteryStatus</span><span class="p">(</span><span class="nx">battery</span><span class="p">);</span>

        <span class="c1">// .. and for any subsequent updates.</span>
        <span class="nx">battery</span><span class="p">.</span><span class="nx">onchargingchange</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">updateBatteryStatus</span><span class="p">(</span><span class="nx">battery</span><span class="p">);</span>
        <span class="p">};</span>

        <span class="nx">battery</span><span class="p">.</span><span class="nx">onlevelchange</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">updateBatteryStatus</span><span class="p">(</span><span class="nx">battery</span><span class="p">);</span>
        <span class="p">};</span>

        <span class="nx">battery</span><span class="p">.</span><span class="nx">ondischargingtimechange</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">updateBatteryStatus</span><span class="p">(</span><span class="nx">battery</span><span class="p">);</span>
        <span class="p">};</span>
    <span class="p">});</span>
    <span class="p">};</span>
<span class="o"><</span><span class="err">/script></span>
<span class="o"><</span><span class="err">/head></span>
<span class="o"><</span><span class="nx">body</span><span class="o">></span>
    <span class="o"><</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"charging"</span><span class="o">></span><span class="p">(</span><span class="nx">charging</span> <span class="nx">state</span> <span class="nx">unknown</span><span class="p">)</span><span class="o"><</span><span class="err">/div></span>
    <span class="o"><</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"level"</span><span class="o">></span><span class="p">(</span><span class="nx">battery</span> <span class="nx">level</span> <span class="nx">unknown</span><span class="p">)</span><span class="o"><</span><span class="err">/div></span>
    <span class="o"><</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"dischargingTime"</span><span class="o">></span><span class="p">(</span><span class="nx">discharging</span> <span class="nx">time</span> <span class="nx">unknown</span><span class="p">)</span><span class="o"><</span><span class="err">/div></span>
<span class="o"><</span><span class="err">/body></span>
<span class="o"><</span><span class="err">/html></span></code></pre></div>


<p><strong>参考文章:</strong></p>

<p>http://www.w3.org/TR/battery-status/</p>

<p>https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery</p>

<p>https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager</p>