Вітаємо на серії про Web API. В цій серії ми розглянемо Web API через MDN Web Docs та дослідимо, як їх можна використовувати в різних сценаріях на прикладах коду з React.
Що таке Web API
Термін Web API позначає загальну групу інтерфейсів програмування додатків (API), розроблених для роботи з веб-технологіями. Якщо ви займаєтесь веб-розробкою, ви, ймовірно, використовуєте хоча б одне з Web API щодня; наприклад, Console API.
Сьогоднішня тема — Battery Status API
Battery Status API дозволяє отримувати інформацію про стан батареї пристрою та оновлювати ці дані залежно від подій. Це дає змогу відслідковувати стан батареї і вживати необхідних заходів у разі її зміни.
Що ж це за заходи?
1 — Оптимізація енергоспоживання
2 — Збереження важливих даних
Оптимізація енергоспоживання
"Видобуток" криптовалют, залежно від обчислень, що виконуються процесорами (і / або графічними картами), може спричиняти значне збільшення споживання електроенергії. Це настільки інтенсивно, що деякі підприємства використовують ці процесори для обігріву води.
Звісно, навіть якщо ви не займаєтесь видобутком криптовалют, ви все одно можете вжити заходів для зменшення споживання енергії, коли батарея користувача починає розряджатися. Наприклад, можна вимкнути анімації, зупинити деякі фонові сервіси, або навіть змінити кольорову палітру — все це може допомогти знизити споживання енергії. Навіть якщо ви не турбуєтесь про батарею, оптимізація її використання (і навіть повідомлення користувача про це) може зробити вашу програму більш привабливою, а час використання програми / сайту, ймовірно, збільшиться.
Збереження важливих даних
Дії користувачів на сайті та їх прогрес необхідно зберігати до наступного візиту, якщо вони хочуть повернутись і продовжити. У грі рівні, предмети чи гроші, які ви здобули, можуть бути втрачені, і ви не захочете повертатись, якщо не зможете відновити прогрес. На платформах, таких як Netflix, ви не хочете платити за доступ до сервісу, який не зберігає місце, на якому ви зупинились при перегляді фільму. Хоча розробник не може зарядити батарею, він може зберігати важливі дані в залежності від рівня заряду батареї.
Давайте подивимось на код
Для початку я вирішив створити custom hook, який надасть нам необхідну інформацію про стан батареї. Так ми зможемо не лише легко отримувати ці дані, але й забезпечити оновлення відповідних React компонентів при зміні інформації.
Як ви можете бачити нижче, стан батареї визначається через об'єкт BatteryManager, який містить 4 різні значення, і для їх оновлення передбачені 4 різні прослуховувачі подій (Event Listeners).
Ці значення:
Я зберіг ці значення у useState як batteryStatus. Оскільки доступ до об'єкта батареї відбувається через Promise, я використовую async / await структуру. Це дозволяє мені при першому рендері, коли об'єкт батареї ще не отримано, оновити другий стан. Оскільки події ще не були активовані, я також оновлюю ці дані за допомогою setBatteryStatus, щоб не мати порожніх значень до моменту їх активації.
Причина, чому я обрав цей підхід, полягає в тому, що при видаленні хука, я зможу видалити додані eventListener (прослуховувачі подій) — для цього я додам їх згодом. Хоча React автоматично очищує компоненти, він може не впоратися з видаленням доданих прослуховувачів подій (Event Listeners).
Навіть для подій, доданих до глобальних об'єктів.
Після того, як я додав об'єкт батареї до стану (state), я підключаю події, що оновлюватимуть стан батареї, і, коли useEffect виконується знову, я використовую return для видалення цих подій, щоб запобігти їх накопиченню. Оскільки є 4 різні події, я вимкнув кілька з них і зробив скріншот, але сам синтаксис залишився той самий.👍
Ось так виглядає загальний вигляд customHook:
Добре, але як ми будемо використовувати ці дані? Я створив сторінку, на якій ми можемо просто показати отримані дані. Коли в customHook спрацьовують події, batteryStatus оновлюється, і таким чином, коли оновлюється useBattery, оновлюється також компонент Battery.
В кінцевому підсумку:
Оновлення за подіями gif
Метою було просто показати використання Web API, тому цього демонстраційного проекту достатньо, щоб зрозуміти, як це може бути застосовано. Однак, думаю, для інтеграції наведених прикладів та подібних до них, вам вже прийшли в голову кілька варіантів синтаксису.
Висновок
Battery Status API доступний з версії Chrome 38 використовувати. Однак Firefox його не підтримує, і для використання необхідний протокол HTTPS. Якщо у вас є інші приклади використання, не соромтеся поділитися ними. Удачі в кодингу 🚀.
Перекладено з: Web API Serisi — Battery Status API