Для большинства сервисов, где основа — каталог, формы, заказы, личный кабинет и уведомления, хватает PWA: адаптивного веб-приложения, которое можно поставить на экран телефона и которое частично работает без сети. Нативное приложение нужно, когда сервису необходимы фоновая работа, глубокий доступ к устройству или присутствие в магазине приложений как отдельный канал привлечения.
Мы делаем адаптивные веб-сервисы и PWA, нативные приложения для iOS и Android не делаем. Поэтому статья написана как разбор для того, кто решает, а не как реклама одного из вариантов: в конце есть вопросы, которые стоит задать любому подрядчику, и порядок, как не потерять деньги при ошибке выбора.
Что такое PWA и чем оно отличается от сайта и от приложения
PWA (прогрессивное веб-приложение) — это обычное веб-приложение с тремя добавками: файл-описание, по которому браузер предлагает установить его на экран; служебный скрипт (service worker), который хранит часть страниц и данных на устройстве; и работа по защищённому соединению. Оно открывается по ссылке, не требует магазина и обновляется на сервере, а выглядит и ведёт себя близко к приложению.
| Свойство | Обычный сайт | PWA | Нативное приложение |
|---|---|---|---|
| Как получить | Ссылка | Ссылка, затем установка на экран по желанию | Магазин приложений, проверка магазином |
| Офлайн | Нет | Частично: кэш страниц и данных, очередь действий | Полноценно, если предусмотрено |
| Уведомления | Нет | Есть, с ограничениями на некоторых системах | Есть, полный набор |
| Доступ к устройству | Минимум: камера, геолокация по запросу | То же, что у браузера; часть возможностей недоступна | Широкий, включая фоновые режимы |
| Обновление | Сразу у всех | Сразу у всех, но нужна стратегия смены кэша | Через магазин, не все обновляют сразу |
| Код | Один | Один | Отдельный на каждую систему или кросс-платформенный слой |
| Присутствие в магазине | Нет | Обычно нет | Есть |
Из таблицы видно главное: у PWA и обычного сайта один код и один канал распространения, а различие в степени «приложения». Если вам нужен просто адаптивный сервис, начните с веб-сервиса, а PWA добавьте поверх, когда понадобится установка и офлайн.
Что PWA умеет в продакшене
Заявленные возможности стоит делить на те, что работают надёжно, и те, что зависят от браузера и системы.
- Установка на экран. Значок, запуск без адресной строки, отдельное окно. Способ установки различается на Android и iOS, и подсказывать его пользователю приходится самому интерфейсу.
- Офлайн-чтение. Справочники, расписания, ранее открытые карточки, билеты и инструкции доступны без сети. Это самое надёжное применение.
- Офлайн-запись. Действие сохраняется на устройстве и уходит на сервер, когда сеть вернётся. Это сложнее: нужны очередь, повтор без дублей и правило для конфликтов, если данные на сервере изменились.
- Уведомления. Работают, но условия зависят от системы и версии. На части устройств они доступны только установленному на экран приложению и требуют согласия пользователя. Проверять нужно на устройствах вашей аудитории, а не в документации.
- Камера, геолокация, файлы, голосовой ввод. Доступны через браузер с запросом разрешения. Для сканирования кодов и фото документов обычно достаточно.
Не стоит полагаться на локальное хранилище как на единственное место данных пользователя: браузер может очистить его, а человек может сменить устройство. Источник истины всегда на сервере, а устройство хранит копию.
Чего PWA не умеет или умеет с оговорками
Предел определяется тем, что браузер не отдаёт веб-приложению. Если ваш сервис упирается в строки ниже, нативное приложение, скорее всего, нужно.
| Возможность | PWA | Нативное приложение | Как это проверить |
|---|---|---|---|
| Постоянная работа в фоне | Ограничена: система усыпляет страницу | Есть, в рамках правил системы | Нужна ли работа при выключенном экране |
| Непрерывное отслеживание геолокации | Только пока приложение открыто | Есть, с разрешением пользователя | Что сломается, если точка не отправляется минуту |
| Bluetooth, NFC и датчики | Частично и не на всех системах | Широкий доступ | Какое устройство подключается и какая у него модель |
| Присутствие в магазине | Нет | Есть | Приходят ли ваши клиенты через поиск по магазину |
| Оплата и подписка через магазин | Нет | Есть, по правилам магазина | Как именно вы собираетесь принимать деньги |
| Интеграция с системой | Минимум | Виджеты, звонки, ярлыки, сканеры | Нужен ли сервис на экране блокировки и в звонках |
| Скорость сложной графики | Зависит от браузера | Выше, ближе к устройству | Игра, редактор видео, карта с очень большим числом объектов |
Одна строка не всегда решает выбор. Чаще разумно пойти поэтапно: PWA на первых пользователях, а нативное приложение, если упёрлись в предел и это подтверждено поведением людей, а не предположением.
Что выбрать по типу сервиса
Ниже условные типы сервисов и вывод для каждого. Это отправная точка для обсуждения, а не приговор: на обследовании список возможностей проверяется на вашей аудитории.
| Тип сервиса | Что выбрать | Почему | Что проверить |
|---|---|---|---|
| Личный кабинет клиента или партнёра | PWA или адаптивный веб | Данные, заказы, документы, уведомления; люди приходят по ссылке из письма или сообщения | Нужна ли установка на экран вообще |
| Каталог и заказ | PWA | Покупатель приходит из поиска и рассылки, магазин приложений для него лишний шаг | Какая доля заказов с телефона |
| Запись и бронирование | PWA | Короткий сценарий, напоминания, возврат по ссылке | Доходят ли уведомления до вашей аудитории |
| Контент и лента | PWA | Офлайн-чтение и быстрые страницы | Нужен ли фон для загрузки материалов |
| Полевая работа с формами | PWA с офлайн-записью | Данные вводятся без сети и синхронизируются позже | Конфликты правок и размер вложений |
| Курьеры и водители с треком | Нативное | Нужна непрерывная геолокация при выключенном экране | Допустим ли пропуск точек |
| Устройства по Bluetooth и NFC | Нативное | Доступ к оборудованию ограничен в браузере | Какие модели устройств и систем |
| Игры и тяжёлая графика | Нативное | Скорость и доступ к ресурсам устройства | Требования к скорости |
Сервис с подпиской для частных лиц тоже обычно начинается с веб-версии: способ оплаты и условия доступа проще настроить на своём сервере. Подробнее о подписке в статье «Подписка в B2C-сервисе».
Каналы и аудитория: откуда придут пользователи
Магазин приложений — это канал привлечения со своей поисковой выдачей, правилами проверки и комиссиями. Если ваши клиенты ищут услугу в магазине, отсутствие приложения означает потерю части спроса. Если клиент приходит из поиска, по ссылке из рассылки, из мессенджера или с вашего сайта, магазин для него лишний шаг, и каждый лишний шаг отсеивает людей.
Чтобы ответить на этот вопрос, а не угадывать, возьмите источники обращений за последние месяцы и разложите по каналам. Если в списке есть магазин, оцените, сколько там людей. Если списка нет, то запуск PWA и сбор данных о том, как люди приходят, дешевле, чем разработка приложения ради гипотезы.
PWA индексируется как обычный сайт: адреса страниц остаются теми же, поисковые системы их видят. Для каталога и контента это даёт органический трафик, которого у нативного приложения нет. Важное условие: содержимое страниц должно отдаваться сервером, а не собираться на устройстве только после загрузки скриптов.
Офлайн: что стоит делать, а что нет
Слово «офлайн» объединяет три разные задачи, и у каждой своя цена.
| Задача | Пример | Что нужно | Главный риск |
|---|---|---|---|
| Показать то, что уже открывали | Билет, инструкция, расписание | Кэш страниц и данных, понятная метка «данные на такое-то время» | Показ устаревших данных без пометки |
| Принять действие без сети | Заполнить форму на объекте | Локальное хранилище, очередь отправки, повтор без дублей | Потеря данных, если хранилище очищено до отправки |
| Работать полностью без сети | Редактировать общие данные нескольких людей | Правила слияния конфликтов, версии записей | Конфликт правок, который не может решить компьютер |
Первая задача стоит недорого и даёт заметную пользу, вторая добавляет работу над очередью и проверкой, третья часто означает отдельный продукт. Если нужно третье, разумно задать вопрос: действительно ли люди работают без сети, или у них просто плохая связь, которую можно пережить очередью.
Стоимость владения: что платите после запуска
Разница в цене разработки видна сразу, а разница в цене владения проявляется позже. Суммы мы не называем: они зависят от состава функций, но структура расходов у вариантов различается.
- PWA. Один код, обновления без магазина. Платите вниманием к кэшу: после выпуска новой версии часть людей может ещё какое-то время видеть старую, поэтому нужна понятная стратегия обновления и принудительная замена при критичных изменениях.
- Нативное приложение. Отдельная сборка на каждую систему или кросс-платформенный слой, публикация и проверка магазином, поддержка устаревающих версий систем, учётные записи разработчика в магазинах. Часть пользователей будет сидеть на старых версиях, и сервер должен их обслуживать.
- Серверная часть. Нужна в обоих случаях, и её лучше проектировать как общий программный интерфейс. Тогда клиентский слой можно заменить или дополнить, не трогая сервер. Как это делается, описано в статье «Проектирование API для интеграций».
Полную картину владения вместе с обслуживанием даёт подход из статьи о стоимости владения ИТ-системой.
Как проверить выбор до больших затрат
- Составьте список обязательных возможностей. Для каждой запишите, что случится, если её не будет. Строки, на которые ответ «сервис не работает», решают выбор.
- Проверьте на устройствах вашей аудитории. Не на новых флагманах разработчика, а на тех, что есть у ваших клиентов или сотрудников: уведомления, установка, офлайн и камера.
- Соберите прототип одного сценария. Не весь сервис, а путь пользователя от входа до результата. Дайте его десяти-пятнадцати людям из аудитории и посмотрите, где они останавливаются.
- Договоритесь о показателе перехода. Например: если треть пользователей просит возможность, которой PWA не даёт, начинаем нативное приложение. Показатель выбирается до запуска, иначе споры идут по ощущениям.
- Начните с общей серверной части. Права, логика и данные живут на сервере, клиент тонкий. Тогда переход к нативному приложению стоит клиентского слоя, а не переписывания системы.
Задание для подрядчика, предлагающего приложение, формулируйте по схеме из статьи «Как составить техническое задание на разработку».
Что делаем мы и с чего начать
Начинаем с обследования: 200 000 ₽ и 2–3 недели за один-два процесса, 350 000 ₽ и 3–4 недели, если сервис связан с несколькими системами. На выходе список возможностей с разбором, что из них закрывается PWA, и вилка бюджета. Стоимость вычитается из первого этапа, если продолжаете с нами, а документ пригодится и без нас. Остановиться можно после любой ступени, исходники лежат в вашем репозитории с первого коммита.
Мы делаем адаптивный веб-сервис и PWA, серверную часть и интеграции. Нативные приложения для iOS и Android не делаем, но серверную часть проектируем так, чтобы к ней можно было подключить приложение другого подрядчика. Круглосуточно не дежурим. Описание подхода к веб-сервису с геолокацией и обновлениями в реальном времени — на странице «Real-time сервис с геолокацией», а цены и сроки — на странице «Тарифы».
Частые вопросы
Что такое PWA простыми словами?
Это веб-приложение, которое браузер позволяет установить на экран телефона и которое частично работает без сети. Оно открывается по ссылке, обновляется на сервере и не требует публикации в магазине приложений.
PWA дешевле нативного приложения?
Разработка PWA обычно дешевле, потому что код один и не нужна публикация в магазинах. Но сравнивать нужно стоимость владения и список возможностей: если без фоновой геолокации сервис не работает, дешёвое решение не решает задачу.
Работает ли PWA на iPhone?
Да, но возможности зависят от версии системы и браузера, а установка и уведомления устроены иначе, чем на Android. Поэтому проверять выбор нужно на устройствах вашей аудитории, а не по общим описаниям.
Можно ли разместить PWA в магазине приложений?
Иногда его оборачивают в оболочку и публикуют, но это отдельная работа с правилами магазина, и она превращает PWA в нативное приложение по процессу. Мы такие приложения не делаем.
Нужен ли PWA интернет?
Не всегда. Ранее открытые страницы и справочники доступны без сети, действия можно складывать в очередь. Полностью офлайн-работа с общими данными нескольких людей сложна и оценивается отдельно.
Видят ли поисковые системы PWA?
Видят как обычный сайт, если содержимое страниц отдаёт сервер, а адреса страниц постоянные. Для каталога и контента это даёт трафик из поиска, которого у нативного приложения нет.
Что делать, если сначала нужен PWA, а потом приложение?
Проектировать серверную часть как общий программный интерфейс с правами на сервере. Тогда нативное приложение подключается как ещё один клиент, а логика не переписывается. Само приложение вам сделает другой подрядчик.
Входит ли PWA в ваши услуги?
Да, как часть веб-сервиса: адаптивный интерфейс, установка на экран, офлайн для выбранных сценариев. Нативные приложения для iOS и Android мы не делаем.