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

PWA (Progressive Web App) — это обычный сайт, который можно установить на экран телефона или компьютера и открывать как приложение: со своей иконкой, без адресной строки браузера и с работой без интернета. Не нужно публиковать его в App Store и Google Play, писать отдельные версии под iOS и Android и платить комиссию магазинам. Если сайт уже есть, превратить его в PWA обычно можно за несколько дней, а не за месяцы, которые уходят на мобильное приложение.

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

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

Посетитель открывает сайт в браузере, и тот предлагает «Установить приложение» (на Android и в Chrome на компьютере) или пользователь сам добавляет сайт через «Поделиться → На экран «Домой»» (на iPhone). После этого у сайта появляется иконка рядом с обычными приложениями. Нажимаете — открывается окно без панели браузера, на весь экран, как у нативного приложения.

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

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

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

Что PWA даёт бизнесу

Иконка на экране телефона

Самое понятное преимущество. Клиент, который хоть раз установил ваш сайт, видит иконку каждый день среди своих приложений. Чтобы вернуться, ему не нужно искать вас в поиске или в закладках — один тап. Для бизнеса с повторными покупками (доставка еды, салоны, записи, мероприятия, интернет-магазины расходников) это прямой канал возврата клиентов без рекламы.

Работа без интернета и на плохой связи

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

Без App Store, Google Play и их комиссий

Мобильное приложение нужно опубликовать в магазинах, пройти модерацию каждого обновления и отдавать до 30% с платежей внутри приложения. Для российских компаний добавляется риск, что приложение просто удалят из магазина. PWA живёт на вашем домене: ни модерации, ни комиссии, ни зависимости от чужих правил.

Один продукт вместо трёх

Классический набор — сайт, приложение под iOS и приложение под Android — это три кодовые базы, три команды или подрядчика и три бюджета на поддержку. PWA — это ваш сайт, просто доработанный. Для малого и среднего бизнеса разница в стоимости измеряется не процентами, а порядками.

SEO никуда не девается

В отличие от приложения, PWA — это обычные страницы с адресами. Их индексируют Яндекс и Google, на них ведут ссылки из соцсетей и рекламы. Быстрая загрузка при повторных визитах положительно сказывается на поведенческих факторах, которые особенно важны для Яндекса.

PWA или мобильное приложение: сравнение

	PWA	Нативное приложение
Где живёт	На вашем сайте	В App Store и Google Play
Установка	Из браузера, за секунды	Через магазин, нужно место на телефоне
Обновления	Сразу у всех, без модерации	Через модерацию, пользователь должен обновить
Стоимость	Доработка существующего сайта	Отдельная разработка под iOS и Android
Комиссия магазинов	Нет	До 30% с платежей в приложении
Поиск Яндекса и Google	Индексируется как сайт	Не индексируется
Офлайн-режим	Да, для сохранённых страниц	Да, полностью
Push-уведомления	Android — да; iPhone — только после установки на экран	Да
Доступ к функциям телефона	Камера, геолокация, но не всё	Полный

Честно об ограничениях

Про PWA обычно рассказывают только плюсы. Вот что стоит знать до заказа:

• iPhone поддерживает PWA хуже Android. Safari не показывает кнопку «Установить» сам — пользователю нужно нажать «Поделиться → На экран «Домой»». Поэтому на iPhone установок меньше, и имеет смысл показывать короткую подсказку, как это сделать.
• Push-уведомления на iPhone работают только у установленных PWA. Эта возможность появилась в iOS 16.4 (2023 год), но только для сайтов, добавленных на экран «Домой». В обычной вкладке Safari уведомлений нет, и подписки на iOS бывают менее стабильными, чем на Android.
• Доступ к «железу» ограничен. Камера, геолокация, вибрация, оплата — да. Bluetooth-устройства, NFC на iPhone, фоновая работа, глубокая интеграция с контактами и сообщениями — нет или частично.
• В магазинах приложений вас не найдут. Если ваша аудитория ищет сервисы именно в App Store, PWA этот канал не закроет.
• Офлайн работает для того, что уже открывали. Оформить заказ без сети PWA не позволит — заявку всё равно нужно отправить на сервер.

Когда PWA нужна, а когда нет

PWA стоит делать, если:

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

PWA можно не делать, если:

