Що робить Web API у браузері

JavaScriptJunior~3 хв читання

Web API (Web Application Programming Interface), це набір вбудованих можливостей, які надає браузер, щоб JavaScript міг взаємодіяти з оточенням: вікнами, документом, мережею, користувачем і пристроями. Ці API не є частиною самої мови JavaScript, вони є частиною браузера або іншого середовища виконання, наприклад Node.js.

Теорія

TL;DR

Web API, це можливості середовища, а не мови: у стандарті ECMAScript їх немає.
window, document, navigator, fetch, setTimeout, localStorage, усе це надає браузер.
Мова відповідає за логіку й дані, Web API, за DOM, мережу, таймери, події та пристрої.
Асинхронні Web API виконують роботу поза основним потоком JS.
Коли робота завершена, Web API кладе колбек у чергу задач, а Event Loop запускає його, щойно стек порожній.
Головна мета Web API, дати JavaScript доступ до можливостей браузера й пристрою.

Швидкий приклад

javascript

console.log(window.innerWidth);
alert('Привіт!');
document.body.style.background = 'lightblue';

Тут:

window, об'єкт браузера, Web API для керування вікном;
alert(), метод Web API для показу діалогу;
document, Web API для роботи з DOM, тобто зі сторінкою.

Жоден із цих об'єктів не входить до стандарту JS (ECMAScript), їх надає браузер, щоб JavaScript міг працювати з вебсторінкою.

Хто за що відповідає

Компонент	Звідки	За що відповідає
JavaScript (ECMAScript)	Мова	Логіка, обчислення, структури даних
Web API (браузер)	Середовище (Chrome, Firefox тощо)	Робота з мережею, DOM, подіями, таймерами
Event Loop	Механізм середовища	Керує виконанням коду та чергами задач

Саме тому один і той самий код може працювати в браузері й падати в Node.js: мова та сама, а набір API середовища різний.

Основні групи Web API

DOM API: робота з HTML-документом

Дає змогу читати та змінювати структуру сторінки.

javascript

document.querySelector('h1').textContent = 'Привіт, світ!';

Сюди належать document, Element, Node, classList, style, dataset та інші.

Network API: робота з мережею

Дає змогу робити HTTP-запити та обробляти відповіді.

javascript

fetch('https://api.github.com/users/octocat')
  .then(res => res.json())
  .then(console.log);

Сюди належать fetch, XMLHttpRequest, WebSocket, EventSource.

Timers API: відкладені дії

javascript

setTimeout(() => console.log('Через секунду'), 1000);
setInterval(() => console.log('Щосекунди'), 1000);

Сюди належать setTimeout, setInterval, clearTimeout, clearInterval.

Storage API: збереження даних у браузері

javascript

localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));

Сюди належать localStorage, sessionStorage, IndexedDB, CacheStorage.

Multimedia and Graphics API

Робота з камерою, мікрофоном, звуком і відео:

javascript

navigator.mediaDevices.getUserMedia({ video: true });

Робота з графікою:

javascript

const ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 100);

Сюди належать Canvas API, WebGL, MediaStream, Web Audio API.

Device and Hardware API

Geolocation API, визначення місцезнаходження;
Battery API, Clipboard API, Vibration API;
Sensor APIs, доступ до акселерометра, гіроскопа тощо.

javascript

navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords));

Security and Identity API

Credential Management;
WebAuthn;
Permissions API;
Notification API.

javascript

Notification.requestPermission().then(console.log);

Events API: система подій

Дає змогу слухати дії користувача та реакції системи.

javascript

button.addEventListener('click', () => console.log('Клік!'));

Сюди належать події миші, клавіатури, мережі, видимості, завантаження та інші.

Як Web API взаємодіє з Event Loop

Коли ви викликаєте, наприклад:

javascript

setTimeout(() => console.log('Пізніше'), 1000);

відбувається таке:

setTimeout, це Web API, яке надає браузер, а не функція мови.
Браузер відлічує час окремо від основного потоку JS.
Коли таймер спливає, Web API надсилає задачу в чергу макротасок.
Event Loop забирає її, щойно стек викликів вільний, і передає назад у JavaScript.
JS виконує колбек.

Тобто JS делегує роботу браузеру через Web API і не чекає на неї. Web API, це «робітники» браузера, а JS, «менеджер», який роздає їм завдання.

Проста аналогія: JavaScript, це шеф-кухар, а Web API, це кухня з технікою й помічниками. Кухар віддає задачі (постав чайник, спечи пиріг), техніка все робить сама й повідомляє, коли готово, а кухар тим часом готує інші страви.

Підсумок

Компонент	Що робить
Web API	Набір функцій і об'єктів, які надає браузер
Не частина JavaScript	Реалізовані в рушії браузера: Chrome використовує Blink, Firefox використовує Gecko
Взаємодія	Через `window`, `document`, `navigator`, `fetch`, `setTimeout` та інші
Працюють асинхронно	Ставлять колбеки в чергу Event Loop
Головна мета	Дати JS доступ до можливостей браузера й пристрою

Типові помилки

Вважати setTimeout, fetch чи localStorage частиною мови. Це API середовища, тому в Node.js або в Web Worker набір доступних об'єктів інший.
Звертатися до window чи document у коді, який виконується на сервері під час SSR: там цих об'єктів просто немає.
Думати, що setTimeout(fn, 1000) гарантує виклик рівно через секунду. Це мінімальна затримка: колбек чекає, доки звільниться стек і до нього дійде черга.
Плутати чергу макротасок (таймери, події) з чергою мікротасок (проміси): мікротаски завжди виконуються раніше.
Розраховувати, що Web API доступні без дозволу користувача. Геолокація, камера, мікрофон і сповіщення спершу вимагають явного дозволу, і запит може бути відхилений.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.