В этой статье мы постараемся разобраться, как использовать JavaScript API для проверки процента заряда батареи. И постараемся манипулировать пользовательским интерфейсом, исходя из статуса батареи. Мы рассмотрим сам Battery API и разберемся со всеми его методами. Так же, в самом конце статьи, будет небольшой пример того, как можно применить данный API и ссылка на скачивание примера.
JavaScript Battery Status API обращается к аппаратному устройству на получение точных данных о батареи. Как вы можете понять, посредником является наш браузер, который и передает в API всю требуемую информацию. Доступ к ней осуществляется через метод navigator.getBattery(), или непосредственно через объект navigator.battery, второй вариант, хотя в настоящее время осуждается и в целом не рекомендуется.
Конечно, "некоторые" браузеры не поддерживают Battery API (как вы уже догадались, это - Safari и IE). К сожалению, это значит, что если пользователь iOS девайса, войдет с Safari, то данное API, браузером поддерживать не будет.
_10 if (navigator.getBattery) {_10 alert('Браузер поддерживает Battery API!');_10 }_10 else {_10 alert('Увы, но Battery API не поддерживается!');_10 }
После того, как мы уверены, что ваш пользователь может получить доступ к API, получить информацию о батареи можно так:
_10 navigator.getBattery()_10 .then(function(batteryManager) {_10 // Получаем заряд батареи в процентах_10 var level = batteryManager.level * 100;_10 alert(level);_10 })_10 .catch(function(e){_10 console.error(e);_10 });
Метод getBattery() возвращает объект BatteryManager, содержащую различную информацию о текущем состоянии аппаратного обеспечения (батареи):
boolean = true/false.Так же, данное API поддерживает события. События могут быть использованы на изменение указаных выше свойств.
Напишем код, который будет проверять на изменение заряда батареи. При достижении зарядки меньше 30%, будет срабатывать режим энергосбережения.
Под фразой "режим энергосбережение", не подразумевается системная функция. А простая смена boolean свойства на true.
_11 navigator.getBattery()_11 .then(function(battery) { _11 battery.onlevelchange = function() {_11_11 if(battery.level<0.3 && !battery.charging) {_11 powerSavingMode = true;_11 alert('Режим режим энергосбережения включен!');_11 }_11_11 }_11 });
После того, как мы знаем, сколько осталось в устройстве зарядки, мы можем включить режим экономии энергии, если это необходимо.
Больше всего жрет батарею экран устройства. Это знакомо владельцам смартфонов и особенно владельцам планшетов.
Первое и главное, что мы можем сделать, ограничить количество света излучающегося на дисплее. JavaScript не имеет полномочий для проверки яркости напрямую, но мы можем сделать это, изменив гамму цветов на более темную.
Темные цвета потребляют меньше энергии, и тем самым, сокращают более чем на 50% потребление энергии на AMOLED экранах.
Следующее, что мы можем сделать, это ограничить количество и размер запросов к внешним ресурсам. Больше всего, потребляют энергию изображения с высоким разрешением, рекламные объявления и большие библиотеки JavaScript, так как они нуждаются увеличивают загрузку страницы и тем самым создают лишнюю анимацию для полосы загрузки страницы.
Удаление несущественных элементов со страницы, уменьшает потребление не только энергии дисплея но и самого устройства.
Выше было упомянуто, что загрузка больших библиотек и фреймворков плохо влияет не только на нагрузку энергии но и на загрузку самой страницы, в своей статье про то, как оптимизировать сайт, я рассказал про многие ошибки которые допускают веб-разработчики. Говоря уже о оптимизации нагрузки энергии, можно так же упомянуть про синтаксический анализ и выполнение больших JS функций, может привести к ненужному расходов энергии.
Так же, JavaScript анимации вызывают постоянную перерисовки элементов на экране, прослушивание уведомлений от сервер и даже несколько запросов AJAX может разряжать батарею, но и то чуть-чуть. Согласно этому исследованию, код JavaScript потребляют ~ 7% от общей энергии рендеринга Yahoo, ~ 17% на Amazon, и более чем на 20% на YouTube.
Мы продемонстрировали некоторые из вышеупомянутых концепций в одном демо-приложение. Оно проверяет исходящее количество заряда батареи. И когда заряд батареи достигается ниже 30%, приложение переходит в режим энергосбережения. Фон темнеет, останавливает все анимации, и удаляет все объявления.
Наше приложение работает с виртуальной батареи, что позволяет быстро переключаться между режимами полностью заряженной и почти мертвой батареи. Демо не содержит много кода для работы с Battery API. Пример написан на Vue.JS для более удобного мониторинга данных. Скачать демо можно по следующей ссылке - battery-api.zip
Если вы хотите узнать больше Battery API или узнать почему так быстро сжирается заряд батареи, эти ссылки вам будут очень полезны:
Перевод статьи: Quick Tip: Working with the JavaScript Battery API