PWA vs мобильный веб: чем отличаются и что выбрать
Вы в блоге Surf, с 2011 года мы разрабатываем мобильные и веб-решения для бизнеса
О чём в этой статье:
PWA и мобильный веб: а есть ли разница
Веб-приложение — это программа, которая отвечает определённому запросу пользователя. Например, сервис поиска билетов: на сайте пользователь вводит данные, в это время веб-сервис обращается к компаниям, которые продают билеты. В результате пользователю отображаются подобранные по его запросам варианты.
Мобильная версия сайта (мобильный веб) — версия сайта, адаптированная для смартфонов, открывается с помощью мобильного браузера.
PWA (Progressive Web App) — один из способов реализации мобильного веба, технология, с помощью которой сайт преобразуется в веб-приложение визуально и функционально. Мы уже писали об этой технологии подробнее в этой статье.
Все эти технологии не стоит путать с мобильными приложениями — это отдельный продукт, который устанавливается из сторов.
6 отличий PWA от мобильной версии сайта
- Скорость загрузки. У PWA она существенно выше, чем у мобильной версии сайта. Это связано с тем, что все необходимые данные загружаются в смартфон и далее не зависят от скорости интернета. Новые фичи и обновления добавляются командой, которая поддерживает приложение.
- Независимость от браузеров. PWA работает внутри системы и всегда выглядит одинаково, независимо от того, какие браузеры установлены у пользователя.
- Доступность в офлайне. Сайт не может работать без интернета (мобильного или Wi-Fi), в отличие от PWA. При подключении к интернету, прогрессивные веб-приложения загружают и сохраняют необходимые файлы и дальше могут работать без доступа к сети.
- UI\UX. В разработке PWA есть все инструменты для реализации интерфейса, довольно близкого к нативному.
- Возможность добавления иконки на экран смартфона. PWA предоставляет такую возможность, облегчая поиск сервиса. В мобильную версию сайта пользователь может зайти через браузер или создав ярлык на экране. В случае с мобильной версией сайта, ярлык откроется в браузере, а PWA — отдельным приложением.
- Уведомления. На сайте можно реализовать отправку браузерных уведомлений — web push. Они отображаются на экране мобильного устройства, но отправляет их не приложение, а браузер. Для отправки уведомлений пользователь должен дать разрешение, когда заходит на сайт. У PWA тоже есть возможность настроить уведомления, но пока есть трудности с реализацией на iOS. Однако Apple анонсировали, что проблема с пушами скоро решится.
Какие технологии используются для создания мобильной версии и PWA
Мобильные веб-приложения создаются с помощью технологий для реализации frontend: HTML, CSS, JavaScript — и backend: Ruby, PHP, Python и т. д. С точки зрения backend реализация не отличается от обычного веб-сайта. Любой мобильный веб можно превратить в PWA, если доработать под определённую цель. И это играет на руку бизнесу, который некогда развивал мобильный веб, но забросил. Теперь из мобильной версии сайта можно сделать PWA и запустить новый канал продаж.
PWA тоже можно создать почти на любой веб-технологии. Самые популярные и актуальные сейчас:
- React;
- Angular;
- Vue;
- Polymer;
- Flutter.
Прежде чем выбрать технологию, нужно определиться с целью и дальнейшими планами проекта. Если нужен только мобильный веб, то подойдёт React, если в будущем возможен рост проекта и его дистрибуция для всех платформ, то Flutter.
У Flutter есть ещё преимущества, о которых мы подробно писали:
- Не требует специальной адаптации под веб. Так как кроссплатформа изначально предполагает приложение для трёх платформ: веба, десктопа и мобильных. Это позволяет сэкономить в среднем до 60% бюджета на разработку.
- Код, написанный на Flutter, можно легко скомпилировать в PWA и обратно.
Концепт онлайн-банка на Flutter: для веба, десктопа и мобильных от Surf
PWA и сторы
Чтобы установить PWA, достаточно зайти в браузер на сайт, который использует настройки для отображения в режиме «нативного приложения». В PWA приложении доступна ровно такая же функциональность, которая доступна для браузера. Например, доступ к камере или геолокации. Однако некоторые нативные функции могут быть недоступны. Например, доступ к батарее или графическому процессору.
Но это тоже решаемо:
- Запустить TWA (Trusted Web Activities) — это режим запуска браузера на базе Android Custom Tab. Эта технология от Google предоставляет функции, которые сглаживают для пользователя переход от натива к вебу и дополнительные возможности для ОС Android.
- Опубликовать приложение в Google Play. Тогда в PWA будут доступны: интегрированная монетизация, поддержка веб-уведомлений и анимации.
- «Завернуть» в нативную оболочку и распространять через магазины приложений, но тогда может потеряться независимость от площадки. Барьер может возникнуть с App Store, так как он может отклонить приложение для размещения в магазине, если оно целиком дублирует поведение PWA без дополнительных функций. Читайте больше о том, почему App Store может отклонить приложение в нашей статье.
Почему PWA может не подойти бизнесу
Проблема №1 — в PWA невозможно встроить СКЗИ (средство криптографической защиты информации), нет готовых решений, согласованных с регулирующим органом. Это является одним из стоп-факторов применения PWA для банков.
Решение. На смартфоне пользоваться СКЗИ или электронной цифровой подписью можно. Ограничения есть только при использовании в мобильном браузере.
Проблема №2 — что выбрать: «приложение-зеркало» или PWA? Многие крупные компании и банки после удаления из сторов нашли быстрое решение: разместили свои нативные приложения, но под другими названиями.
Решение. Этот ход в краткосрочной перспективе позволил компаниям вернуться на площадки, однако в долгосрочной — после модерации многие были удалены. Кроме того, быстро создать приложение не получится, даже если каждая итерация тщательно записывалась в бэклог. На поднятие и развёртывание «приложения-зеркала» потребуется почти столько же ресурсов, сколько на написание с нуля. Экстремально короткие сроки обязательно скажутся на работоспособности приложения и отзывах пользователей.
Долгосрочное решение в виде разработки PWA будет эффективнее, чем впопыхах сделанное «зеркало». Если компания реализует бесшовную миграцию пользователей, ей удастся сохранить большую часть аудитории, и переход на PWA не повлияет на метрики.
Какие компании используют мобильный веб, а какие PWA
Мобильный веб
Мобильные версии официальных сайтов — не новинка, а скорее «хорошо забытое старое». Многие крупные компании в своё время развивали их вслед за десктопными версиями сайтов. Однако после роста популярности мобильных приложений отказались от их активного развития.
В мобильных версиях можно легко отразить визуальный код бренда, но формат будет всегда ограничен только самым необходимым: значком авторизации, лаконичным меню, поиском, корзиной (в e-commerce).
PWA
Технология PWA — не новинка на рынке, однако стремительный рост показала относительно недавно. Многие компании создают прогрессивные веб-приложения для замены нативным или в качестве дополнительного канала продаж. PWA пользуют ритейлеры: Спортмастер, DNS; Тинькофф банк; сервисы: aviasales.ru, ivi.ru и соцсеть «В Контакте».
- У PWA много достоинств (высокая скорость загрузки, независимость от браузеров, работа в офлайн режиме, гибкий UI\UX, возможность добавить иконку на экран смартфона, отправка уведомлений). PWA — это один из способов реализации мобильного веба.
- Мобильный веб тоже может стать полноценным каналом сбыта. Всё зависит от целей, которые преследует бизнес.
Если хотите заказать нам разработку PWA, пишите на vc_hello@surfstudio.ru.
Узнайте больше о нашем опыте в веб-разработке.
Рекомендуем почитать:
✅ PWA + Flutter: созданы друг для друга
✅ Как мы сделали ещё один мобильный банк на Flutter — для «СМП Банка»
✅ Как создать универсальное приложение для iOS, Android, веба, десктопа и сэкономить 60% бюджета
Комментарий недоступен
Спасибо, что читаете и поделились мнением! Скажите, а заметили, что смартфон в целом стал работать шустрее с переходом на веб-версии?
Потыкал прототип банка, очень круто сделано! Но вопрос: PWA подходит для каких-то ещё сфер бизнеса, кроме описанных в статье?
Спасибо, что читаете :) PWA подходят абсолютно для всех сфер бизнеса. Всё, что можно сделать в вебе, можно реализовать и в PWA. Есть, конечно, свои особенности для каждой сферы: например, для банков будет важна безопасность, для e-commerce – удобство оформления покупки и т.д. Но всё реализуемо) Кстати, про концепт банка на Flutter можно подробнее почитать здесь: https://vc.ru/services/574332-kak-sozdat-universalnoe-prilozhenie-dlya-ios-android-veba-desktopa-i-sekonomit-60-byudzheta
PWA это не технология, это комбинация различных веб-инструментов (service worker, cache storage и тд). Ну да ладно, мы ж не на Хабре. Но из этого ложного тезиса вытекают уже грубые ошибки:
1. «Независимость от браузеров». Это неправда, функциональность PWA зависит от браузера (и не может не зависеть, потому что это обычный браузер).
2. «UI/UX близкий к нативному». Нет никаких фишек у PWA, просто потому что это не технология. UI/UX, близкий к нативному, делается с помощью CSS+JS без привязки к PWA.
И далее по тексту такие же ошибки, исходящие из того, что PWA - это технология.
Маркетинговые статьи, в которых затрагиваются технические вопросы, нужно обязательно отдавать на проверку технарям.
тогда никто не купит
Здравствуйте, спасибо за ваше мнение! Более подробно о PWA мы писали в этой статье https://vc.ru/services/424911-antikrizisnye-tehnologii-mozhet-li-pwa-stat-zamenoy-mobilnomu-prilozheniyu, где разобрали принцип действия. Цель этой – ответить на самые распространённые вопросы со стороны представителей бизнеса о возможных каналах дистрибуции своих цифровых продуктов.