PWA (прогрессивное веб-приложение)
PWA — сайт, который ведёт себя как мобильное приложение: устанавливается на экран телефона, работает офлайн и шлёт push-уведомления. Не требует публикации в App Store и Google Play, обновляется как обычный сайт.
Определение PWA
PWA (Progressive Web App, прогрессивное веб-приложение) — технология, превращающая обычный сайт в подобие нативного мобильного приложения. Пользователь заходит на сайт через браузер, а тот предлагает «установить» его на главный экран. После этого иконка появляется рядом с обычными приложениями, открывается на весь экран без адресной строки, работает офлайн и может присылать push-уведомления. Концепцию ввёл Google в 2015 году, объединив наработки по service worker и web app manifest.
Главное преимущество — обход магазинов приложений. Не нужны разработка под iOS и Android по отдельности, модерация в App Store и Google Play, выкатка обновлений через сторы. PWA — это один сайт, который обновляется мгновенно для всех. По данным кейсов Google, переход на PWA у ряда e-commerce-проектов повышал конверсию мобильных на 20–50% за счёт скорости и удобства повторного захода.
Как работает PWA
Технически PWA держится на трёх китах: манифест (описывает иконку, название, цвета), service worker (фоновый скрипт для кэша и офлайна) и https (обязательное условие). Внедрение PWA — частая задача при разработке сайта с упором на мобильную аудиторию, а полноценное офлайн-приложение со сложной логикой и синхронизацией данных относят к комплексной разработке.
| Компонент | За что отвечает |
|---|---|
| Web App Manifest | Иконка, название, цвет темы, режим отображения на весь экран |
| Service Worker | Кэширование, работа офлайн, перехват сетевых запросов |
| HTTPS | Обязательное шифрование, без него PWA не устанавливается |
| Push API | Отправка уведомлений даже при закрытом приложении |
| Cache Storage | Локальное хранилище ресурсов для мгновенной загрузки |
Service worker кэширует ассеты при первом визите, поэтому при повторном заходе страница открывается почти мгновенно даже на слабом соединении. При полном отсутствии сети показывается заранее сохранённая офлайн-страница вместо ошибки браузера.
PWA против нативного приложения
PWA и нативное приложение решают похожие задачи, но устроены по-разному. Выбор зависит от бюджета и требований к функциям устройства.
| Параметр | PWA | Нативное приложение |
|---|---|---|
| Стоимость | Одна разработка на все платформы | Отдельно iOS и Android, дороже в 2–3 раза |
| Публикация | Не нужна, ставится с сайта | Модерация в App Store и Google Play |
| Обновления | Мгновенно, как у сайта | Через стор, ждать одобрения |
| Доступ к железу | Ограничен (камера, гео, push) | Полный (Bluetooth, NFC, датчики) |
| Push на iOS | С iOS 16.4 (2023), с ограничениями | Полная поддержка |
Главное ограничение исторически было на iOS: Apple долго не давал PWA push-уведомления и доступ к части API. С версии iOS 16.4 (март 2023) push заработали, но требуют добавления сайта на главный экран. На Android PWA поддерживается полноценно.
Метрики и пример
Эффект PWA измеряют по скорости повторной загрузки, доле установок и удержанию. Технический минимум проверяют через Lighthouse — встроенный аудит Chrome, который ставит баллы за соответствие критериям PWA.
Мини-кейс: сервис доставки еды с мобильной долей трафика 78% столкнулся с тем, что пользователи не хотели ставить отдельное приложение из стора ради разовых заказов. Внедрили PWA: добавили манифест, service worker с кэшем меню и баннер «установить на экран». За 3 месяца приложение установили около 12% мобильных посетителей, повторные заказы у этой группы выросли на 31%, а скорость повторной загрузки упала с 3,4 до 1,1 секунды за счёт кэша. Разработка PWA обошлась примерно в 4 раза дешевле, чем заказ нативных приложений под две платформы.
Связанные концепции
- Push-уведомления — одна из ключевых фишек PWA, возвращающая пользователей даже при закрытом приложении.
- Core Web Vitals — PWA напрямую улучшает метрики скорости за счёт кэширования через service worker.
- Адаптивный дизайн — PWA строится поверх адаптивного сайта; без корректной мобильной вёрстки приложение бессмысленно.
- SSL-сертификат — https обязателен для работы service worker и установки PWA, без него технология не запускается.
- Lighthouse — инструмент аудита от Google, который проверяет соответствие сайта критериям PWA и выставляет балл.
Частые ошибки
- Расчёт на полный доступ к железу — PWA не получит Bluetooth, NFC и часть датчиков; для них нужно нативное приложение.
- Агрессивный кэш без обновления — service worker отдаёт устаревшую версию, пользователь видит старые цены и не получает новый код.
- Навязчивый баннер установки — всплывающее «установить» при первом же заходе раздражает и отпугивает.
- Игнорирование iOS-ограничений — push на iPhone работают только после добавления на экран и с iOS 16.4, об этом забывают.
- Отсутствие офлайн-страницы — при потере сети пользователь видит ошибку браузера вместо заготовленного экрана.
Частые вопросы
Чем PWA отличается от обычного приложения из магазина?
Нативное приложение скачивается из App Store или Google Play, устанавливается как отдельная программа и имеет полный доступ к функциям телефона. PWA — это сайт, который ставится на главный экран прямо из браузера, без сторов и модерации, и обновляется мгновенно. Минус PWA — ограниченный доступ к железу: камера, гео и push есть, а Bluetooth, NFC и часть датчиков недоступны. Зато разработка в разы дешевле.
Нужно ли публиковать PWA в App Store и Google Play?
Нет, в этом и смысл технологии: пользователь устанавливает PWA напрямую с сайта через кнопку «добавить на экран», минуя магазины и их модерацию. При желании PWA можно завернуть в обёртку (TWA для Google Play) и опубликовать в сторе, чтобы получить дополнительный канал привлечения, но это не обязательно. Большинство проектов обходятся установкой с сайта.
Работают ли push-уведомления PWA на iPhone?
До 2023 года Apple не давал PWA отправлять push-уведомления. С выходом iOS 16.4 в марте 2023 года эта возможность появилась, но с условиями: пользователь должен сначала добавить сайт на главный экран, и только тогда подписка на push становится доступной. На Android push в PWA работают полноценно и без таких ограничений с самого начала.
Сколько стоит разработка PWA?
Добавление PWA-функций к существующему сайту (манифест, service worker, офлайн-страница) обходится в 50 000–150 000 ₽ в зависимости от сложности кэширования. Полноценное приложение со сложной офлайн-логикой и синхронизацией данных — от 300 000 ₽. Это в 2–4 раза дешевле, чем заказывать отдельные нативные приложения под iOS и Android, и поэтому PWA популярно у малого и среднего бизнеса.
PWA лучше для SEO, чем обычный сайт?
PWA остаётся обычным сайтом и индексируется так же, а ускорение загрузки через кэш положительно влияет на поведенческие факторы и метрики Core Web Vitals, которые учитывают поисковики. Прямого бонуса в ранжировании за статус PWA нет, но косвенно скорость и удобство помогают. Важно не сломать индексацию агрессивным service worker, который отдаёт роботу не тот контент, что реальному пользователю.
Можно ли сделать PWA из сайта на Tilda или WordPress?
Для WordPress есть плагины, добавляющие манифест и service worker почти без кода, так что превратить сайт в базовое PWA реально. Tilda как закрытый конструктор полноценного PWA не даёт: нет доступа к service worker, можно лишь частично через экспорт кода на тарифе Business и ручную доработку. Самый управляемый вариант PWA получается на сайте с собственной кодовой базой, где есть контроль над фоновыми скриптами.