Что умеет PWA
- Установка на главный экран прямо из браузера, без магазина приложений
- Полноэкранный режим без адресной строки
- Работа без интернета: данные сохраняются на устройстве и синхронизируются позже
- Push-уведомления, в том числе на iPhone
- Камера: фото, видео, сканирование штрихкодов и QR-кодов
- Геолокация
- Обновления сразу у всех пользователей, без модерации
Что нужно, чтобы сайт стал PWA
- HTTPS: без защищённого соединения браузер не даст установить приложение
- Web App Manifest: название, иконки, цвета и режим отображения
- Service worker: скрипт, который кеширует данные и отвечает, когда сети нет
- Иконки нужных размеров, в том числе отдельная иконка для iOS
Это не отдельный продукт, а надстройка над сайтом. Поэтому PWA можно сделать и из существующего веб-приложения, если его интерфейс удобен на телефоне.
Push-уведомления на iPhone
Долго главным аргументом против PWA было отсутствие уведомлений на iOS. С версии iOS 16.4 (2023 год) Safari поддерживает web push для сайтов, добавленных на главный экран.
Условие важное: пока пользователь не установил приложение, уведомления на iPhone недоступны, поэтому в интерфейсе стоит подсказать, как это сделать. Для надёжности важные уведомления можно дублировать в Telegram - так сделано в Tandem.
Где PWA упирается в ограничения
- Фоновые задачи: браузер не даёт приложению долго работать в фоне, особенно на iOS
- Bluetooth и NFC: Web Bluetooth и Web NFC не поддерживаются в Safari на iPhone
- Глубокая интеграция с системой: виджеты, CarPlay, Apple Watch
- Тяжёлые игры и 3D на пределе возможностей устройства
- Магазин приложений как канал продаж, если клиенты ищут вас именно там
Как пользователю установить PWA
- Android, Chrome: меню браузера, затем «Установить приложение» или «Добавить на главный экран»
- iPhone, Safari: кнопка «Поделиться», затем «На экран «Домой»»
- Компьютер, Chrome или Edge: значок установки в адресной строке
Многие пользователи не знают, что сайт можно установить, поэтому подсказку стоит показать в самом приложении и в подходящий момент: например, после первого успешного действия, а не сразу при входе.
Сравнение по пунктам
- Разработка: у PWA одна кодовая база для телефонов и компьютеров, у нативного приложения обычно отдельные версии под iOS и Android
- Публикация: PWA доступно по ссылке сразу, нативное проходит модерацию App Store и Google Play
- Обновления: PWA обновляется у всех сразу, нативное - когда пользователь обновит приложение
- Установка: PWA ставится из браузера в пару касаний, но об этом нужно подсказать; нативное привычно ищут в магазине
- Возможности устройства: у нативного доступ шире - фон, Bluetooth, NFC, виджеты
Пример: Tandem
Tandem - приватное приложение для пары, которое мы сделали на PWA. В нём чек-ины настроения, задачи с повторениями, дневник питания со сканером штрихкодов через камеру и письма в будущее.
Приложение работает без сети, присылает push- и Telegram-уведомления, а данные в Supabase защищены на уровне строк базы (RLS): каждый видит только своё. Публикация в App Store такому продукту дала бы в основном модерацию и задержку обновлений.
Как решить
- Приложением пользуются с телефона время от времени - меню, запись, заказ, личный кабинет: начните с PWA
- Нужно быстро и недорого проверить идею: PWA
- Ключевая функция требует фона, Bluetooth, NFC или виджетов: нативное приложение
- Магазин приложений - ваш канал продаж: нативное приложение
Мы говорим на старте, если PWA не подходит под задачу.
