Использование API состояния батареи для оптимизации вашей разработки

Battery Battery Child Class

Класс battery_api_single.php будет периодически вызываться нашим JavaScript, основываясь на текущем уровне заряда батареи устройства. Более высокий уровень заряда батареи приведет к более частым вызовам этого файла.

Целью этого класса является расширение родительского класса battery_api и использование его constructor для извлечения изображения из CatAPI. Мы начинаем с загрузки нашего родительского класса и расширения нового класса на его основе.

Мы начнем с определения массива наших опций внутри переменной $arguments . Мы устанавливаем тип данных XML и извлекаем один маленький JPG из CatAPI. Мы определяем $method get для /api/images/get?

Затем мы вызываем get_image_items() , передавая наш $method $arguments и $arguments . Нам будет возвращен массив информации об изображении. Затем мы используем функцию json_encode для передачи закодированной строки информации обратно на наш сайт.

Целевая страница сайта

index.php — это целевая страница, к которой мы попадем при посещении нашего примера. Сам файл является базовым и действует как оболочка для наших различных функций, так что мы можем отображать описания наших примеров, сводку информации и сетку исходных изображений из CatAPI.

Мы загружаем файл battery_api_class.php и затем вызываем CatAPI, чтобы получить нашу первоначальную серию из восьми изображений для отображения при загрузке страницы.

Интерактивность JavaScript с API состояния батареи

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

Файл battery_api_scripts.js содержит несколько взаимосвязанных функций, которые обеспечивают связь с API состояния батареи и настраивают / обновляют различные области в нашем примере.

Глобальные переменные

В самом верху файла мы создаем все переменные, которые нам нужны. Эти переменные будут содержать строки, логические значения, объекты и т. Д. Вот краткий анализ:

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

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

Мы выполняем battery_start() как только страница готова. Его целью является проверка поддержки API батареи. Поскольку API меняется, нам нужно проверить два разных способа, чтобы узнать, есть ли у нас поддержка.

• navigator.battery значение navigator.battery существует в старых браузерах и будет напрямую возвращать объект batteryManger если он у нас есть. Если у нас есть поддержка, мы устанавливаем переменную battery в true и начинаем выполнять наши функции.

• Более новая функция navigator.getBattery существует только в новых браузерах, и вместо непосредственного предоставления вам объекта batteryManager она выполняет promise предоставить вам объект как можно скорее. Как только мы вернем это обещанное значение, мы установим переменную battery в true и начнем выполнять наши функции.

Если поддержки нет, мы устанавливаем переменную battery в false и продолжаем наши действия по настройке.

Установка / обновление информации о состоянии батареи

Функция update_status_information() вызывается следующей в нашем потоке. Он вызывает целую кучу других вспомогательных функций, которые устанавливают наши переменные на основе поддержки API.

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

• get_battery_support() : проверяет нашу переменную battery чтобы увидеть, есть ли у нас объект Battery Manager (мы будем, если у нас будет поддержка API). Если у нас есть поддержка, мы устанавливаем значение true, иначе мы устанавливаем значение false.
• get_battery_level() : проверяет, есть ли у нас переменная battery . если мы это сделаем, то используем свойство level объекта Battery Manager для установки нашей переменной battery_level . (Значение уровня представляет значение от 0 до 1, поэтому мы умножаем значение на 100, чтобы получить наш процент.)
• get_battery_status() : это определяет, на какую строку state будет установлено устройство. Это состояние сохраняется в нашей переменной battery_status и используется в других областях веб-сайта (например, в нашей основной функции Ajax). Если у нас есть доступ к API, мы проверяем текущий уровень battery_level чтобы определить, находится ли устройство в high , medium , low или critical состоянии. Если у нас нет доступа к API, мы устанавливаем для него no_support .
• get_battery_charging() : если мы поддерживаем API, мы смотрим на свойство charging . Это свойство позволяет нам узнать, заряжается устройство или нет. Мы устанавливаем значение battery_is_charging соответственно.
• set_background_colour() : проверяет текущий статус в переменной battery_status и устанавливает класс в элемент HTML . Это главным образом используется для представления, и каждое состояние устанавливает различный цвет на фоне.
• get_api_action_interval() : эта функция определяет, как часто мы будем вызывать нашу Ajax-функцию для получения нового изображения из CatAPI. Мы проверяем переменную battery_support и, если у нас есть поддержка, сравниваем нашу переменную battery_status с нашими диапазонами. В зависимости от состояния батареи мы установим для нашей переменной api_action_interval_time значение 3000 , 5000 , 8000 или false . Если у нас нет поддержки API, мы устанавливаем значение по умолчанию 3000 .
• get_api_counter_interval() : это вспомогательная функция, используемая для определения, в миллисекундах, как быстро мы будем обновлять наш визуальный счетчик (элемент, который говорит, что у нас есть X секунд до нашего следующего вызова Ajax). Мы устанавливаем переменную api_action_counter_time 100 (то есть она будет обновляться 10 раз в секунду).

