Расскажи про функционал HTML5 API

HTML5 API: Обзор функционала

HTML5 API — это набор встроенных интерфейсов JavaScript, которые предоставляют браузеру мощные средства для работы с данными, медиа, геолокацией и другими возможностями. Как Python Developer, важно понимать, что эти API часто требуют поддержки на бэкенде.

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

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

LocalStorage и SessionStorage — синхронное хранилище пары ключ-значение (ограничение ~5-10 МБ):

// Сохранение
localStorage.setItem("user_id", "123");
sessionStorage.setItem("temp_data", JSON.stringify({name: "John"}));

// Получение
const userId = localStorage.getItem("user_id");
const tempData = JSON.parse(sessionStorage.getItem("temp_data"));

// Очистка
localStorage.removeItem("user_id");
localStorage.clear();

IndexedDB — асинхронная БД на клиенте (ограничение зависит от браузера, часто 500+ МБ):

const request = indexedDB.open("myDatabase", 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readonly");
  const store = transaction.objectStore("users");
  const getUserRequest = store.get(1);
  getUserRequest.onsuccess = () => console.log(getUserRequest.result);
};

Web Storage vs IndexedDB:

• LocalStorage: просто, синхронно, малый объём
• IndexedDB: асинхронно, большой объём, сложнее

С точки зрения бэкенда, все эти данные — локальные, не должны храниться критичные данные без синхронизации с сервером.

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

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log("Широта: ", position.coords.latitude);
    console.log("Долгота: ", position.coords.longitude);
    console.log("Точность: ", position.coords.accuracy);
  },
  (error) => console.error("Ошибка: ", error.message)
);

Для бэкенда: обычно клиент отправляет координаты через POST /api/v1/user/location, сервер их обрабатывает.

3. Canvas и WebGL

Canvas — растровая графика, рисование:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);

WebGL — 3D графика на базе OpenGL.

4. Медиа API

const video = document.getElementById("myVideo");
video.play();
video.pause();
console.log(video.currentTime);
console.log(video.duration);

5. Web Workers

Для тяжёлых вычислений в отдельном потоке (не блокирует UI):

const worker = new Worker("worker.js");
worker.postMessage({number: 100});
worker.onmessage = (event) => console.log("Результат: ", event.data);

6. Fetch API и WebSocket

Fetch — асинхронные HTTP запросы (замена XMLHttpRequest):

fetch("/api/v1/users", {method: "GET", headers: {"Content-Type": "application/json"}})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

WebSocket — двусторонняя коммуникация в реальном времени:

const ws = new WebSocket("ws://localhost:8000/ws");
ws.onopen = () => ws.send("Hello");
ws.onmessage = (event) => console.log(event.data);
ws.onerror = (error) => console.error(error);
ws.onclose = () => console.log("Соединение закрыто");

От бэкенда требуется поддержка WebSocket на уровне фреймворка (FastAPI, Django Channels и т.д.).

7. Service Workers

Для кеширования, офлайн-режима, пуш-уведомлений:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js")
    .then(reg => console.log("Registered"))
    .catch(err => console.error("Error", err));
}

8. Permissions API

navigator.permissions.query({name: "camera"})
  .then(result => {
    if (result.state === "granted") {
      console.log("Доступ разрешён");
    }
  });

Роль Python Developer

Даже как бэкенд-разработчик, важно:

1. Знать ограничения — что можно и нельзя делать на клиенте
2. Проектировать API с учётом клиентских потребностей (Fetch, WebSocket)
3. Обрабатывать данные с клиента (геолокация, canvas-образы, файлы)
4. Обеспечивать безопасность — валидация всех данных с клиента
5. CORS — правильно настраивать для браузерных запросов

Безопасность

• Никогда не полагайся только на клиентский API
• Валидируй все входные данные на сервере
• Используй HTTPS для WebSocket (WSS)
• Будь осторожен с LocalStorage — это уязвимо для XSS

HTML5 API — мощный инструмент, но Python Developer должен понимать, что реальная логика, безопасность и валидация должны быть на сервере.