Статьи

Современные Browser API: возможности веба 2026

8 августа 2026 | 8 мин чтения

Браузер превратился в полноценную платформу: файлы, камера, офлайн, уведомления, синхронизация — всё это доступно без установки приложений. В 2026 году сайт может работать как приложение: PWA с push-уведомлениями, офлайн-доступом и даже доступом к железу. Разбираем самые полезные Browser API.

Топ-10 API, которые стоит знать

API	Что даёт	Когда применять
Fetch API	Запросы к серверу без перезагрузки	Везде (стандарт)
Service Workers	Офлайн, кэш, push, фоновая синхронизация	PWA, офлайн-режим
Notifications + Push	Уведомления на устройстве	Удержание пользователей
File System Access	Чтение/запись файлов пользователя	Редакторы, импорт/экспорт
Web Bluetooth / Serial	Связь с устройствами	IoT, лаборатории, гаджеты
Web Share	Шеар в системные приложения	Кнопки «поделиться»
Web Speech	Распознавание и синтез речи	Голосовые интерфейсы
Geolocation	Координаты пользователя (с согласия)	«Рядом со мной», логистика
IntersectionObserver	События появления элементов в вьюпорте	Lazy-load, анимации, аналитика
Web Crypto	Криптография в браузере	Шифрование, подписи

PWA: сайт как приложение

Прогрессивные веб-приложения в 2026 — стандарт: устанавливаются на домашний экран, работают офлайн, шлют push. Минимум для PWA:

// manifest.webmanifest
{
  "name": "Мой сервис",
  "short_name": "Сервис",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0f172a",
  "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }]
}

// service-worker.js — кэширование приложения
const CACHE = 'app-v1';
self.addEventListener('install', (e) => {
    e.waitUntil(caches.open(CACHE).then((c) =>
        c.addAll(['/', '/styles.css', '/app.js'])));
});
self.addEventListener('fetch', (e) => {
    e.respondWith(
        caches.match(e.request).then((r) => r ||
            fetch(e.request).then((res) => {
                caches.open(CACHE).then((c) => c.put(e.request, res.clone()));
                return res;
            })));
});

HTTPS обязателен для Service Workers.
Push-уведомления: Web Push + VAPID-ключи — работают даже при закрытом сайте.
Регистрация SW: navigator.serviceWorker.register('/sw.js').

Файлы и перетаскивание

Drag & drop + File System Access API превращают браузер в рабочее место:

dropZone.addEventListener('drop', async (e) => {
    e.preventDefault();
    const [file] = e.dataTransfer.files;

    // File System Access API: сохранение результата обратно
    const handle = await window.showSaveFilePicker({
        suggestedName: 'result.txt'
    });
    const writable = await handle.createWritable();
    await writable.write(await file.text());
    await writable.close();
});

Плюс: чтение EXIF, предпросмотр изображений через URL.createObjectURL, побайтовая обработка больших файлов через File.slice.

Офлайн и синхронизация

Cache API — кэш запросов/ответов для офлайн-режима.
Background Sync — отложить отправку данных при плохом соединении: форма заполнена офлайн → синхронизируется при появлении сети.
IndexedDB — локальная база в браузере (структурированные данные, большие объёмы).

Производительность интерфейса

IntersectionObserver — ленивая загрузка изображений и бесконечные ленты без десятков слушателей scroll.
requestIdleCallback — отложить некритичную работу на время простоя.
Web Worker + OffscreenCanvas — тяжёлые вычисления и рендеринг вне главного потока (INP-метрика в норме).
View Transitions API — плавные анимации между страницами/состояниями в пару строк.

Когда API нет: feature detection

Не все API есть во всех браузерах — всегда проверяйте:

if ('showSaveFilePicker' in window) {
    // File System Access доступен
} else {
    // фолбэк: обычное скачивание через 
}

// Современный способ проверки для Web Bluetooth
if (navigator.bluetooth && navigator.bluetooth.requestDevice) { ... }

Приватность: большинство «чувствительных» API (камера, геолокация, уведомления, Bluetooth) требуют разрешения пользователя — запрашивайте по действию, а не при загрузке.

«В 2026 году граница между вебом и нативными приложениями — это привычка, а не технология: PWA умеет почти всё, что умеет приложение, и не требует установки из магазина» — практика веб-разработки, 2026.

Начните с одного: если у вас есть повторный трафик — добавьте Service Worker и офлайн-кэш (час работы), либо push-уведомления для удержания. Это первый шаг к «сайту как приложению».