Перейти к основному содержимому

Web API в браузере

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Всем

Что такое Web API​

Web API (в контексте браузера) - это набор стандартных интерфейсов, через которые JavaScript получает доступ к возможностям веб-платформы: сети, документу, графике, мультимедиа, хранилищам, устройствам и фоновым механизмам.

Важно различать два значения термина:

  • Web API браузера - fetch, DOM, Canvas, WebSocket, Service Worker, IndexedDB и другие API, встроенные в браузер.
  • HTTP API сервера (часто тоже называют "веб-API") - удалённые эндпоинты вроде /api/users, к которым клиент обращается по HTTP/HTTPS.

На практике эти два смысла работают вместе: браузерный Web API отправляет запрос, серверный API отвечает данными.

Как это работает: запрос, обработка, ответ​

Базовый цикл взаимодействия выглядит так:

  1. Запрос от клиента
    Браузер (или мобильное веб-приложение) отправляет HTTP-запрос на URL.
    Обычно используются методы:

    • GET - получить данные;
    • POST - создать/отправить данные;
    • PUT/PATCH - обновить данные;
    • DELETE - удалить данные.

  2. Обработка на сервере
    Сервер принимает запрос, проверяет параметры и права, выполняет бизнес-логику, при необходимости обращается к базе данных, кэшу или другим сервисам.

  3. Ответ клиенту
    Сервер возвращает статус (200, 404, 500 и т.д.), заголовки и тело ответа. Чаще всего - JSON, реже XML, HTML, файл или поток данных.

  4. Использование в интерфейсе
    JavaScript получает результат через Web API (fetch, XMLHttpRequest, WebSocket) и обновляет состояние приложения и DOM.

Архитектурная модель Web API в браузере​

JavaScript-код работает не "в вакууме". Браузер предоставляет:

  • движок JavaScript (выполняет код);
  • Web API-слой (готовые интерфейсы платформы);
  • очереди задач и событий (Event Loop);
  • рендер-движок (отрисовка интерфейса).

Пример: код вызывает fetch(). Запрос выполняется на стороне браузера, затем результат возвращается в очередь микрозадач/задач, и только после этого обработчик then/await продолжает выполнение.

Это и есть причина, почему веб-приложение может одновременно реагировать на клики, рендерить интерфейс и ждать сеть.

Основные категории Web API​

Ниже - карта ключевых API и их ролей.

1) Сеть и обмен данными​

  • Fetch API - современный стандарт для сетевых запросов.
  • XMLHttpRequest - старый, но до сих пор встречающийся API для AJAX.
  • WebSocket API - постоянное двустороннее соединение клиент-сервер в реальном времени.
  • Server-Sent Events (EventSource) - поток событий от сервера к клиенту по одному каналу.
  • URL API / URLSearchParams - безопасная работа с URL и query-параметрами.
  • History API - управление историей браузера (pushState, replaceState) без полной перезагрузки.
  • Navigation/Location-часть Window API - переходы, адрес страницы, перезагрузка.

2) Документ, структура и интерфейс​

  • DOM API - чтение и изменение структуры HTML-документа.
  • Elements API - работа с атрибутами, классами, стилями, размерами.
  • Nodes API - операции над узлами дерева (append, remove, clone).
  • DocumentFragment - сборка UI-фрагментов вне DOM для более эффективного рендера.
  • Range и Selection API - выделение и работа с диапазонами текста.
  • TreeWalker - программный обход дерева документа.
  • Shadow DOM - изолированная DOM-структура внутри компонента.
  • Custom Elements - собственные HTML-теги (веб-компоненты).
  • CSSOM/CSS API - доступ к стилям и CSS-правилам из JavaScript.
  • SVG API - программная работа с векторной графикой в документе.

3) События и пользовательский ввод​

  • Events API - базовая модель событий (click, input, submit, change).
  • Keyboard API - обработка клавиатурных событий (keydown, keyup).
  • Pointer Events - единая модель ввода для мыши, пера и тача.
  • Touch Events - низкоуровневые события касания на мобильных устройствах.
  • Drag & Drop API - перетаскивание данных и элементов.
  • Clipboard API - чтение/запись в буфер обмена (с ограничениями безопасности).

