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, чтобы не засорять статью. Вы всегда можете найти его, проинспектировав демо в вашем любимом браузере.

Удачи!

Метки: , , , , ,
5 комментариев на “Battery javascript API – состояние и статус зарядки батареи устройства c html5
  1. drcreazy пишет:

    Весьма сомнительная полезность данного апи.
    Максимум что мне пришло в голову – при наборе больших текстов с телефона предупреждать прольователя о том, что у него садится батарея, однако кто набирает на телефоне большие тексты?

    Да и сама ос любая предупредить о близкой посадке

    • Илья пишет:

      Самое элементарное – вырубать анимации на сайте, чтобы не жрать батарейке устройства. Или переключать цветовую гамму на менее яркие цвета, опять же, чтобы сохранить заряд дольше.

    • Арчик пишет:

      Автосохранение при малом кол-ве батареи в игрухе и т.д.

  2. Alex пишет:

    Круто! На обычном ноутбуке в Firefox запустил, работает! Я думал только в мобильном будет работать, а нет, и в ноутбуке с Windows 7 нормально работает!

  3. Michael F пишет:

    У меня почему то не работает —
    Ubuntu – (Chrome/Firefox/Chromium) /
    Windown 8.1 – (Chrome/Firefox/ie/Opera) /
    Android (chrome/Internet) /
    El Capitan – (chrome/Safari/Firefox) /
    iPhone – (chrome/Safari) –
    На всех устройствах говорит что у браузера нет этого АПИ :(

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by