Что такое PWA и чем оно отличается от обычного сайта
PWA (Progressive Web App, прогрессивное веб-приложение) — веб-приложение с возможностями «как у приложения», которое работает на одной кодовой базе с сайтом. Так его описывает руководство Google web.dev. После установки PWA открывается в отдельном окне без адресной строки браузера, получает свою иконку на экране «Домой» и может присылать уведомления.
Для владельца бизнеса главное отличие от нативного приложения в том, что не нужно писать и поддерживать две отдельные программы под Android и iOS. Вы правите сайт — меняется и приложение. Клиенту не нужно искать вас в магазине приложений: кнопка «Установить» появляется прямо на сайте.
Что входит в превращение сайта в PWA
- Манифест приложения: название, иконки разных размеров, цвет темы, режим отображения standalone (отдельное окно).
- Сервис-воркер — скрипт, который хранит нужные файлы на телефоне: каталог, контакты и последние заказы открываются даже при слабом интернете.
- Push-уведомления: о статусе заказа, записи, акции — с запросом разрешения только по нажатию пользователя.
- Кнопка и подсказка установки для Android и отдельная инструкция для iPhone.
- Проверка скорости и мобильной вёрстки: медленный сайт остаётся медленным и в виде приложения.
- Цели в Яндекс Метрике: установки, открытия с иконки, переходы из уведомлений.
Как идёт работа над PWA по неделям
| Неделя | Что делаем | Что получаете |
|---|---|---|
| 1-я | Разбираем сайт и сценарии: что клиент делает с телефона, какие экраны нужны без сети, какие уведомления полезны | Техническое задание и список экранов |
| 2-я | Манифест, иконки, режим отдельного окна, сервис-воркер для кэширования | Сайт устанавливается на экран телефона |
| 3-я | Push-уведомления, серверная часть отправки, подписка и отписка | Уведомления на Android и iOS |
| 4-я | Тестирование на реальных устройствах, доработка мобильной вёрстки, цели в Метрике | Готовое PWA и инструкция для сотрудников |
PWA на iPhone: что работает с iOS 16.4
Раньше главным ограничением PWA был iPhone. По данным разработчиков движка WebKit, с iOS и iPadOS 16.4 веб-приложения, добавленные на экран «Домой», получают Web Push и бейджи на иконке. Условия: в манифесте указан режим standalone или fullscreen, а разрешение на уведомления запрашивается только после нажатия пользователя. Поэтому на iPhone мы показываем короткую подсказку, как добавить сайт на экран.
От чего зависит цена PWA-приложения
Разработка PWA стоит от 150 000 ₽ разово. Итог зависит от состояния сайта и движка, от числа экранов, которые должны работать без сети, от сложности уведомлений (одна рассылка об акциях или персональные статусы заказов из CRM, системы учёта клиентов) и от того, нужен ли личный кабинет. Если на сайте нет мобильной версии, сначала нужна адаптивная вёрстка.
Кому PWA не подойдёт
PWA не заменит приложение, если вам нужны глубокие функции телефона, работа в фоне или обязательное присутствие в RuStore и других магазинах — тогда смотрите мобильное приложение. Сайту-визитке, куда клиент заходит один раз, установка на экран тоже ничего не даст. PWA окупается там, где клиент возвращается часто: доставка еды, запись в салон, заказы постоянных покупателей, личный кабинет.