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

Что такое PWA простыми словами

PWA — это приложение на технологиях веба, которое ведёт себя как приложение платформы. Человек заходит на сайт, нажимает «Установить», и на экране появляется значок. Открывается такой сайт в отдельном окне без адресной строки браузера, поэтому внешне отличить его от обычного приложения сложно.

Название расшифровывается как Progressive Web App. Слово «прогрессивное» здесь значит, что новые функции подключаются там, где браузер их поддерживает. На новом телефоне будут работать уведомления, а на старом человек увидит обычный рабочий сайт.

Google описывает три свойства PWA: расширенные возможности (уведомления, геолокация), надёжность при плохой сети и установка на устройство. На практике для бизнеса важны такие вещи:

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

Как работает PWA: установка, офлайн и пуш

PWA работает на трёх частях: манифесте, защищённом соединении и service worker. Манифест — это небольшой файл с названием, значками и настройками запуска, он обязателен для установки. Сайт должен открываться по HTTPS. Service worker для самой установки не требуется, но без него не будет работы без сети и пуш-уведомлений.

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

Для браузеров на движке Chromium манифест должен содержать название, значки 192 и 512 пикселей, стартовый адрес и режим отображения. Проверить эти поля разработчик может быстро, если сайт уже работает по HTTPS.

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

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

Что поддерживают iOS и Android

Android поддерживает PWA шире, чем iOS, но разница сократилась с 2023 года, когда iPhone получил пуш-уведомления для установленных веб-приложений. На Android установка как полноценного приложения (WebAPK) работает только в Chrome на устройствах с сервисами Google и в Samsung Internet. Остальные браузеры создают ярлык, который открывает сайт в браузере.

Пуш на iPhone работает при трёх условиях: сайт добавлен на экран как веб-приложение, в манифесте указан режим standalone или fullscreen, а разрешение запрошено в ответ на нажатие человека. Если он сохранил просто закладку, уведомлений не будет.

Web Bluetooth на iPhone не поддерживается, Firefox его тоже не поддерживает. Web NFC MDN отмечает как экспериментальную технологию с ограниченной доступностью, он не входит в базовый набор, поддерживаемый всеми основными браузерами.

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

Чем PWA отличается от сайта, приложения и мини-приложения

PWA отличается от обычного сайта установкой, офлайном и пуш-уведомлениями, а от нативного приложения тем, что живёт на вебе и не требует магазина. Мини-приложение отличается тем, что работает внутри мессенджера. Цифры в таблице — ориентиры по рынку для простого проекта, подробная разбивка цен есть в статье сколько стоит мобильное приложение.

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

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

Мини-приложение удобнее там, где вся база клиентов уже в мессенджере, подробнее о формате в статье про мини-приложения в Телеграм. PWA зато не зависит от правил и доступности одной площадки.

Кому подходит PWA, а кому нужно нативное приложение

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

Перед решением ответьте на три вопроса:

1. Откроет ли клиент сервис больше одного раза в месяц?
2. Нужно ли ему что-то, кроме экрана и уведомлений?
3. Хватит ли базы клиентов, чтобы предложить им поставить значок?

Если на первый вопрос ответ «нет», остановитесь на сайте. Если на второй ответ «да», смотрите в сторону нативного приложения.

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

Сколько стоит PWA и из чего складывается цена

PWA стоит примерно на 20–50% дороже обычного сайта, это наш ориентир по рынку на 2026 год, официальных цен нет. Цена складывается по той же формуле, что и у любой разработки: часы работы умножаются на ставку команды, у студий это обычно 2 000–4 000 ₽ в час. Так, для сайта за 300 000 ₽ доработка до PWA обойдётся примерно в 60 000–150 000 ₽.

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

Сравним расходы за три года на условном примере. Допустим, сеть кофеен с готовым сайтом хочет предзаказ, бонусы и уведомления, а маржа с одного заказа составляет условные 200 ₽. Поддержку считаем как 20% от разработки в год.

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

Как запустить PWA: пошагово

Запуск PWA начинается с проверки сайта, а срок зависит от объёма: по нашему опыту простая установка занимает несколько дней, версия с офлайном и пушем несколько недель. Последовательность такая:

1. Опишите сценарий. Зачем клиент откроет значок: повторный заказ, запись, статус. Если сценария нет, значок никому не нужен.
2. Проверьте сайт. Убедитесь, что есть HTTPS, удобная мобильная версия и быстрая загрузка.
3. Сделайте манифест и значки. Название, короткое название, цвета, значки 192 и 512 пикселей, режим standalone.
4. Подключите service worker. Решите, какие страницы и данные хранить и что показывать без сети.
5. Настройте пуш. Разрешение просите только после действия клиента, например после заказа, и договоритесь, какие сообщения будете отправлять.
6. Покажите инструкцию установки. На Android поможет своя кнопка, на iPhone нужна короткая подсказка с картинкой про меню «Поделиться».
7. Проверьте на устройствах. Минимальный набор: Chrome на Android, Safari на iPhone, Яндекс Браузер, Chrome на компьютере.
8. Настройте аналитику. Считайте установки, повторные визиты, заказы из установленной версии.
9. Запустите на части клиентов. Покажите предложение постоянным покупателям, посмотрите, ставят ли они значок.

Поскольку обновления приходят сами, тестировать каждое изменение стоит до выкладки. Если сломать кэш, часть клиентов может зависнуть на старой версии, поэтому в service worker заранее нужен понятный механизм обновления.

Как понять, что PWA приносит пользу бизнесу

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

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

Можно ли опубликовать PWA в магазине приложений

Опубликовать PWA в магазине приложений можно, но для этого его упаковывают в оболочку, само оно в каталоги не попадает. Google описывает Trusted Web Activity, способ открыть веб-приложение внутри Android-приложения, а web.dev перечисляет также Microsoft Store, Samsung Galaxy Store и другие каталоги. Для сборки применяют инструменты Bubblewrap и PWA Builder.

С App Store история строже. Правило 4.2 Apple требует, чтобы приложение давало больше, чем упакованный сайт. Оболочка без полезных функций рискует не пройти проверку, поэтому на это нельзя рассчитывать как на дешёвый способ попасть в магазин.

Какие проблемы бывают с PWA: что видите и что делать

Чаще всего проблемы с PWA связаны с установкой на iPhone и с обновлением кэша. Таблица помогает быстро найти причину.

Мифы и ошибки про PWA

«PWA полностью заменит мобильное приложение». Заменит там, где хватает экрана и уведомлений. Bluetooth на iPhone и глубокая работа с системой остаются за нативным приложением.

«На iPhone PWA не работают». Это устаревшее представление. С iOS 16.4 доступны пуш-уведомления и значок со счётчиком, но установку человек делает сам, и окно установки с сайта вызвать нельзя.

«Service worker обязателен для установки». MDN прямо указывает, что для установки он не требуется, но он нужен для офлайна и пуша.

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

«Пуш можно слать сколько угодно». MDN советует использовать его для срочных событий. Человек быстро отключит уведомления, если получает рекламу каждый день.

«PWA ускорит плохой сайт». Кэш помогает повторным визитам, а тяжёлые картинки и лишние скрипты всё равно придётся чинить.

Если хотите понять, стоит ли вашему бизнесу вкладываться в приложение или достаточно улучшить сайт, оставьте заявку. Мы посмотрим текущий проект и посчитаем варианты.