4) Графика, анимация и рендеринг​

  • Canvas API - 2D-рисование пиксельной графики.
  • WebGL - 3D-графика через GPU.
  • WebVR/WebXR - погружение в VR/AR-сцены (современный стандарт - WebXR).
  • Animation API (Web Animations) - программное управление анимациями.
  • Performance API - замеры времени, метрики загрузки, профилирование.

5) Мультимедиа и речь​

  • Audio API (Web Audio) - синтез, фильтрация и обработка звука.
  • Media API (HTMLMediaElement) - управление <audio> и <video>.
  • Media Streams (getUserMedia) - доступ к камере и микрофону.
  • Media Session API - управление медиа с экрана блокировки/гарнитуры.
  • Encrypted Media Extensions - защищённое воспроизведение DRM-контента.
  • Presentation API - вывод контента на внешний экран.
  • Speech API - распознавание и синтез речи.
  • WebVTT - субтитры и тайм-коды для видео.

6) Хранение данных в браузере​

  • Web Storage (localStorage, sessionStorage) - простое key-value хранилище.
  • IndexedDB - транзакционная клиентская база для больших объёмов данных.
  • Cache API - хранение сетевых ответов (часто с Service Worker).
  • Cookies - небольшой механизм хранения состояния с участием сервера.
  • StorageManager API - информация о квоте и использовании хранилища.

7) Фоновые задачи и офлайн​

  • Service Workers - прокси-слой для перехвата запросов, кэширования и фоновых событий.
  • Push API - push-уведомления от сервера.
  • Notifications API - системные уведомления пользователю.
  • Background Sync - отложенная отправка задач при восстановлении сети.

8) Многопоточность и межконтекстная связь​

  • Web Workers - выполнение тяжёлых вычислений вне UI-потока.
  • Channel Messaging - обмен сообщениями между контекстами.
  • Broadcast Channel - синхронизация между вкладками одного источника.
  • postMessage (Window) - безопасный обмен между окнами/iframe с проверкой origin.

9) Безопасность, криптография и доступ к устройствам​

  • Web Crypto API - хэширование, подписи, генерация ключей, шифрование.
  • Permissions API - проверка статусов разрешений.
  • WebRTC - p2p-аудио/видео/данные в реальном времени.
  • WebUSB - работа с USB-устройствами (с явным разрешением).
  • Device/Screen/Window API - параметры окна, экрана, видимости страницы.
  • Ambient Light API - чтение освещённости (поддержка ограничена, часто отключено из-за приватности).

10) Прочие важные интерфейсы​

  • Console API - логирование, отладка, группировка сообщений.
  • File API - чтение локальных файлов, Blob, FileReader.
  • Document/Node/Element Misc - вспомогательные методы платформы.

Где Web API видно в реальных продуктах​

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

Мессенджеры и чаты​

  • Новые сообщения "прилетают" без перезагрузки страницы через WebSocket или SSE.
  • При отправке текста интерфейс мгновенно обновляется через DOM API и события формы.
  • При потере связи сообщение может уйти позже через Service Worker + Background Sync.
  • Уведомление о новом сообщении приходит через Push API + Notifications API.

Примеры: веб-версии Telegram, Slack, Discord, корпоративные чаты.

Почта и коллаборация​

  • Почтовые клиенты подгружают письма через Fetch API.
  • Автосохранение черновиков работает через события ввода + локальное хранилище (IndexedDB/localStorage).
  • Совместные документы используют WebSocket и Broadcast Channel для синхронизации между вкладками.
  • Выделение текста и комментарии опираются на Selection API и Range API.

Примеры: веб-почта, онлайн-редакторы документов, доски задач.

Карты, навигация и такси​

  • Интерактивная карта рендерится через Canvas/WebGL.
  • Геопозиция пользователя получается через Geolocation API (через слой Navigator и разрешения).
  • Маршрут и ETA регулярно обновляются через Fetch или WebSocket.
  • Плавные анимации движения маркера используют Animation API.

Примеры: сервисы такси, доставки, travel-платформы.

Видеосервисы и стриминг​

  • Видео воспроизводится через HTMLMediaElement (Media API).
  • Субтитры подключаются через WebVTT.
  • Защищённый контент (подписки, кинотеатры) использует Encrypted Media Extensions.
  • Плеер на экране блокировки управляется через Media Session API.

