Что такое PWA и зачем оно магазину
Коротко
PWA (прогрессивное веб-приложение) — это ваш обычный сайт, который браузер умеет «поставить» на экран телефона или компьютера как приложение. Приложение PWA для Webasyst создаёт для каждой витрины всё необходимое: описание приложения (Manifest), иконки, служебный файл браузера (Service Worker), настройки кеширования и офлайн-страницу.
Отдельного мобильного приложения писать не нужно: покупатель получает иконку на главном экране, а магазин остаётся тем же сайтом.
Что получает покупатель
| Возможность | Что видит покупатель | Редакция |
|---|---|---|
| Установка | Иконка магазина на главном экране; магазин открывается в отдельном окне без адресной строки | «База» |
| Приглашение установить | Баннер, кнопка или окно на сайте с подсказкой для его телефона или компьютера | «База» |
| Кеширование | Повторно открытые страницы, картинки и стили загружаются из памяти браузера, когда это безопасно | «База» |
| Офлайн-страница | Если сети нет, показывается ваша страница с понятным текстом вместо ошибки браузера | «База» |
| Push-уведомления | Короткие сообщения магазина, если покупатель сам разрешил их | «Премиум» |
Чем PWA отличается от привычных вариантов
| Вкладка браузера | PWA | Мобильное приложение из магазина приложений | |
|---|---|---|---|
| Нужно ли скачивать из App Store / Google Play | Нет | Нет, ставится с вашего сайта | Да |
| Иконка на главном экране | Нет (только закладка) | Да, если покупатель установил | Да |
| Окно без адресной строки | Нет | Да (режим «standalone» по умолчанию) | Да |
| Обновляется вместе с сайтом | Да | Да | Нет, нужны обновления в магазине приложений |
| Доступ к функциям телефона | Ограничен браузером | Ограничен браузером | Широкий |
| Стоимость разработки | Нет | Низкая: настройка приложения | Высокая |
Честные ограничения
Прочитайте этот список до запуска, чтобы не давать покупателям лишних обещаний.
- Установка зависит от браузера и устройства. Браузер сам решает, предложить ли установку. Приложение лишь выполняет все условия. Диагностика (глава 7) показывает «оценку критериев», а не гарантию.
- Нужен HTTPS. Без защищённого соединения браузер не включит Service Worker (исключение — адрес
localhostдля проверки на своём компьютере). - Полной работы магазина без сети нет. Офлайн показывается ваша настроенная страница-заглушка; полноценной офлайн-корзины, оформления заказа и личного кабинета без сети PWA не даёт. Страницы корзины, оформления заказа и аккаунта намеренно не кешируются приложением.
- Скорость. PWA кеширует повторно загружаемое, и это может ускорить повторные визиты, но процент ускорения мы не обещаем: он зависит от сайта и устройства.
- Push-уведомления — только по согласию покупателя и только в «Премиум». Рассылка ручная: вы сами пишете и отправляете сообщение. Автоматических рассылок (брошенная корзина, статус заказа) внутри PWA нет. Автоматизация коммуникаций — отдельный продукт; PWA даёт ему только технический механизм адресной отправки (подробнее в главе 6).
- iPhone. Push на iPhone работает только у веб-приложения, добавленного на экран «Домой», и в поддерживаемых версиях iOS (16.4 и новее). Такая работа на реальном телефоне разработчиком не проверялась.
- Публикация в Google Play и App Store в это руководство не входит.
- Диагностика видит только браузер администратора. Она не показывает, что происходит в браузерах покупателей.
Что такое «витрина» и как PWA с ней связано
Для каждой витрины (адреса вашего интернет-магазина) создаётся своё приложение: свой Manifest, свои иконки, свой Service Worker. Витрин у магазина может быть несколько — например, основной домен и зеркало. Настройки одной витрины можно использовать для других (подробнее в главе 3).