Что такое PWA и когда оно заменяет приложение

Что такое PWA: это обычный сайт, которому добавили три вещи - иконку на домашнем экране, работу без интернета и push-уведомления. Отдельного проекта под это не нужно. Если сайт уже сделан нормально, превращение его в PWA занимает 20-60 часов работы по ставке 3 500 ₽ за час, то есть 70-210 тысяч ₽ против 350 000 ₽ минимум за приложение в сторах.

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

Кроссплатформенная разработкаот 350 000 до 1 200 000 ₽сроки: 8-16 недель

Из чего это собрано

Технически PWA - это три файла и одна привычка.

Манифест. JSON, в котором написано название приложения, иконки, цвет фона и то, как оно открывается: в полный экран или во вкладке. Именно он даёт браузеру основание предложить «Добавить на главный экран».

Service worker. Скрипт, который живёт между страницей и сетью. Он перехватывает запросы, отдаёт закэшированные ответы, когда сети нет, и умеет получать пуши, даже когда вкладка закрыта. Это единственная по-настоящему сложная часть: кэш легко настроить так, что пользователь месяцами будет видеть старую версию сайта.

HTTPS. Без него service worker не запустится вообще.

Привычка касается интерфейса. Сайт, который открывается в полный экран без адресной строки, обязан вести себя как приложение: иметь собственную навигацию вместо кнопки «Назад» в браузере, не терять состояние при повороте экрана, показывать что-то осмысленное при отсутствии сети. Это работа дизайнера и фронтендера, и она обычно занимает больше времени, чем сам манифест.

Что PWA реально умеет

Ставиться иконкой на домашний экран без магазина. Открываться в полный экран, так что визуально от приложения не отличается. Работать без интернета: кэш ассетов и локальная база данных в браузере. Присылать push-уведомления. Работать с камерой, микрофоном, геолокацией, буфером обмена, файлами. Делиться контентом через системное меню.

Обновляться мгновенно. Вы выкатили новую версию - все пользователи получили её при следующем открытии. Ни ревью, ни ожидания, ни пользователей, застрявших на версии годовой давности. Для сервиса, который меняется каждую неделю, это весомее, чем кажется на старте.

И главное для бизнеса: оставаться сайтом. Тот же URL индексируется поиском, на него ведёт реклама, им можно поделиться ссылкой в мессенджере. Приложение в сторе так не умеет ничего.

Чего PWA не умеет

Ограничения на iOS. Здесь надо говорить прямо. Push-уведомления на iPhone работают только после того, как человек добавил сайт на домашний экран вручную, через меню «Поделиться». Автоматического предложения установки, как на Android, у Apple нет. Значительная часть пользователей до этой кнопки просто не дойдёт, и никакой баннер «добавьте нас на экран» проблему не решает.

Нет карточки в магазине. Люди привыкли смотреть на оценки, отзывы и число установок. У PWA этого нет. Для потребительского продукта это минус доверия, для внутреннего инструмента компании - не минус вообще.

Фон. Долгая работа при закрытом приложении: непрерывный GPS-трекинг, синхронизация по расписанию, обмен по Bluetooth. Браузер такое не даёт и правильно делает.

Тяжёлое железо и графика. Обработка видео, дополненная реальность, 3D с нагрузкой. Не сюда.

Удержание. Иконку, поставленную с сайта, удаляют легче, чем установленное приложение. По моим наблюдениям, психологически она воспринимается как закладка, а не как программа.

Когда PWA заменяет приложение

Проверка одна: посмотрите, что делает пользователь внутри и как часто.

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

Особенно хорошо она заходит для сотрудников. Внутренний инструмент не нужно распространять через магазины, не нужно проходить ревью с формулировкой «приложение бесполезно для широкой публики» (это реальная причина отказа App Store), не нужно объяснять службе безопасности, зачем на рабочем телефоне сторонний магазин.

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

PWA и гибрид: один и тот же веб-слой

Хорошая новость для тех, кто выбирает: это не развилка навсегда.

PWA и гибридное приложение делят общую базу. Внизу лежит один и тот же веб-код: интерфейс, логика, стили. Дальше он либо отдаётся браузеру и становится PWA, либо заворачивается в нативную оболочку Capacitor и уезжает в App Store и Google Play. Схема ниже показывает второй вариант, и всё, что находится под слоем оболочки, у PWA точно такое же.

Разрез приложения: приложение в сторах

Куда растёт PWA, если её перестало хватать

Нижние слои общие с PWA: тот же веб-код. Сверху добавляется оболочка Capacitor и нативные плагины, и то же приложение уезжает в магазины.

iOS

App Store, ревью 1-3 дня

Android

Google Play, ревью до суток

02

Оболочка Capacitor

• WebView
• мост JS ↔ Native
• сборка .ipa и .aab

Нативные плагины

• камера и галерея
• push-уведомления
• геолокация
• биометрия
• файлы и шаринг

01

Один код Vue 3 + TypeScript

• экраны и навигация
• бизнес-логика
• состояние
• запросы к API

Нативного кода в проекте только оболочка и плагины. Экраны, логика и данные - общие, поэтому правка уезжает сразу на обе платформы.

Практически это значит, что стартовать можно с PWA за 70-210 тысяч, а через полгода, когда станет понятно, нужны ли вам сторы, обернуть тот же код в приложение. Доработка на этом шаге есть - нативные плагины, разрешения, подготовка к ревью, - но переписывать интерфейс с нуля не придётся. Это самый дешёвый способ проверить гипотезу «нам нужно приложение», не потратив на проверку 350 тысяч.

Обратный порядок тоже работает: у гибридного приложения веб-часть можно параллельно публиковать как PWA и получить третий канал доставки бесплатно.

С чего начать

Прежде чем заказывать PWA, проверьте базу. Если сайт грузится на мобильном 5 секунд, иконка на экране не поможет: человек уйдёт до первого экрана и в приложении, и на сайте. Сначала скорость, потом манифест.

Дальше решите вопрос об офлайне честно. Полноценная работа без сети с локальной базой и синхронизацией при появлении связи - это отдельная задача на несколько недель, а не галочка. Кэш статики и осмысленный экран «нет сети» - это несколько дней. Первое нужно сервисам, где люди работают в полях и подвалах. Второе нужно всем остальным.

Как это устроено изнутри, чем гибрид отличается от натива и где заканчивается веб-слой, разобрано на странице кроссплатформенной разработки. Если из разговора выяснится, что вам достаточно PWA вместо приложения за 350 тысяч, я так и скажу.