Статья
PWA: что это и нужно ли сайту быть приложением
PWA — progressive web app, прогрессивное веб-приложение: сайт, который можно установить на телефон как приложение — с иконкой на экране, без адресной строки, иногда с уведомлениями и работой без интернета. В России о PWA заговорили, когда приложения многих банков пропали из App Store. Разбираем, что это такое, как установить PWA и нужно ли это вашему сайту.
Что это такое
PWA — обычный сайт, к которому добавили две вещи:
- манифест — файл с названием, иконкой и цветами, по которому телефон «устанавливает» сайт как приложение;
- сервис-воркер — скрипт, который работает в фоне: хранит нужные файлы для работы без интернета и принимает уведомления.
Установленный PWA открывается с иконки на экране, в отдельном окне без адресной строки, и выглядит как приложение. Но внутри это сайт: он работает через браузер, обновляется сам и не зависит от магазина приложений. Что работает в браузере, а что на сервере, разобрано в статье «Фронтенд и бэкенд».
Как установить
- iPhone: откройте сайт в Safari, нажмите «Поделиться» и выберите «На экран „Домой“». С iOS 16.4 такие веб-приложения умеют присылать уведомления.
- Android: откройте сайт в Chrome и выберите в меню браузера установку приложения или добавление на главный экран. Часто браузер сам предлагает установить сайт.
PWA или приложение
| Что сравниваем | PWA | Приложение из магазина |
|---|---|---|
| Где взять | На сайте, через браузер | В App Store, Google Play, RuStore |
| Установка | За секунды, без скачивания мегабайтов | Скачивание и установка |
| Обновления | Сами, как у сайта | Через магазин |
| Модерация | Не нужна | Магазин может отказать или удалить |
| Возможности телефона | Ограничены браузером | Полный доступ |
| Разработка | Один сайт для всех телефонов | Отдельно под iOS и Android |
Почему банки перешли на PWA
Когда приложения многих российских банков исчезли из App Store, им понадобился способ остаться на iPhone клиентов. Так, Банк «Санкт-Петербург» в ноябре 2024 года открыл PWA для всех клиентов: вход по Face ID или отпечатку, сканер QR-кодов, чат с банком. Совкомбанк на своих страницах объясняет клиентам, как добавить веб-версию на экран «Домой». PWA не нужно проходить модерацию магазина приложений — поэтому его нельзя оттуда удалить.
Кому это нужно
- Магазинам с частыми покупками — иконка на экране возвращает покупателя быстрее, чем поиск.
- Сервисам с личным кабинетом — записи, заказы, бонусы всегда под рукой.
- Тем, кого нет в магазинах приложений или кто не хочет зависеть от их правил.
Лендингу, сайту-визитке и сайту компании, куда заходят пару раз, PWA обычно не нужен: хватит хорошей мобильной версии.
Что важно знать
- Только по HTTPS — без защищённого соединения PWA не установится.
- На iPhone возможностей меньше, чем на Android: часть функций Apple ограничивает.
- Без интернета работает только то, что заранее сохранено — оформить заказ офлайн всё равно не получится.
- PWA не спасает медленный сайт. Сначала — скорость и удобство на телефоне: о них статьи «Мобильная версия сайта» и «Скорость загрузки сайта».
Как это делаем мы
Интернет-магазин мы проектируем для телефона отдельным сценарием — большая часть покупок приходит оттуда. Хорошая мобильная версия — то, с чего начинается PWA: установку, работу без интернета и уведомления добавляют поверх неё, и такая нестандартная функциональность считается отдельно, в смете до старта.