PWA (Progressive Web App) — обычный веб-сайт, но работающий как мобильное приложение. Устанавливается на экран телефона, работает офлайн, шлёт push-уведомления — но App Store или Google Play не нужны. Откройте в браузере, нажмите "Добавить на главный экран" — готово.
Зачем PWA?
1) Один код — все платформы (iOS, Android, desktop). 2) Нет комиссии App Store (30%). 3) Мгновенное обновление. 4) Быстрая установка по ссылке. 5) SEO — индексируется как обычный сайт.
3 основных компонента
1. HTTPS — обязательно. 2. Manifest — имя, иконка, цвет. 3. Service Worker — JS для офлайн-работы и кэша.
Файл manifest
manifest.json — информация о приложении:
{
"name": "Sayt.uz",
"short_name": "Sayt",
"start_url": "/",
"display": "standalone",
"theme_color": "#1a1a6e"
}
Подключите в head: <link rel="manifest" href="/manifest.json">
Service Worker
Этот JS работает в фоне браузера. Задачи: 1) Кэширование файлов (для офлайн). 2) Перехват сетевых запросов. 3) Приём push. 4) Background sync.
Офлайн-режим
Если Service Worker кэширует страницы, сайт работает даже без интернета.
Push-уведомления
С разрешения пользователя можно слать сообщения даже при закрытом сайте. Для e-commerce: "Корзина ждёт", "Началась скидка". Но не перебарщивайте.
Недостатки
1) На iOS часть возможностей ограничена. 2) Сложные native-функции ограничены. 3) Не виден в App Store (но это и плюс).
Кому подходит?
1) Новости, блог, контент. 2) E-commerce. 3) Сервисные сайты. 4) Разовая кампания. Native нужно только для тяжёлых игр или глубокой интеграции с устройством.
Lighthouse PWA audit
Chrome DevTools → Lighthouse → раздел PWA. Проверяет manifest, service worker, HTTPS.
Опыт Сайт.uz
Сайты на билдере Сайт.uz могут иметь функции PWA — manifest и service worker добавляются автоматически.