Як використувати Battery API

2 хв. читання

Чим вимогливішими стають веб-додатки, тим швидше витрачається заряд пристрою.

Коли гаджет підключений до енергопостачання - це не проблема, але коли справа доходить до мобільних девайсів, ми повинні бути впевнені, що батарея працює і реагує відповідним чином.

Браузерна підтримка

На момент створення Battery API підтримується тільки Firefox (мобільний та настільний). Проте він не вимагає префіксу постачальника.

Використання Battery API

Щоб почати, нам потрібно перевірити чи підтримується API:

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

Це буде тестом для поточної та майбутньої підтримки.

Потім ми запускаємо швидкий if…else, щоб перевірити підтримку:

    if (battery) {
    // Supported
    } else {
    // Not Supported
    }

За вашим бажанням, ви можете інформувати користувача яка кількість заряду залишилось:

    $('element').append( battery.level * 100 + '%'); 

Значення battery.level повертається у діапазоні від 0 до 1. За допомогою домноження на 100 ми отримаємо відсотки.

battery.dischargingTime

Зрозуміло, що рівень заряду батареї, це лише число. Про що дійсно хоче дізнатись користувач, це скільки часу роботи від акумулятора залишилось. Ми можемо протестувати це використовуючи battery.dischargingTime:

    $('element').append(battery.dischargingTime);

Ми отримаємо кількість секунд до розрядження акумулятора, якщо потрібно повернути години, число потрібно поділити на 60:

    $('.time').append(battery.dischargingTime/60 + ' minutes left');

Якщо пристрій заряджається ми можемо використати _battery.chargingTime, _щоб перевірити скільки потрібно часу, щоб повністю поновити заряд.

Події Battery:

Ми також можемо прив'язати кілька подій, щоб допомогти уникнути постійного опитування.

Чотири події, які ми можемо використати:

  • chargingchange: значення заряду змінилося;

  • chargingtimechange: час, за який акумулятор зарядиться на 100%;

  • dischargingtimechange: час, за який батарея розрядиться, змінився;

  • levelchange: рівень заряду батареї змінився.

Також ми можемо перевіряти таке:

    battery.onlevelchange = function() {
    if(battery.level < 5)
    alert('Critical Battery');
    }
    }
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.7K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація