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

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

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

Важно: PWA — не отдельный способ разработки, а свойство веб-приложения. Существующий сайт не превращается в PWA галочкой, но и переписывать его с нуля обычно не нужно. Выбор между PWA, обёрткой, кроссплатформой и нативкой разобран в отдельном материале про то, как превратить сайт в приложение — здесь мы идём вглубь одного варианта.

Отдельная глава, потому что именно здесь разбиваются ожидания.

Push-уведомления есть. С версии 16.4 веб-приложение может присылать уведомления — но только если пользователь добавил его на домашний экран. Открытая вкладка браузера уведомления не получает, даже если разрешение выдано.

Установка только вручную. Автоматического предложения «установить приложение», как на Android, нет: пользователь должен нажать «Поделиться» и выбрать «На экран „Домой“». Это заметно снижает долю установок, поэтому подсказку рисуют внутри интерфейса.

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

Фоновой синхронизации нет. Отложить отправку данных и дождаться сети «в фоне» не получится — синхронизация произойдёт, когда пользователь снова откроет приложение.

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

Часть, которая для многих компаний оказывается важнее технических возможностей.

Установка по ссылке. Пользователь заходит на сайт и добавляет приложение на экран. Нет модерации, нет ожидания ревью, нет требований магазина к содержанию.

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

Нет комиссии магазина на продажу цифровых товаров, потому что оплата идёт обычными веб-платежами.

На Android можно и в магазин. Существует механизм публикации PWA как самостоятельного приложения через доверенную связь с вашим доменом: в каталоге это выглядит как обычное приложение, внутри — тот же веб-продукт.

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

«Работает офлайн» — обещание, за которым стоит конкретная инженерная работа, и её объём зависит от сценария.

Кэш оболочки. Интерфейс и статика сохраняются при первом визите — приложение открывается мгновенно и без сети показывает каркас. Самый дешёвый уровень.

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

Офлайн-ввод с синхронизацией. Самый дорогой уровень: действия сохраняются на устройстве и отправляются при появлении сети, с разрешением конфликтов. Нужен складу, полевым сотрудникам, приёмке.

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

Есть сценарии, где такой формат объективно удобнее приложения.

Разовые и редкие визиты. Записаться к врачу, оформить заявку, посмотреть статус, оплатить услугу. Никто не будет ставить приложение ради одного действия — а витрина онлайн-записи по ссылке открывается сразу.

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

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

Внутренние инструменты. Об этом — отдельно ниже.

Продукты, где важна ссылка. Всё, что распространяется через рассылки, QR-коды, чаты и рекламу: переход открывает сразу нужный экран, а не карточку в магазине.

Самая недооценённая зона: там, где ограничения iOS не мешают, а отсутствие магазинов помогает.

Замена десктопной программе. Инструмент для сотрудников, который открывается в браузере на любой машине и не требует установки и обновления на каждом рабочем месте. Для нас это стандартный ответ на запрос «нужна программа под Windows»: веб-продукт с офлайн-режимом решает ту же задачу дешевле и обновляется централизованно.

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

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

Подрядчики и партнёры. Внешним людям неудобно ставить корпоративное приложение и невозможно раздать его через внутренние каналы. Ссылка решает вопрос за минуту.

Честный список, чтобы не пришлось переделывать через полгода.

Фоновая работа. Отслеживание маршрута курьера, постоянный сбор геолокации, работа с уведомлениями при закрытом приложении на iOS.

Оборудование. Bluetooth-принтеры и весы, NFC-метки, промышленные терминалы сбора данных, специфические датчики.

Тяжёлая графика и вычисления. Игры, 3D-визуализация, обработка видео на устройстве.

Продажа цифрового контента. Подписки и внутренние покупки, которые по правилам магазинов должны проходить через их платёжные механизмы.

Приложение как канал удержания. Если стратегия строится на иконке на экране, регулярных пушах и позиции в поиске магазина, PWA даст заметно меньший эффект, особенно на iPhone.

Приложение нужно найти в магазине и установить; PWA достаточно открыть — и это меняет воронку.

Веб-версия индексируется поисковиками, на неё ведёт контекст и ссылки из соцсетей, ей можно поделиться в мессенджере одним касанием. Магазинное приложение живёт своей жизнью: продвигается через карточку и рекламу, а из поиска на него попасть нельзя.

Техническая сторона тоже про скорость: сервис-воркер отдаёт закэшированный интерфейс мгновенно, поэтому повторное открытие ощущается как приложение. Но первое открытие — обычная загрузка сайта, и на неё смотрят и пользователи, и поисковые системы, так что оптимизация первой загрузки остаётся обязательной работой.

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

Порядок работ отличается от обычного веб-проекта в трёх местах, и все три часто забывают заложить в план.

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

Оболочка и кэш-стратегии. Манифест, иконки, стартовый экран, правила кэширования по типам данных: что берём из кэша сразу, что обновляем в фоне, что всегда запрашиваем с сервера.

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

Установка и подсказки. Экран или баннер, объясняющий, как добавить приложение на домашний экран, с разными инструкциями для Android и iOS.

Тестирование на устройствах. Реальные телефоны, разные версии систем, режим авиа, слабая сеть. Эмулятор поведение сервис-воркера и вытеснение кэша не воспроизводит.

Первая версия такого продукта обычно занимает от нескольких недель, если веб-часть уже есть, и от полутора-двух месяцев, если продукт делается с нуля.

Стоимость определяется не «форматом», а составом сценариев: офлайн-ввод с синхронизацией дороже, чем кэш каталога, а интеграции — дороже интерфейсов.

По нашим работам: PWA — от 1 млн ₽, в том числе как замена десктопной программе; веб-продукт с кабинетом — от 1 млн ₽; мобильное приложение на кроссплатформе — от 1,8 млн ₽; отдельная интеграция с учётной системой или оборудованием — от 150 тыс. до 1,5 млн ₽. Точная цифра зависит от сценариев и устройств: оценка проекта бесплатная.

Прикинуть бюджет можно заранее — бесплатный калькулятор оценки собирает вилку по составу работ за несколько минут.

Обещают «как приложение» на iPhone. Ожидания рисуются по Android, а половина аудитории видит другую картину — с ручной установкой и без фоновой работы.

Не объясняют установку. Пользователь не знает, что сервис можно поставить на экран: без подсказки в интерфейсе доля установок остаётся близкой к нулю.

Считают офлайн бесплатным. Кэш оболочки делается за дни, полноценная офлайн-работа с синхронизацией — за недели, и это отдельная строка сметы.

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

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

Первое — выписать сценарии и отметить, какие из них должны работать без сети и в фоне. Если фоновых нет, PWA почти наверняка подойдёт.

Второе — посмотреть на распределение аудитории по платформам. Если больше половины пользователей на iPhone и вам критичны уведомления, ожидания нужно корректировать сразу.

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