• у вас лендинг под разовую покупку, куда человек заходит один раз;
• продукту критичны функции, недоступные в браузере (Bluetooth, фоновая работа, сложная камера);
• ваши клиенты ищут вас в App Store, и приложение уже окупается.

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

Примеры из моих проектов

Шоу-трибьют «Майкл Джексон: Легенда»

Для сайта шоу PWA была осознанным решением: зрители приходят с телефонов из соцсетей и рекламы, часто — прямо перед концертом или в фойе зала, где мобильная связь перегружена. Я настроил манифест с названием «MJ Легенда», иконками и полноэкранным режимом и написал service worker, который заранее сохраняет оболочку сайта: главную, стили, скрипты, шрифты и главное изображение. Страницы при этом всегда сначала запрашиваются из сети, поэтому новые даты и цены появляются у зрителей сразу, а без сети открывается сохранённая версия.

Сайт собран по технологии JAMstack — это статические страницы без тяжёлой CMS, и PWA на такой основе работает особенно быстро: устройству нечего ждать от сервера.

Этот сайт — programmer-web.ru

Свой сайт я тоже сделал PWA. Его можно установить на телефон или компьютер, а при долгом нажатии на иконку есть быстрые переходы в «Портфолио», «Услуги» и «Контакты». Service worker работает по такой схеме:

• страницы — сначала из сети, чтобы после каждой выкладки посетитель видел свежую версию, а без интернета — из кэша;
• скрипты и стили — из кэша: в их названиях есть хеш, и при изменении меняется имя файла, так что устаревшая версия не попадёт к пользователю;
• картинки и шрифты — из кэша с обновлением в фоне;
• формы, Яндекс Метрика и внешние сервисы service worker не трогает, чтобы не ломать отправку заявок и статистику;
• если страницы нет ни в сети, ни на устройстве, показывается аккуратная страница «Нет подключения к интернету» вместо ошибки браузера.

Всё это сделано без сторонних библиотек, примерно сотней строк кода.

Как добавить PWA к готовому сайту

1. Проверить основу. Нужны HTTPS и нормальная мобильная версия. Если сайт неудобен на телефоне, сначала стоит исправить это — иконка на экране не спасёт плохой интерфейс.
2. Подготовить манифест и иконки. Название, короткое название для экрана, цвета, иконки 192 и 512 пикселей и отдельная «маскируемая» иконка, которую Android обрезает под форму системы.
3. Написать service worker под ваш сайт: что кэшировать, что всегда брать из сети, что не трогать вовсе (корзина, оплата, личный кабинет, формы).
4. Сделать офлайн-страницу — понятное сообщение вместо ошибки браузера.
5. Проверить в Chrome DevTools (раздел Application и Lighthouse), на реальных Android и iPhone, в том числе в режиме полёта.
6. По желанию — подсказка об установке и push-уведомления. Подсказка особенно полезна для iPhone, где браузер сам ничего не предлагает.

PWA можно добавить к сайту на любой платформе: WordPress, 1С-Битрикс, MODX, OpenCart или статическому сайту. Это входит в доработку сайта и обычно не требует переделывать дизайн.

Частые вопросы

Сколько стоит сделать PWA из сайта?

Для готового сайта это небольшая доработка: манифест, иконки, service worker и тестирование на устройствах. Точная стоимость зависит от того, что нужно кэшировать и нужны ли push-уведомления. Для интернет-магазина с корзиной и личным кабинетом работы больше, чем для сайта-визитки.

Повлияет ли PWA на SEO?

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

Нужно ли публиковать PWA в Google Play или App Store?

Нет, PWA устанавливается прямо с сайта. При желании её можно опубликовать в Google Play через специальную обёртку, но для большинства бизнесов это не нужно.

Будет ли PWA работать на iPhone?

Да, но установка ручная — через «Поделиться → На экран «Домой»», а push-уведомления доступны только после установки. Офлайн-режим и быстрые повторные заходы работают так же, как на Android.

Не увидят ли пользователи старую версию сайта из кэша?

Нет, если service worker настроен правильно: страницы сначала запрашиваются из сети, а кэш используется только когда сети нет. Именно так сделано в обоих примерах выше.

Можно ли сделать PWA на WordPress или Битриксе?

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

---

Хотите, чтобы ваш сайт открывался с экрана телефона как приложение и не терял клиентов на плохой связи? Напишите мне — посмотрю сайт и скажу, есть ли смысл в PWA именно в вашем случае и сколько займёт работа.