4 недооцененных API браузера

API браузера  —  это важнейшие функциональности HTML, встроенные в веб-браузер. Они намного эффективнее, чем можно представить. А некоторые отличные API просто недооценены! 

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

Помимо хорошо известных API, например Web Storage API и Fetch API, есть ряд других, которых незаслуженно обошли вниманием и не внесли в часто встречающиеся руководства!

Пора с ними познакомиться! 

1. Battery API

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

Battery Status API не относится к сторонним приложениям. Его можно найти в navigator. Встроенное свойство window.navigator объекта navigator имеет метод getBattery().

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

Пример:

navigator.getBattery().then((battery) => {
    console.log(battery);
});

Ответ на вышеприведенный код: 

{
    charging: false,
    chargingTime: Infinity,
    dischargingTime: 35040,
    level: 0.53,
    onchargingchange: null,
    onchargingtimechange: null,
    ondischargingtimechange: null,
    onlevelchange: null
}

2. IndexedDB API

В спецификации HTML5 Web Storage API был признан устаревшим и заменен на IndexedDB API. Однако Web Storage все еще поддерживается несколькими популярными браузерами, такими как Safari от Apple и Opera. Индексация, транзакции, сложные возможности запросов  —  это лишь небольшой перечень преимуществ IndexedDB перед Web Storage.

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

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

Мы даже можем создать полную реализацию CRUD, используя только IndexedDB для локального хранения данных. Кроме того, она может пригодиться при хранении сложных данных для PWA.

Рассмотрим способ получения доступа к IndexedDB:

let indexedDB = window.indexedDB;

С более подробной информацией об этом API можно ознакомиться по ссылке. 

3. Clipboard API

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

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

Выполним следующие действия с помощью этого API: 

// Копирование массива объектов ClipboardItem в буфер обмена 
navigator.clipboard.write();

// Запись текстовой строки в буфер обмена пользователя 
navigator.clipboard.writeText();

// Чтение буфера обмена как массива объектов ClipboardItem
navigator.clipboard.read();            // -> возвращает промис

// Чтение текущего содержимого буфера обмена в текстовом формате 
navigator.clipboard.readText();       // -> возвращает строку

4. Page Visibility API

При просмотре веб-страниц с помощью вкладок браузера существует вероятность того, что некоторые или даже все вкладки не будут доступны одновременно. API браузера Page Visibility API позволяет увидеть активность вкладок браузера. 

С помощью Page Visibility API мы можем определить, когда пользователь покидает страницу или заходит на нее. Этот API позволяет выполнять определенные действия: обновление данных при возвращении пользователя на страницу или отслеживание уходов со страницы для приложений типа Quiz App. 

Для отслеживания изменений в состоянии видимости страницы используется специальный слушатель события.

Приведем соответствующий пример:

const handlePageChange = () => {
    document.hidden
        ? console.log(`User left the page at ${new Date()}`)
        : console.log(`User opened the page at ${new Date()}`)
}

document.addEventListener("visibilitychange", handlePageChange);

Для самостоятельного ознакомления рекомендую такие API, как Geolocation API, Web Animation API, Fullscreen API и Canvas API. Они несомненно расширят ваши возможности.

Читайте также:

• Как читать и понимать документацию API
• Лучшие способы вызова API на Javascript
• Автоматический мониторинг скорости API с помощью динамического тестирования

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Gourav Kajal: 4 Awesome Browser APIs You Might Not Be Using Yet