HTML5 API: обзор

HTML5 — это не только разметка, но и набор браузерных JavaScript API (Web Storage, Canvas, Geolocation, WebSockets и другие), стандартизированных вместе со спецификацией HTML Living Standard.

Зачем нужно

До HTML5 разработчики полагались на Flash, Java-апплеты и ActiveX для видео, аудио, графики и локального хранилища. HTML5 перенёс все эти возможности в стандартный браузер без плагинов. Знание, какие API доступны нативно, позволяет выбирать правильный инструмент вместо лишних библиотек.

Где используется

  • Видео и аудио без Flash (<video>, <audio>)
  • Браузерные игры и визуализации (Canvas API, WebGL)
  • Офлайн-приложения (Service Workers, Cache API)
  • Геолокация (навигаторы, карты, delivery-сервисы)
  • Тянуть-бросать (Drag and Drop API)
  • Локальные данные (localStorage, IndexedDB)

Основной контент

Группы HTML5 API

1. Хранилище данных

API Назначение
localStorage Постоянное хранилище ключ-значение (~5 МБ)
sessionStorage Хранилище на время вкладки
IndexedDB Клиентская база данных для больших объёмов
Cache API Кеширование запросов (используется в Service Workers) 
localStorage.setItem('theme', 'dark');
localStorage.getItem('theme'); // 'dark'

2. Графика

API Назначение
Canvas 2D Растровая 2D-графика и анимации
WebGL 3D-графика (через getContext('webgl'))
SVG Векторная графика (встроена в HTML) 
<canvas id="c" width="400" height="300"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.fillStyle = 'steelblue';
  ctx.fillRect(50, 50, 200, 100);
</script>

3. Медиа

<video controls src="movie.mp4" poster="preview.jpg"></video>
<audio controls src="music.mp3"></audio>

4. Коммуникация

API Назначение
fetch HTTP-запросы (заменил XMLHttpRequest)
WebSocket Двунаправленный канал с сервером
Server-Sent Events Поток событий от сервера (только сервер→клиент) 
const ws = new WebSocket('wss://example.com/ws');
ws.onmessage = (e) => console.log(e.data);
ws.send('Привет');

5. Геолокация

navigator.geolocation.getCurrentPosition((pos) => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

6. Drag and Drop

<div draggable="true" id="drag-item">Перетащи меня</div>
<div id="drop-zone">Зона сброса</div>

<script>
  const item = document.getElementById('drag-item');
  const zone = document.getElementById('drop-zone');

  item.addEventListener('dragstart', (e) => e.dataTransfer.setData('text', 'item'));
  zone.addEventListener('dragover', (e) => e.preventDefault());
  zone.addEventListener('drop', (e) => {
    e.preventDefault();
    zone.textContent = 'Получено: ' + e.dataTransfer.getData('text');
  });
</script>

7. Web Workers

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: [1, 2, 3] });
worker.onmessage = (e) => console.log('Результат:', e.data);

// worker.js (отдельный файл, без доступа к DOM)
self.onmessage = (e) => {
  const result = e.data.data.reduce((a, b) => a + b, 0);
  self.postMessage(result);
};

8. History API

history.pushState({ page: 2 }, 'Страница 2', '/page/2');
history.replaceState({}, '', '/page/3');
window.onpopstate = (e) => console.log(e.state);

Основа навигации в SPA (React Router, Vue Router используют History API).

Частые ошибки

  • Не проверяют поддержку перед использованием — некоторые API (Geolocation, WebGL) требуют явного разрешения или не поддерживаются в старых браузерах. Используйте feature detection: if ('geolocation' in navigator).
  • Geolocation без HTTPS — браузеры запрещают Geolocation на HTTP-страницах.
  • Web Workers обращаются к DOM — Workers не имеют доступа к document и window. Только чистые вычисления и postMessage.
  • Блокируют главный поток тяжёлыми вычислениями — именно для этого есть Web Workers.

Связанные темы

Ресурсы