🌐 Браузерные API
Map of Content для Web APIs — нативные возможности браузера, доступные из JavaScript: буфер обмена, геолокация, воркеры, мониторинг медиа-запросов и прочее.
📑 Оглавление
Зачем нужно
JavaScript в вакууме умеет только считать и манипулировать данными. Всё «настоящее» — работа с буфером, геолокацией, медиа, наблюдение за DOM — делается через Browser APIs. Это стандартизированные интерфейсы, реализованные во всех современных браузерах, которые позволяют фронтенду взаимодействовать с устройством и окружением пользователя.
Знание browser API отличает разработчика, который «знает JS», от того, кто «умеет делать продукт».
Набор API
🟢 Базовые
- DOM — селекторы и манипуляции — поиск, создание, вставка узлов
- window navigator location — глобальные объекты браузера
- Clipboard API — программный доступ к буферу обмена (copy/paste)
- Console API — расширенная отладка через
console.* - window.matchMedia — реактивные media queries из JS
- URLSearchParams — работа с query-параметрами URL
- History API — pushState/popstate, фундамент SPA-роутинга
- DOMParser — парсинг XML/HTML строк (RSS, SVG, фрагменты)
🟡 Средние
- Geolocation API — координаты пользователя
- FormData API — работа с данными форм и multipart-запросами
- Performance API — метрики загрузки и работы страницы
- requestAnimationFrame — плавная анимация в такт refresh
- HTMLAudioElement — программный аудио-плеер
- HTMLVideoElement — программный видео-плеер
- BroadcastChannel — pub/sub между вкладками
- WebSocket клиент — real-time bi-directional канал
- Drag and Drop API — перетаскивание
🔴 Продвинутые
- Web Workers — многопоточный JS, фоновые вычисления без блокировки UI
- Service Worker — прокси сети, offline, ядро PWA
- PWA — Progressive Web App — приложение из веба
- Cache API — программный кэш HTTP-ответов
- IndexedDB — объектная БД в браузере
- OPFS — Origin Private File System — приватная файловая система, гигабайты
- Web Crypto API — хэширование, шифрование, подписи
- Web Audio API — граф обработки звука, синтез, эффекты
- WebRTC — P2P медиа и данные между браузерами
- Web Locks — координация между вкладками
- MutationObserver -- наблюдение за DOM — реакция на изменения DOM
- ResizeObserver -- изменение размера — наблюдение за размером элементов
- Web Storage -- localStorage и sessionStorage — простое key-value
Для bootcamp задач
| Задача | API |
|---|---|
| Podcast Player | Web Crypto API, HTMLAudioElement, DOMParser, History API, requestAnimationFrame |
| JS30 | HTMLAudioElement, HTMLVideoElement, Web Audio API, Canvas API основы |
| AsyncRace | requestAnimationFrame, History API, IndexedDB |
| PWA (если будет) | Service Worker, Cache API, PWA — Progressive Web App |
Связанные домены
| Домен | Связь |
|---|---|
| _MOC JavaScript | Родительский MOC |
| _MOC Сеть | Fetch API, HTTP-запросы |
| _MOC DOM | Observer API (Intersection, Mutation, Resize) работают с DOM |
| _MOC Производительность | Performance API — измерение Core Web Vitals |
| _MOC CSS | matchMedia — мост между CSS media queries и JS |
🧭 Навигация
| ⬆ Родительский MOC | _MOC JavaScript |
| ⬆ К главной | 🗺️ MOC |