Работа с JavaScript API - Battery API

Дата: 10.09.2016 в 13:18, Категория: JavaScript
  • 1895
  • 9
Работа с JavaScript API - Battery API

В этой статье мы постараемся разобраться, как использовать JavaScript API для проверки процента заряда батареи. И постараемся манипулировать пользовательским интерфейсом, исходя из статуса батареи. Мы рассмотрим сам Battery API и разберемся со всеми его методами. Так же, в самом конце статьи, будет небольшой пример того, как можно применить данный API и ссылка на скачивание примера.

# Мониторинг срока службы батарей

JavaScript Battery Status API обращается к аппаратному устройству на получение точных данных о батареи. Как вы можете понять, посредником является наш браузер, который и передает в API всю требуемую информацию. Доступ к ней осуществляется через метод navigator.getBattery(), или непосредственно через объект navigator.battery, второй вариант, хотя в настоящее время осуждается и в целом не рекомендуется.

Конечно, "некоторые" браузеры не поддерживают Battery API (как вы уже догадались, это - Safari и IE). К сожалению, это значит, что если пользователь iOS девайса, войдет с Safari, то данное API, браузером поддерживать не будет.

  if (navigator.getBattery) {
      alert('Браузер поддерживает Battery API!');
  }
  else {
      alert('Увы, но Battery API не поддерживается!');
  }

После того, как мы уверены, что ваш пользователь может получить доступ к API, получить информацию о батареи можно так:

  navigator.getBattery()
  .then(function(batteryManager) {
      // Получаем заряд батареи в процентах
      var level = batteryManager.level * 100;
      alert(level);
  })
  .catch(function(e){
      console.error(e);
  });

Метод getBattery() возвращает объект BatteryManager, содержащую различную информацию о текущем состоянии аппаратного обеспечения (батареи):

  • batteryManager.level – Возвращает дробное число заряда батареи от 0.0 до 1.0. Для этого, мы во втором варианте умножаем значение на 100.
  • batteryManager.charging – заряжается ли устройство или нет. Возвращает boolean = true/false.
  • batteryManager.chargingTime – оставшееся время в секундах до полной зарядки.
  • batteryManager.dischargingTime – оставшееся время в секундах до разрядки.

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

  • BatteryManager.onlevelchange – сработает при изменении процента зарядки.
  • BatteryManager.onchargingchange – сработает при подключении или отключении зарядного устройства.
  • BatteryManager.onchargingtimechange – сработает при изменении оставшегося времени полного заряда батареи.
  • BatteryManager.ondischargingtimechange – сработает при изменении оставшегося времени до разрядки батареи.

Напишем код, который будет проверять на изменение заряда батареи. При достижении зарядки меньше 30%, будет срабатывать режим энергосбережения.

Под фразой "режим энергосбережение", не подразумевается системная функция. А простая смена boolean свойства на true.

  navigator.getBattery()
  .then(function(battery) {    
      battery.onlevelchange = function() {

          if(battery.level<0.3 && !battery.charging) {
              powerSavingMode = true;
              alert('Режим режим энергосбережения включен!');
          }

      }
  });

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

# Сохранение энергии

Больше всего жрет батарею экран устройства. Это знакомо владельцам смартфонов и особенно владельцам планшетов.

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