PWA — веб-приложение на сайте: как превратить обычный ресурс в приложение и получить больше заявок

PWA (Progressive Web App) — это веб-приложение на сайте: обычная страница, которая устанавливается на смартфон как приложение, работает без интернета и умеет присылать push-уведомления. Для предпринимателя это способ получить заявку прямо из экрана телефона, минуя магазины приложений.

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

Что такое PWA и чем он отличается от обычного сайта и мобильного приложения

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

• Обычный сайт — открывается по ссылке, требует интернета, не отправляет уведомлений, установка невозможна.
• PWA — ставится на экран в один тап, кеширует страницы, работает без сети, умеет пушить.
• Нативное приложение (iOS/Android) — максимум возможностей, но нужна разработка под две платформы, публикация в сторах, аккаунт разработчика и месяцы согласований.

PWA — это компромисс: 70–80% пользы нативного приложения при 20–30% затрат. Для интернет-магазина, доски объявлений или личного кабинета клиента этого обычно достаточно.

Что PWA даёт бизнесу: 5 конкретных выгод

1. Установка без стора. Нет модерации Apple и Google, нет комиссии 15–30% с каждой покупки и нет ожидания ревью на несколько дней.
2. Push-уведомления. Возврат клиента в каталог без захода на сайт. Средний CTR пуша — 3–9% против 0,4–1% у email-рассылки.
3. Офлайн-режим. Открытые ранее страницы и каталог работают без сети — критично для полевых сотрудников, курьеров и торговых агентов.
4. Скорость на слабом интернете. Service Worker отдаёт закешированное содержимое мгновенно. В мобильном интернете в 3G/4G это сокращает время загрузки в разы.
5. Один код для всех платформ. Работает на Android, iOS и десктопе. Не нужно содержать два приложения.

SEO-плюсы PWA, о которых важно знать

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

• URL должен оставаться одним и тем же для пользователя и для робота. Принцип «пришёл из приложения — отдай 302 на отдельную версию» работает против вас.
• Владелец сервиса и поисковой робот должны видеть одинаковый контент. Если в PWA показывается то, чего нет в обычной версии, это расхождение.
• Service Worker не должен кешировать HTML-страницы надолго. Пользователь (и робот) получит устаревшую версию.
• Манифест (web manifest) должен содержать корректные name, icons, start_url и display: standalone.
• Пагинация и фильтры обязаны работать как обычные URL, а не как состояние внутри JS-приложения — иначе поисковик не увидит страницы каталога.

Сколько стоит PWA и из чего складывается бюджет

Работа над PWA делится на две части: техническую и продуктовую.

• Базовая PWA на готовом сайте — 80–150 тыс. ₽: manifest, service worker, офлайн-страница, иконки, кнопка установки.
• PWA с push-уведомлениями — 150–300 тыс. ₽: VAPID-ключи, сервер подписки, обработка, интеграция с CRM.
• Полноценный интернет-магазин в PWA — 300–700 тыс. ₽: каталог, корзина, офлайн-корзина, чеки, обновление при выходе в сеть.
• Поддержка — от 15 тыс. ₽/месяц: обновление манифеста, новые фичи браузеров, мониторинг push-подписок.

Сроки: базовая версия — 3–5 недель, push и офлайн-корзина — 6–10 недель. Если задача решается за две недели — это, скорее всего, не PWA, а «иконка на экране» без офлайна и пушей.

5 ошибок, которые убивают PWA

1. Писать текст поверх картинки — ради этого радикально ухудшается доступность и SEO.
2. Отдавать PWA вместо обычного сайта без редиректов. Старые ссылки, sitemap и соцсети начинают отдавать 404.
3. Кешировать всё подряд. Пользователь месяц видит устаревшую цену. Кешируйте статику (JS, CSS, шрифты) и критичные экраны — с коротким TTL.
4. Забыть про iOS. Safari не поддерживает установку по кнопке — нужен пункт «Поделиться → На экран „Домой“». Push работает только с iOS 16.4+.
5. Сделать PWA без аналитики. Без метрик вы не поймёте, устанавливают ли его вообще. Считайте события appinstalled, pushsubscription и открытие из источника display-mode: standalone.

Кому PWA подойдёт, а кому — нет

Подойдёт

• Интернет-магазину, которому нужен возврат клиентов без затрат на сторы.
• Сервису с офлайн-режимом: полевым сотрудникам, курьерам, торговым агентам.
• Личному кабинету клиента (B2B-портал, счета, документы, статус заказа).
• Сайту-каталогу или доске объявлений, где нужен быстрый офлайн-доступ к сохранённому.

Не подойдёт

• Сайту из одной-двух страниц — там хватит обычной адаптивной вёрстки.
• Проекту, которому нужны сложные нативные функции: push с богатыми медиа, работа в фоне, доступ к Bluetooth/NFC, 3D-игры.
• Если главная цель — попасть в Google Play или App Store: там нужны нативные приложения, PWA их не заменит.

С чего начать на практике

Шаг 1. Проверьте, есть ли у вас вообще повод: активная аудитория с мобильных, повторные визиты и заявки, а не разовые показы.

Шаг 2. Начните с малого: манифест, service worker, офлайн-страница, кнопка установки. Это 3–5 недель и даёт основную часть эффекта.

Шаг 3. Подключите push-уведомления — самый недооценённый инструмент возврата клиентов.

Шаг 4. Настройте аналитику: сколько установок, сколько активных подписок, растёт ли retention.

Шаг 5. Проверьте SEO после внедрения: sitemap, robots.txt, статусы страниц, поведение редиректов.

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

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