Про PWA любят говорить как про «будущее сайтов», и производственника легко напугать: мол, без приложения Вы отстали. На деле всё спокойнее. Разберём без хайпа, что такое PWA-приложения и что значит PWA простыми словами, как выглядит такое приложение, чем оно отличается от мобильного, покажем примеры PWA-приложений, расскажем, как сделать PWA, что оно реально даёт для конверсии и позиций и нужно ли это Вашему сайту.
Что такое PWA простыми словами
PWA (Progressive Web App) это обычный сайт, которому добавили возможности мобильного приложения. Технически это делают два элемента: манифест (описание, иконка, имя) и service worker, скрипт, который кэширует страницы. В итоге сайт можно «установить» на телефон с иконкой на рабочем столе, он открывается на весь экран без адресной строки, часть страниц работает без интернета, а компания может слать пуш-уведомления. Отдельное приложение из магазинов при этом не нужно.
Термин придумали в 2015 году разработчик Google Алекс Рассел и дизайнер Фрэнсис Берриман. Их идея была в том, чтобы сайт мог делать то же, что приложение, оставаясь обычной веб-страницей по одной ссылке.
«Эти приложения не упаковываются и не распространяются через магазины, это просто сайты, которые приняли все нужные витамины».
Как выглядит PWA-приложение и как его установить
Снаружи PWA-версия приложения выглядит как обычное приложение: иконка на экране телефона, запуск на весь экран, своя заставка. Разница видна только при установке, которая идёт через браузер, а не через магазин приложений. Короткая инструкция:
- Android, Chrome: откройте сайт, в меню браузера выберите «Установить приложение» или «Добавить на главный экран».
- iPhone, Safari: откройте сайт, нажмите «Поделиться» и выберите «На экран “Домой”».
- Компьютер, Chrome или Edge: в адресной строке появится значок установки, приложение откроется в отдельном окне.
В России интерес к PWA вырос, когда приложения ряда банков и сервисов пропали из магазинов: компании стали выпускать веб-версии, которые ставятся на экран прямо из браузера. Отсюда поисковые запросы вида «pwa + название банка». Если речь о банке, устанавливайте такую версию только со ссылки на официальном сайте банка.
PWA и мобильное приложение: в чём разница
| Параметр | PWA | Мобильное приложение |
|---|---|---|
| Установка | Из браузера, по ссылке | Из App Store, Google Play, RuStore |
| Разработка | Один сайт для всех платформ | Отдельно под iOS и Android |
| Обновления | Сразу у всех, как у сайта | Через магазин, пользователь должен обновить |
| Поиск | Страницы индексируются как сайт | Контент приложения в поиске почти не виден |
| Доступ к функциям телефона | Ограниченный, особенно на iPhone | Полный |
| Стоимость | Дешевле: доработка существующего сайта | Дороже: две отдельные разработки и поддержка |
Примеры PWA-приложений
Самые известные примеры PWA-приложений описаны в кейсах Google на web.dev (2017):
- Twitter Lite: после запуска PWA число страниц за сессию выросло на 65%, отправленных твитов на 75%, а доля отказов снизилась на 20%.
- Pinterest: время, проведённое в мобильной веб-версии, выросло на 40%, а основные действия пользователей на 60%.
- Starbucks: сделал PWA для заказа кофе, которое работает даже при плохой связи и весит в сотни раз меньше приложения для iOS.
Общее у этих примеров: частые повторные заходы и мобильная аудитория. Именно это и определяет, нужно ли PWA Вашему сайту.
Как PWA влияет на конверсию
Здесь эффект самый ощутимый, и весь он про скорость и удобство. Service worker кэширует ресурсы, поэтому повторные заходы грузятся почти мгновенно. А скорость напрямую связана с потерей посетителей: каждая лишняя секунда загрузки, часть людей уходит, не дождавшись.
- Быстрый повторный вход: кэш отдаёт страницы моментально
- Работа при плохой связи: каталог открывается даже в цеху с плохим сигналом
- Иконка на экране: возврат в один тап, без набора адреса
- Пуши: напоминания о заявке, статусе заказа, акции
- Ощущение приложения: плавность повышает доверие к компании
Для сайта с большим каталогом и повторными визитами закупщиков это реально снижает отказы. Как ещё влиять на долю заявок в материале про конверсию посадочной.
«0,1 секунды это предел, при котором пользователь чувствует, что система реагирует мгновенно».
По данным Google (2016), 53% посетителей мобильных сайтов уходят, если страница грузится дольше трёх секунд. Поэтому главный выигрыш PWA для конверсии это скорость повторных заходов.
А что с SEO
Прямого бонуса «сайт на PWA, выше в поиске» нет. Поиск не ранжирует по факту наличия PWA. Но влияние есть косвенное, через факторы, которые поиск действительно учитывает:
| Фактор PWA | Эффект для SEO |
|---|---|
| Высокая скорость загрузки | Улучшает Core Web Vitals, снижает отказы |
| Мобильное удобство | Плюс при mobile-first индексации |
| Меньше отказов, больше времени на сайте | Поведенческие сигналы работают в плюс |
То есть PWA не заменяет SEO, а помогает по скорости и мобильности. Те же результаты часто достижимы обычной оптимизацией без превращения сайта в приложение. Про мобильную сторону в статье SEO для мобильных, про поведенческие поведенческие факторы.
Нужен ли PWA производству
Честный ответ: не в первую очередь. PWA оправдан, когда у сайта уже закрыта база: быстрая загрузка, нормальная мобильная версия, чистая техника, и есть сценарий повторных заходов: личный кабинет дилера, большой каталог, отслеживание заказов. Если базовая скорость хромает, начинать надо не с PWA, а с оптимизации. Иначе Вы вложитесь в модную обёртку поверх медленного сайта.
Разработка PWA-приложения: как сделать
Сделать PWA-приложение из существующего сайта технически несложно, если сайт уже быстрый и адаптивный. Минимальный набор:
- HTTPS на всём сайте: без него PWA не работает.
- Манифест: файл с названием, иконками разных размеров, цветом и режимом запуска.
- Service worker: скрипт, который кэширует страницы и отвечает за работу без сети и пуш-уведомления.
- Адаптивная вёрстка: PWA на сайте без мобильной версии бессмысленно, подробнее в статье Адаптивная вёрстка сайта: на что смотреть заказчику.
- Проверка в Lighthouse (инструменты разработчика Chrome): он показывает, какие требования выполнены.
Сложность разработки PWA-приложений зависит от движка сайта: на современных CMS есть готовые модули, на конструкторах возможности ограничены. Что выбирать, если сайт делается заново, в статье CMS или конструктор сайтов: что выбрать бизнесу. И помните про вес: тяжёлые анимации замедляют и PWA, об этом статья Моушн-дизайн: что это и зачем сайту производства.
С чего начать вместо PWA
Прежде чем думать про приложение, проверьте фундамент: скорость по PageSpeed, адаптив на телефоне, отсутствие технических ошибок. Часто именно тут теряются заявки, и починка даёт больший эффект, чем PWA. Разобраться, что тормозит сайт и мешает продвижению, помогает технический аудит сайта. А если сайт делается заново, заложить скорость и мобильность правильнее на старте, при разработке сайта, чем достраивать потом.
Кому из производителей это нужно, а кому нет
Честный ответ: большинству заводов не нужно. PWA оправдан там, где человек возвращается на сайт регулярно и это часть его работы.
Наш собственный пример: на главную страницу нашего сайта за 90 дней пришло 1 086 визитов из России, и 70% из них с компьютера. B2B-закупщик выбирает поставщика за рабочим столом, а не с телефона, и устанавливать сайт агентства или завода на экран не станет. Поэтому мы вкладываемся в скорость и мобильную вёрстку, но не в PWA.
- Есть смысл: личный кабинет дилера, где партнёр каждый день смотрит остатки, цены и статусы отгрузок; сервис заказа повторяющихся позиций; портал для монтажников с документацией на объекте, где связь плохая.
- Нет смысла: обычный сайт-каталог, куда закупщик заходит два раза в год на этапе выбора поставщика. Он не будет ставить его на телефон, каким бы удобным тот ни был.
Что даёт эффект вместо PWA
Если задача звучит как «сайт медленный и неудобный с телефона», PWA её не решает это надстройка над сайтом, а не замена работе над ним. Дешевле и быстрее дают результат другие вещи: сжатие изображений и отложенная загрузка, нормальный адаптив каталога с фильтрами, которыми можно пользоваться пальцем, короткая форма заявки и кнопка звонка, доступная без прокрутки.
Проверить порядок работ просто: замерьте скорость мобильной версии и посмотрите записи визитов с телефонов. Обычно после этого вопрос про PWA снимается сам, а на его месте появляется список конкретных правок.
Не уверены, нужен ли Вам PWA или сначала стоит ускорить сайт? Разберём скорость, мобильную версию и технику Вашего сайта в рамках технического аудита сайта, первый разбор бесплатно.