Примеры: онлайн-кинотеатры, образовательные платформы с видеоуроками.

Соцсети и контент-платформы​

  • Лента подгружается порциями через Fetch API + IntersectionObserver (смежный браузерный API).
  • Реакции, лайки, комментарии обрабатываются системой событий (Events API).
  • Копирование ссылки на пост идёт через Clipboard API.
  • Предпросмотр изображений перед отправкой строится через File API.

Примеры: новостные и медиа-платформы, форумы, блоги.

Интернет-магазины и маркетплейсы​

  • Фильтры и сортировка меняют URL без перезагрузки через History API.
  • Корзина хранится локально через Web Storage или IndexedDB.
  • Чек-аут синхронизируется с сервером через Fetch API.
  • Онлайн-чат поддержки и статус заказа могут идти через WebSocket.

Примеры: e-commerce сайты, маркетплейсы, B2B-каталоги.

Онлайн-игры и интерактивные симуляции​

  • Рендеринг сцены и UI идёт через Canvas/WebGL.
  • Звук управляется через Web Audio API.
  • Сетевое взаимодействие в реальном времени - через WebSocket/WebRTC.
  • Ввод с клавиатуры/мыши/геймпада обрабатывается через Keyboard/Pointer API.

Примеры: браузерные игры, учебные тренажёры, симуляторы.

Админки и аналитические панели​

  • Графики и дашборды рендерятся через SVG/Canvas.
  • Тяжёлые вычисления (агрегации, форматирование больших массивов) выносятся в Web Workers.
  • Экспорт отчётов использует Blob + File API.
  • Метрики производительности UI собираются через Performance API.

Примеры: CRM, BI-панели, внутренние корпоративные инструменты.

PWA и офлайн-первый режим​

  • Основные ресурсы кэшируются через Service Worker + Cache API.
  • Данные сохраняются в IndexedDB, чтобы экран не был пустым в офлайне.
  • После восстановления сети изменения синхронизируются в фоне.
  • Приложение может устанавливаться "как нативное" и работать с push-уведомлениями.

Примеры: мобильные веб-приложения, полевые формы, курьерские интерфейсы.

Как распознать Web API в действии пользователю​

Признаки, что вы смотрите на работу Web API прямо сейчас:

  • страница обновляет часть интерфейса без полной перезагрузки;
  • адрес в браузере меняется, а экран остаётся в том же приложении;
  • данные подгружаются "на лету" при прокрутке;
  • сайт продолжает частично работать без интернета;
  • приходят push-уведомления от сайта;
  • в одной вкладке действие отражается в другой почти мгновенно.

Почему это важно разработчику​

Web API - это "операционная система браузера". Без неё JavaScript был бы только языком вычислений без доступа к сети, UI и устройствам.

Понимание Web API даёт:

  • уверенное проектирование фронтенд-архитектуры;
  • правильный выбор инструментов (fetch vs WebSocket, localStorage vs IndexedDB);
  • более безопасную работу с данными и разрешениями;
  • лучшую производительность (через Performance API, Worker, кэширование);
  • грамотную отладку через DevTools и Console API.

Ограничения и совместимость​

Не все API одинаково поддерживаются в разных браузерах и ОС.

Ключевые практики:

  • проверять поддержку (feature detection) перед использованием;
  • иметь fallback-стратегию для старых браузеров;
  • учитывать безопасный контекст (HTTPS) и пользовательские разрешения;
  • помнить про политику безопасности (CORS, CSP, sandbox, same-origin policy).

Краткий практический пример​

Типичный сценарий веб-приложения:

  1. Пользователь нажимает кнопку "Обновить данные" (Events API).
  2. Код отправляет GET через Fetch API.
  3. Сервер возвращает JSON.
  4. Приложение сохраняет часть данных в IndexedDB.
  5. Интерфейс обновляет карточки в DOM.
  6. При потере сети данные берутся из кэша (Cache API + Service Worker).

Так Web API связывает сеть, данные, интерфейс и устойчивость приложения в единую систему.

См. также​

См. также

Другие статьи этого же раздела в боковом меню (как на странице "О разделе").

Ещё 7 статей в разделе

Освоение главы0%