Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить Web API у браузері». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**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);
```

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

1. `setTimeout`, це Web API, яке надає браузер, а не функція мови.
2. Браузер відлічує час окремо від основного потоку JS.
3. Коли таймер спливає, Web API надсилає задачу в чергу макротасок.
4. Event Loop забирає її, щойно стек викликів вільний, і передає назад у JavaScript.
5. 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 доступні без дозволу користувача. Геолокація, камера, мікрофон і сповіщення спершу вимагають явного дозволу, і запит може бути відхилений.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати806 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.