Статьи

Представляем API состояния батареи

Январь 19, 2019

Мобильные устройства представляют все больший сегмент всего веб-трафика. Этот трафик настолько существенен, что API и методы проектирования были созданы специально для обслуживания мобильных устройств. Примером этого является API состояния батареи W3C , который позволяет приложению проверять состояние батареи устройства. В этой статье рассматривается сравнительно новый API и показано, как начать внедрять его в свои приложения сегодня.

Обнаружение поддержки

API поддержки батареи по-прежнему в основном не поддерживается. Поэтому вы должны убедиться, что он существует, прежде чем пытаться его использовать. Следующая функция возвращает логическое значение, указывающее, поддерживает ли браузер пользователя API. Функция проверяет наличие объекта navigator.battery . Если он не существует, он также проверяет mozBattery объекта mozBattery для Mozilla. Я видел код, который также проверяет наличие webkitBattery , но я не смог проверить его существование в Chrome. 

 function isBatteryStatusSupported() { return !!(navigator.battery || navigator.mozBattery); }

Осмотр батареи

Если объект battery существует, он будет содержать следующие четыре свойства только для чтения.

  • charging — это логическое значение указывает, charging ли в данный момент аккумулятор системы. Если в системе нет батареи или значение не может быть определено, это будет true .
  • chargingTime — это числовое значение представляет количество времени в секундах, оставшееся до полной зарядки батареи. chargingTime устанавливается в ноль, если батарея полностью заряжена или если в системе нет батареи. Если система не заряжается или не может определить оставшееся время, устанавливается значение Infinity .
  • dischargingTime — как и chargingTime , это значение представляет количество секунд, оставшихся до полной разрядки батареи и приостановки системы. Если время разряда не может быть определено, батарея отсутствует или батарея заряжается, тогда это значение устанавливается в Infinity .
  • level — это числовое значение представляет текущий уровень заряда батареи. Значение варьируется от 0 до 1,0 и соответствует проценту оставшегося срока службы батареи. Значение 1.0 указывает, что батарея полностью заряжена, батарея отсутствует или уровень не может быть определен.

Обнаружение событий батареи

Каждое из ранее обсужденных свойств связано с событием батареи. Эти события используются для определения изменений в состоянии батареи. Например, подключение системы может привести к переходу charging с false на true . Четыре типа событий батареи перечислены ниже.

  • chargingchange — этот тип события происходит при обновлении charging . Эти события могут быть обработаны с помощью обработчика события onchargingchange() .
  • chargingtimechange — эти события генерируются при обновлении зарядкиTime. Эти события могут быть обработаны обработчиком события onchargingtimechange() .
  • dischargingtimechange — при обновлении dischargingtimechange запускается событие dischargingtimechange . Эти события могут быть обработаны обработчиком события ondischargingtimechange() .
  • levelchange — Обновления level приводят к levelchange этих событий. Они могут быть обработаны с помощью обработчика событий onlevelchange() .

Демо-страница

В следующем коде показано, как использовать свойства и события API состояния батареи. На странице примера отображается значение каждого свойства и обновляется по мере возникновения событий. Страница также доступна онлайн . 

 <!DOCTYPE html> <html lang="en"> <head> <title>The Battery Status API - Example</title> <meta charset="UTF-8" /> <script> window.addEventListener("load", function() { var battery = navigator.battery || navigator.mozBattery; function displayBatteryStats() { document.getElementById("charging").textContent = (battery.charging) ? "charging" : "not charging"; document.getElementById("chargingtime").textContent = battery.chargingTime; document.getElementById("dischargingtime").textContent = battery.dischargingTime; document.getElementById("level").textContent = battery.level * 100; } if (battery) { displayBatteryStats(); battery.addEventListener("chargingchange", displayBatteryStats, false); battery.addEventListener("chargingtimechange", displayBatteryStats, false); battery.addEventListener("dischargingtimechange", displayBatteryStats, false); battery.addEventListener("levelchange", displayBatteryStats, false); } else { document.getElementById("stats").textContent = "Sorry, your browser does not support the Battery Status API"; } }, false); </script> </head> <body> <div id="stats"> Your battery is currently <span id="charging"></span>.<br /> Your battery will be charged in <span id="chargingtime"></span> seconds.<br /> Your battery will be discharged in <span id="dischargingtime"></span> seconds.<br /> Your battery level is <span id="level"></span>%. </div> </body> </html>

Вывод

В этой статье представлен полный обзор API состояния батареи. Хотя поддержка еще не получила широкого распространения, это всего лишь вопрос времени. Учитывая распространение мобильного Интернета, разработчики должны начать включать батарею в свои проекты как можно скорее.

35
Share: