PWA vs мобильный веб: чем отличаются и что выбрать

Мы уже писали про PWA вот тут и тут. В этой статье рассмотрим эту технологию ещё с одной стороны — сравним его с мобильным веб-сайтом.

• PWA и веб-приложение: в чём разница?
• Отличия PWA от мобильной версии сайта
• На чём пишут мобильные версии и PWA
• PWA и сторы
  
• Почему PWA может не подойти бизнесу
• Какие компании используют мобильный веб, а какие PWA

Веб-приложение — это программа, которая отвечает определённому запросу пользователя. Например, сервис поиска билетов: на сайте пользователь вводит данные, в это время веб-сервис обращается к компаниям, которые продают билеты. В результате пользователю отображаются подобранные по его запросам варианты.

Мобильная версия сайта (мобильный веб) — версия сайта, адаптированная для смартфонов, открывается с помощью мобильного браузера.

PWA (Progressive Web App) — один из способов реализации мобильного веба, технология, с помощью которой сайт преобразуется в веб-приложение визуально и функционально. Мы уже писали об этой технологии подробнее в этой статье.

Все эти технологии не стоит путать с мобильными приложениями — это отдельный продукт, который устанавливается из сторов.

• Скорость загрузки. У PWA она существенно выше, чем у мобильной версии сайта. Это связано с тем, что все необходимые данные загружаются в смартфон и далее не зависят от скорости интернета. Новые фичи и обновления добавляются командой, которая поддерживает приложение.
• Независимость от браузеров. PWA работает внутри системы и всегда выглядит одинаково, независимо от того, какие браузеры установлены у пользователя.
• Доступность в офлайне. Сайт не может работать без интернета (мобильного или Wi-Fi), в отличие от PWA. При подключении к интернету, прогрессивные веб-приложения загружают и сохраняют необходимые файлы и дальше могут работать без доступа к сети.
• UI\UX. В разработке PWA есть все инструменты для реализации интерфейса, довольно близкого к нативному.
• Возможность добавления иконки на экран смартфона. PWA предоставляет такую возможность, облегчая поиск сервиса. В мобильную версию сайта пользователь может зайти через браузер или создав ярлык на экране. В случае с мобильной версией сайта, ярлык откроется в браузере, а PWA — отдельным приложением.
• Уведомления. На сайте можно реализовать отправку браузерных уведомлений — web push. Они отображаются на экране мобильного устройства, но отправляет их не приложение, а браузер. Для отправки уведомлений пользователь должен дать разрешение, когда заходит на сайт. У PWA тоже есть возможность настроить уведомления, но пока есть трудности с реализацией на iOS. Однако Apple анонсировали, что проблема с пушами скоро решится.

Мобильные веб-приложения создаются с помощью технологий для реализации frontend: HTML, CSS, JavaScript — и backend: Ruby, PHP, Python и т. д. С точки зрения backend реализация не отличается от обычного веб-сайта. Любой мобильный веб можно превратить в PWA, если доработать под определённую цель. И это играет на руку бизнесу, который некогда развивал мобильный веб, но забросил. Теперь из мобильной версии сайта можно сделать PWA и запустить новый канал продаж.

PWA тоже можно создать почти на любой веб-технологии. Самые популярные и актуальные сейчас:

• React;
• Angular;
• Vue;
• Polymer;
• Flutter.

Прежде чем выбрать технологию, нужно определиться с целью и дальнейшими планами проекта. Если нужен только мобильный веб, то подойдёт React, если в будущем возможен рост проекта и его дистрибуция для всех платформ, то Flutter.

У Flutter есть ещё преимущества, о которых мы подробно писали:

• Не требует специальной адаптации под веб. Так как кроссплатформа изначально предполагает приложение для трёх платформ: веба, десктопа и мобильных. Это позволяет сэкономить в среднем до 60% бюджета на разработку.
• Код, написанный на Flutter, можно легко скомпилировать в PWA и обратно.

Чтобы установить PWA, достаточно зайти в браузер на сайт, который использует настройки для отображения в режиме «нативного приложения». В PWA приложении доступна ровно такая же функциональность, которая доступна для браузера. Например, доступ к камере или геолокации. Однако некоторые нативные функции могут быть недоступны. Например, доступ к батарее или графическому процессору.

Но это тоже решаемо:

• Запустить TWA (Trusted Web Activities) — это режим запуска браузера на базе Android Custom Tab. Эта технология от Google предоставляет функции, которые сглаживают для пользователя переход от натива к вебу и дополнительные возможности для ОС Android.
• Опубликовать приложение в Google Play. Тогда в PWA будут доступны: интегрированная монетизация, поддержка веб-уведомлений и анимации.
• «Завернуть» в нативную оболочку и распространять через магазины приложений, но тогда может потеряться независимость от площадки. Барьер может возникнуть с App Store, так как он может отклонить приложение для размещения в магазине, если оно целиком дублирует поведение PWA без дополнительных функций. Читайте больше о том, почему App Store может отклонить приложение в нашей статье.

Проблема №1 — в PWA невозможно встроить СКЗИ (средство криптографической защиты информации), нет готовых решений, согласованных с регулирующим органом. Это является одним из стоп-факторов применения PWA для банков.

Решение. На смартфоне пользоваться СКЗИ или электронной цифровой подписью можно. Ограничения есть только при использовании в мобильном браузере.

Проблема №2 — что выбрать: «приложение-зеркало» или PWA? Многие крупные компании и банки после удаления из сторов нашли быстрое решение: разместили свои нативные приложения, но под другими названиями.

Решение. Этот ход в краткосрочной перспективе позволил компаниям вернуться на площадки, однако в долгосрочной — после модерации многие были удалены. Кроме того, быстро создать приложение не получится, даже если каждая итерация тщательно записывалась в бэклог. На поднятие и развёртывание «приложения-зеркала» потребуется почти столько же ресурсов, сколько на написание с нуля. Экстремально короткие сроки обязательно скажутся на работоспособности приложения и отзывах пользователей.

Долгосрочное решение в виде разработки PWA будет эффективнее, чем впопыхах сделанное «зеркало». Если компания реализует бесшовную миграцию пользователей, ей удастся сохранить большую часть аудитории, и переход на PWA не повлияет на метрики.

Мобильные версии официальных сайтов — не новинка, а скорее «хорошо забытое старое». Многие крупные компании в своё время развивали их вслед за десктопными версиями сайтов. Однако после роста популярности мобильных приложений отказались от их активного развития.

В мобильных версиях можно легко отразить визуальный код бренда, но формат будет всегда ограничен только самым необходимым: значком авторизации, лаконичным меню, поиском, корзиной (в e-commerce).

Технология PWA — не новинка на рынке, однако стремительный рост показала относительно недавно. Многие компании создают прогрессивные веб-приложения для замены нативным или в качестве дополнительного канала продаж. PWA пользуют ритейлеры: Спортмастер, DNS; Тинькофф банк; сервисы: aviasales.ru, ivi.ru и соцсеть «В Контакте».

• У PWA много достоинств (высокая скорость загрузки, независимость от браузеров, работа в офлайн режиме, гибкий UI\UX, возможность добавить иконку на экран смартфона, отправка уведомлений). PWA — это один из способов реализации мобильного веба.
• Мобильный веб тоже может стать полноценным каналом сбыта. Всё зависит от целей, которые преследует бизнес.