Статьи

Как использовать API состояния батареи HTML5

Январь 12, 2019

Если вам повезет, вы получите семь или восемь часов работы от смартфона или планшета до того, как аккумулятор разрядится. Ожидайте около половины этого на ноутбуке. Технология аккумуляторов не поспевает за достижениями в области мобильных компьютеров. Десять лет назад можно было ожидать, что ваш Palm Pilot продлится до месяца на паре батарей AAA. Теперь вы кормите устройства каждую ночь, и ваша комната светится, как мигающая красная и зеленая светодиодная версия Лас-Вегаса.

Мало кто из нас беспокоится о времени автономной работы при разработке веб-приложений, но, возможно, нам следует быть более внимательными, когда мобильный доступ достиг одного из пяти пользователей . К счастью, API состояния батареи W3C был реализован и Mozilla, и Google — и его очень просто использовать.

Что не так просто …

Мы можем определить, когда батарея достигает критического уровня, но что мы можем с этим поделать? Это будет зависеть от вашего применения, но основными причинами утечки энергии являются …

Экран
Ваш экран с подсветкой является самым большим обжорством сока. Есть несколько вариантов, которые вы можете рассмотреть, когда батарея достигнет критического уровня:

  • переключиться на светлую темную тему
  • отключить некритические анимации CSS3 и JavaScript
  • по возможности избегайте изменений в DOM

Сетевая активность
Для сетей Wi-Fi и мобильной связи требуется мощная радиоволновая связь. Рассмотреть возможность:

Звуковой и тактильный выход
Звук и вибрация убьют батарею мертвой; Вы можете использовать более короткие эффекты или полностью отключить его.

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

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

Поддержка браузера

На момент написания, только настольные и мобильные версии Firefox предлагали беспрефиксную поддержку для Battery API (версии 10-16 использовали префикс moz). Он также доступен в последних выпусках Chromium с префиксом webkit.

Мы можем создать кросс-браузерный объект батареи, используя: 

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

if (battery) {
	// battery API supported
}

Это используется в демонстрации Battery API…

Основные свойства

Вы можете получить уровень заряда батареи, используя свойство navigator.battery.level 

 console.log( "battery level: ", Math.floor(battery.level * 100) + "%" );

Однако текущий уровень может быть не таким важным, если устройство заряжается. Мы можем проверить статус, используя свойство navigator.battery.charging 

 console.log( "device is ", (battery.charging ? "charging" : "discharging") );

Поэтому вы, вероятно, захотите ввести опции повышения мощности, когда уровень заряда аккумулятора упадет ниже, скажем, на 25%, и устройство не заряжается, например 

 var enableEffects = (battery.charging || battery.level > 0.25);

// vibrate for one second
if (enableEffects) navigator.vibrate(1000);

Есть несколько других свойств, которые могут оказаться полезными:

  • navigator.battery.chargingTime
  • navigator.battery.dischargingTime

Ни одно из этих свойств не работает должным образом в современных браузерах. Firefox возвращает либо ноль, либо бесконечность, что не особенно полезно.

События состояния батареи

Объект Battery может инициировать четыре события:

  • зарядка — устройство изменилось с зарядки на разрядку или наоборот
  • изменение уровня — уровень заряда батареи изменился
  • зарядка — изменение времени до полной зарядки аккумулятора.
  • время разрядки — изменилось время до полной разрядки аккумулятора

Например, используя наш кросс-браузерный объект battery 

 battery.onlevelchange = function() {

	var ee = enableEffects;
	enableEffects = (battery.charging || battery.level > 0.25);
	
	if (enableEffects != ee) {
		if (enableEffects) {
			console.log( "Battery power is OK." );
		}
		else {
			console.log( "Battery power is critical!" );
		}
	}

}

Кто-то скажет, что ваше веб-приложение никогда не должно излишне разряжать батарею. Тем не менее, Battery API позволяет нам принимать более сложные решения о том, когда мы можем и не можем зависеть от анимации, эффектов и вызовов Ajax.

Посмотреть демонстрацию Battery API… (Firefox и Chromium)

32
Share: