Что такое PWA (прогрессивное веб-приложение) и что оно умеет
Основы3 минРедакция Innovialabs
Коротко
PWA — это сайт, который можно установить на телефон или компьютер как приложение, открывать без адресной строки и частично использовать офлайн; он дешевле двух нативных приложений, но не дает полного доступа к возможностям устройства.
Короткий ответ
PWA (Progressive Web App) — обычный сайт, к которому добавлены три вещи:
- манифест (
manifest.json) — имя, иконки, цвета и режим отображения, чтобы браузер предложил установку; - service worker — скрипт, который перехватывает сетевые запросы, кэширует файлы и дает работать без интернета;
- HTTPS — обязательное условие для service worker.
После установки PWA появляется на главном экране, открывается в отдельном окне без интерфейса браузера и обновляется сама при следующем запуске — без магазинов приложений.
Что умеет PWA
| Возможность | Как работает |
|---|---|
| Установка | Иконка на рабочем столе, отдельное окно |
| Офлайн-режим | Service worker отдает сохраненные страницы и данные |
| Push-уведомления | Через Push API, с разрешения пользователя |
| Фоновая работа | Ограниченно: синхронизация зависит от браузера |
| Доступ к устройству | Камера, геолокация, буфер обмена, шаринг — через веб-API |
| Обновления | Мгновенные, без модерации в сторе |
Офлайн-режим на практике
Service worker решает, откуда брать ответ: из сети или из кэша. Типичные стратегии:
- Cache first — для статики: шрифты, иконки, скрипты.
- Network first — для данных, которые должны быть свежими, с запасным вариантом из кэша.
- Stale-while-revalidate — сразу показать кэш и в фоне обновить его.
Минимальная регистрация:
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
Офлайн нужно проектировать: что показать без сети, как сохранить заказ или форму и отправить позже. Само по себе «сделать PWA» не означает, что все приложение заработает без интернета.
Ограничения на iOS и Android
Android (Chrome и другие браузеры на Chromium) поддерживает PWA лучше всего: предложение установки, push-уведомления, интеграцию с системой. Есть возможность опубликовать PWA в Google Play через обертку Trusted Web Activity.
iOS и iPadOS поддерживают PWA с оговорками:
- установка только вручную через меню «Поделиться» → «На экран Домой», автоматического предложения нет;
- push-уведомления работают только для установленных на экран PWA и в относительно новых версиях iOS;
- хранилище и фоновая работа ограничены сильнее, данные могут очищаться системой при долгом неиспользовании;
- часть API, доступных в Chrome, в Safari отсутствует.
Политика платформ меняется, поэтому перед стартом проверяйте актуальную поддержку нужных функций на целевых устройствах.
Каким бизнесам подходит PWA
- Интернет-магазины и каталоги — быстрая повторная загрузка и иконка на экране без установки из стора.
- Сервисы доставки и записи — заказ в пару касаний, уведомления о статусе.
- Внутренние инструменты компании — CRM, складской учет, приложения для курьеров и выездных сотрудников, которым нужна работа при плохой связи.
- Медиа и контент — чтение сохраненных материалов офлайн.
- MVP — проверить идею на одной кодовой базе до вложений в нативные приложения.
PWA хуже подходит, если нужны сложная работа с Bluetooth и железом, тяжелая графика, постоянная фоновая работа или присутствие в App Store как канал привлечения.
Частые ошибки
- Кэшировать все подряд и потом не уметь доставить обновление пользователям.
- Не продумать версию service worker — пользователи застревают на старой сборке.
- Ждать от iOS поведения Android и узнавать об ограничениях после запуска.
- Просить разрешение на уведомления сразу при входе — пользователи чаще отказывают.