PWA вместо мобильного приложения: когда это работает

Прогрессивное веб-приложение (PWA) — это сайт, который можно установить на главный экран телефона, запускать в отдельном окне без адресной строки, использовать без сети и получать через него push-уведомления. Оно заменяет мобильное приложение, когда продукту нужны быстрый доступ, уведомления и базовая работа офлайн, но не нужны глубокие функции устройства и присутствие в магазинах приложений.

Разберём, что умеет PWA, где его ограничения и как понять, подходит ли он вашему продукту.

Что такое PWA и что оно умеет?

PWA — это веб-приложение с манифестом и сервис-воркером: манифест описывает, как приложение выглядит при установке, а сервис-воркер работает в фоне, кеширует файлы и данные и принимает push-уведомления. Для пользователя это выглядит почти как обычное приложение, только без установки из магазина.

Что умеет PWA:

• устанавливаться на главный экран с иконкой и запускаться в отдельном окне;
• работать без сети или при плохом соединении за счёт кеша;
• отправлять push-уведомления, в том числе на iPhone — для установленных на главный экран веб-приложений начиная с iOS 16.4;
• обновляться мгновенно, без публикации в магазинах и ожидания проверки;
• находиться в поиске и открываться по ссылке, как обычный сайт.

Чем PWA отличается от нативного приложения?

PWA отличается от нативного приложения тем, что работает в браузере: это дешевле в разработке и обновлении, но с ограниченным доступом к функциям устройства и без присутствия в магазинах приложений. Поддержка возможностей также различается между платформами: на Android она шире, на iOS — уже.

Критерий	PWA	Нативное или кроссплатформенное приложение
Установка	С сайта, без магазина	Через App Store и Google Play
Обновления	Мгновенно, без проверки магазина	Через публикацию и проверку
Push-уведомления	Есть, на iOS — только для установленных PWA	Полноценные
Работа офлайн	Есть, через кеш сервис-воркера	Полноценная
Функции устройства	Камера, геолокация, базовые API	Полный доступ: фон, Bluetooth, NFC и другие
Поиск и ссылки	Индексируется, открывается по ссылке	Нужна отдельная веб-версия
Стоимость	Как у сайта, плюс немного работы	Выше: платформы, магазины, поддержка

Фото: Unsplash

Как превратить сайт в PWA?

Превратить сайт в PWA можно, добавив манифест, сервис-воркер и HTTPS. Сама по себе это небольшая работа; основное время уходит на продумывание офлайн-сценариев и уведомлений.

{
  "name": "Сервис доставки",
  "short_name": "Доставка",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e3a8a",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

// Регистрация сервис-воркера: кеширование файлов и приём push-уведомлений
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
}

Что продумать отдельно

1. Какие данные и страницы должны работать без сети.
2. Что происходит с действиями, совершёнными офлайн: очередь и отправка при появлении связи.
3. Когда и о чём присылать уведомления, чтобы их не отключили.
4. Как подсказать пользователю, что приложение можно установить.

Когда PWA подходит, а когда нет?

PWA подходит продуктам, которым важны быстрый доступ и уведомления, но не нужны глубокие функции устройства: сервисы заказов и записи, личные кабинеты, внутренние инструменты компании, контентные продукты. Нативное или кроссплатформенное приложение нужно, когда без функций устройства или присутствия в магазинах продукт теряет ценность.

Когда PWA — хороший выбор:

• бюджет ограничен, а продукт уже работает как сайт;
• нужно быстро проверить, будут ли пользователи возвращаться через иконку и уведомления;
• внутренние приложения для сотрудников, которые не нужно публиковать;
• важно, чтобы продукт находился в поиске.

Когда лучше приложение:

• нужны фоновая работа, Bluetooth, NFC, сложная работа с камерой;
• аудитория ищет продукт в магазинах приложений;
• критичны push-уведомления для всех пользователей iPhone, включая тех, кто не установил PWA.

Выбор технологии для полноценного приложения мы разбирали в статье Flutter, React Native или натив, а сам вопрос «нужно ли приложение» — в статье нужно ли бизнесу мобильное приложение.

Как оценить результат после запуска PWA?

Результат оценивают по поведению пользователей: сколько из них устанавливают приложение на главный экран, как часто возвращаются, сколько подписываются на уведомления и как это влияет на конверсию. Если цифры хорошие, PWA может оставаться основным решением надолго.

Что отслеживать:

• долю установок на главный экран среди активных пользователей;
• удержание установивших по сравнению с остальными;
• подписки на уведомления и отписки;
• конверсию и скорость загрузки на мобильных — об этом в статье Core Web Vitals.

Коротко

• PWA — сайт, который устанавливается на главный экран, работает офлайн и присылает уведомления.
• Обновления мгновенные, стоимость близка к стоимости сайта, продукт остаётся в поиске.
• Ограничения — доступ к функциям устройства и отсутствие в магазинах приложений; на iOS возможностей меньше.
• PWA подходит сервисам заказов, кабинетам, внутренним инструментам и проверке спроса на приложение.
• Если нужны фоновые функции, Bluetooth или присутствие в магазинах — выбирайте приложение.