Отображение информации о батарее визуально

Функция display_status_information() — это то, что мы вызываем, когда нам нужно отобразить или обновить информацию о батарее для пользователя. Мы собираем наши переменные — такие как battery_level , battery_support и т. Д. — и затем обновляем нашу информацию. Эта функция часто вызывается, когда происходят различные события батареи (например, когда наш уровень заряда батареи изменяется).

Если у нас есть поддержка Battery API, мы также отображаем наши кнопки для имитации состояния батареи (чтобы вы могли видеть изменение интервала обновления на другие значения).

Обработка событий API батареи

Если у нас есть поддержка Battery API, мы также хотим подключиться к различным событиям батареи, чтобы мы могли реагировать, когда все меняется. Функция battery_event_handlers() вызывается и ищет два конкретных события.

• Событие изменения уровня : это вызывается всякий раз, когда наше устройство увеличивает или уменьшает заряд. Когда мы меняем это состояние, мы update_status_information() функцию update_status_information() , так как уровень может изменить состояние, в котором сейчас находится устройство (что будет влиять на то, как часто вызывается наш Ajax и т. Д.). После этого мы обновляем display_status_information() интерфейс с помощью display_status_information() .
• Событие зарядкиchange : вызывается, когда устройство останавливается или начинает зарядку. Мы вызываем get_battery_charging() чтобы получить новое состояние, а затем обновляем интерфейс с помощью display_status_information() .

Создание функции основного цикла

Последний шаг в этой последовательности — вызвать start_ajax_api_task() . Здесь мы проверим состояние battery_status и посмотрим, критично ли это. Если это так, у нас не будет никаких вызовов Ajax (это только ручное обновление).

Если мы не в критическом состоянии, мы создаем две петли. Первый цикл будет назначен переменной api_action_interval_item , и он будет использоваться для вызова функции replace_grid_image() каждые X секунд (где время определяется на основе состояния вашей батареи). Второй цикл используется в качестве счетчика, поэтому визуально вы можете видеть, когда произойдет следующее обновление.

Вызов CatAPI для замены изображения

Функция replace_grid_image() вызывается каждые X секунд, чтобы мы могли получить новое изображение из CatAPI.

Мы используем функцию $.ajax jQuery для отправки запроса в наш PHP-файл и возврата одного изображения из CatAPI. Это тогда добавлено в нашу галерею. Мы используем несколько аккуратных функций, так что случайное изображение будет заменено, и оно будет красиво отображаться (это все для презентации).

Вот GIF-представление API в действии:

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

Завершение всего этого

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

Вы можете сделать тонкие вещи, такие как установка консервативных настроек по умолчанию на низком заряде батареи, или вы можете полностью изменить работу пользователя.

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

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

Сообщите нам в комментариях, использовали ли вы Battery API или планируете использовать его для создания чего-то захватывающего! Я хотел бы знать, что вы думаете об этом.