Battery javascript API – состояние и статус зарядки батареи устройства c html5

Давайте рассмотрим Battery API – еще одну новинку в javaScript, которая появиласть на свет с развитием html5 и мобильных девайсов. Задокументирована она совсем недавно (12.2012) и пока доступна только для тестирования только в Firexfox (мобильном и десктопном). Разработчики Chrome обещают реализацию в скором времени. Battery js API позволяет получить всевозможную информацию о заряде батареи, а также следить за изменением заряда с помощью богатого набора событий.

А зачем вообще этот API нужен в браузере? Так как многие мобильные приложения живут внутри браузерной оболочки (не полностью “родные”), для них было бы здорово иметь доступ к информации о системе. Некоторые процессы являются довольно энергоемкими (webGl например) и было бы не плохо предупреждать пользователя о низком уровне заряда батареи и т.п.

В любом случае, истинная полезность этого API должна стать очевидной в ближайшее время!

Давайте рассмотрим пример (код в конце статьи):

Демо

battery API demo

Как устроено battery API?

Объект window.navigator.battery имеет следующие поля:

charging: текущий статус зарядки батареи. Зряжается – true, разряжается – false. В текущей имплементации мы не можем узнать, подсоединена ли вообще батарея и т.п.

chargingTime: Время (в секундах) оставшееся до полной зарядки батареи.

dischargingTime: Время (в секундах) оставшееся до полной разрядки батареи.

level: Текущий уровень заряда аккумулятора по шкале от 0 до 1. Устанавливается в 0, если заряд батареи исчерпан, система вот-вот “умрет” соответственно равен 1, если аккумулятор полностью заряжен.

Для каждого из этих покзателей есть свое событие: onchargingchange, onchargingtimechange, ondischargingtimechange и onlevelchange.

Простой пример:

JS

// Пока браузеры еще не договорились.. заботимся об этом сами!  
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

console.log("Cтатус зарядки батареи: ", battery.charging); // true  
console.log("Уровень зарядки батареи: ", battery.level); // 0.58  
console.log("Осталось времени: ", battery.dischargingTime); // 600

battery.addEventListener("chargingchange", function(e) {  
  console.log("Изменен статус зарядки батареи: ", battery.charging);  
}, false);  
battery.addEventListener("chargingtimechange", function(e) {  
  console.log("Изменено время до конца зарядки: ", battery.chargingTime);  
}, false);  
battery.addEventListener("dischargingtimechange", function(e) {  
  console.log("Изменено время оставшееся до разрядки: ", battery.dischargingTime);  
}, false);  
battery.addEventListener("levelchange", function(e) {  
  console.log("Изменен уровень зарядки: ", battery.level);  
}, false);

Давайте рассмотрим код примера в начале статьи:

html

<div class="battery">
  <div class="battery_core">
    <div class="battery_status"></div>
  </div>
  <div class="battery_stat">
    <div class="battery_stat_percent"></div>
    <div class="battery_stat_other"></div>
  </div>
</div>

js

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

function setStatus(eventName) {
  if (battery) {
    var chargingPercent = Math.round(battery.level * 100);
    var chargingStatus = (battery.charging) ? "<strong class='yes'>Charging</strong>" : "<strong class='no'>Not charging</strong>";
    var chargingTime = (battery.chargingTime == "Infinity") ? "<span class='no'>-</span>" : parseInt(battery.chargingTime / 60, 10);
    var dischargingTime = (battery.dischargingTime == "Infinity") ? "<span class='no'>-</span>" : parseInt(battery.dischargingTime / 60, 10);

    document.getElementsByClassName("battery_stat_percent")[0].innerHTML = chargingPercent + "%";
    document.getElementsByClassName("battery_status")[0].style.width = chargingPercent + "%";
    document.getElementsByClassName("battery_stat_other")[0].innerHTML = chargingStatus +
      " <br/>Charging time: " + chargingTime +
      " <br/>Discharging time: " + dischargingTime;
  } else {
    document.getElementsByClassName("battery_stat_percent")[0].innerHTML = ":(";
    document.getElementsByClassName("battery_stat_other")[0].innerHTML = "battery Api<br> не работает <br> в твоем браузере"
  }
}


if (battery) {
  battery.addEventListener("levelchange", setStatus, false);
  battery.addEventListener("chargingchange", setStatus, false);
  battery.addEventListener("chargingtimechange", setStatus, false);
  battery.addEventListener("dischargingtimechange", setStatus, false);
}

setStatus();

Я не буду приводить CSS, чтобы не засорять статью. Вы всегда можете найти его, проинспектировав демо в вашем любимом браузере.

Удачи!

PDF и версия для печати