В некоторых случаях прогрессивные веб-приложения или PWA (progressive web apps) помогут удешевить и ускорить разработку, оказать услуги пользователях разных платформ — iOS и Android, обойти дискриминирующие правила сторов и обеспечить доступность приложений для мобильных пользователей в ситуациях, когда компания попала под санкции. Отчасти поэтому технология PWA стала популярнее среди мессенджеров, банков, интернет-магазинов и других видов компаний. По данным IndustryARC, мировой рынок PWA в 2019 году оценивался в $1,1 млрд, в 2023 году он вырос в три раза, а к 2030 вырастет в 12 раз и достигнет $12 млрд. Прогрессивные приложения внедрилиПрогрессивные приложения внедрили Google Maps, Telegram, HDFC Bank и несколько российских банков.

В России PWA оказались востребованными среди банков и других под санкционных компаний, когда App Store и Google Play удалили 7000 приложений из сторов. Часть этих компаний пытались оставаться доступными и предлагали в качестве альтернативы веб-версии своих приложений. Банки пробовали перезаливать приложения в сторы под новыми названиями и в новых категориях, но это оказалось краткосрочной мерой. Впоследствии банки научились устанавливать нативные приложения на iPhone, но только при личном визите пользователя в офис компании.

PWA оказались эффективным инструментом для банков, которые хотят, чтобы их приложения и услуги оставались доступными для всех мобильных пользователей — для текущих и новых, для iOS и Android, для тех, кто приходит в офис банка и для тех, кто хочет пользоваться всем онлайн. В этой статье мы расскажем, для каких задач компании выбирают PWA, а когда лучше оставаться на нативном приложении.

PWA: принципы работы

PWA — это технология, которая визуально и функционально преобразует сайт в приложение. Пользователь может загрузить его в смартфон как обычное мобильное приложение: получается «продвинутая версия сайта» с адаптацией под Android и iOS-устройства пользователей.

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

• Service Worker — прокси-серверу, который позволяет присылать push-уведомления и сохраняет информацию в кэше. За счет этого приложение может работать без доступа к интернету и не требует обновления и перезагрузки в офлайн-режиме в отличие от мобильной версии сайта, поскольку оно сохраняет данные каждой сессии.
• HTTPS-запросам — работе со своими ресурсами с помощью HTTPS через браузер аналогично тому, как нативное приложение обращается через файловую систему. Браузер выступает в роли виртуальной машины, которая запускает PWA.
• Web App Manifest — текстовому json-файлу, который добавляется в код страницы сайта. Он определяет, как приложение будет отображаться через браузер.

Как протестировать PWA

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

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

Основные преимущества PWA

Основные плюсы прогрессивных веб-приложений касаются пользовательского опыта: здесь есть преимущества как по сравнению с вебом, так и с нативными приложениями. Рассмотрим эти особенности подробнее.

1. Устанавливаются в обход сторов. Пользователи скачивают прогрессивные веб-приложения напрямую из браузера с сайта компании — это помогает компании сэкономить бюджет на продвижение приложения в сторах.

2. Работают в офлайн-режиме. PWA может работать в автономном режиме без соединения с сервером. При возвращении в онлайн информация синхронизируется.

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

4. Весит меньше мегабайта. В отличие от нативных приложений PWA занимает менее 1 Мб в памяти смартфона. Некоторые нативные приложения могут весить около 400 Мб — это значительная разница.

5. Повышает лояльность клиентов. Согласно исследованию Google, 50% пользователей смартфонов предпочитают использовать сайт, а не устанавливать приложение.

6. Эффективно адаптируется под устройство. PWA подстраиваются под любое пользовательское окружение. Они работают на всех возможных системах, устройствах и браузерах. Это достигается за счёт единой базы исходного кода.

7. Выглядит привычно для пользователя. При загрузке PWA пользователь может установить ярлык или иконку приложения на экран смартфона. Визуально это будет похоже на привычную иконку приложения из стора.

Основные недостатки PWA

PWA как веб-технология унаследовала привычные ограничения веба. Так, например, прогрессивное приложение:

1. Не имеет доступа к некоторым возможностям устройства. PWA ограничены возможностями браузеров и операционной системы. Например, они не смогут получить полный доступ к контактам, календарю, NFC и Bluetooth. Без Bluetooth не смогут работать системы управления умным домом или фитнес-устройствами. Но постепенно эти ограничения исчезают — в 2022 году банки не могли отправлять пуш-уведомления и использовать Face ID, а в 2024 году эти технологии работают.
2. Сложно распространять среди пользователей. Обычно пользователи ищут приложения в App Store или Google Play. Чтобы установить PWA им придется зайти на сайт конкретной компании и установить оттуда приложение на своё устройство.
3. Хуже справляется с высокой нагрузкой. PWA подходят меньше для тех операций, которые серьезно нагружают процессор устройства. Кастомные приложения справляются с ресурсоёмкими процессами, такими как обработка видео, лучше, поэтому в некоторых случаях остаются более предпочтительными для бизнеса.
4. Быстрее тратит заряд батареи. Прогрессивные веб-приложения используют JavaScript вместо Java, поэтому быстрее сажают батарею смартфона.

Примеры банковских и финансовых PWA

PWA от Сбербанка

Сбербанк внедрил PWA после того, как в апреле 2022 года попал под санкции и Apple и Google удалили его приложения из сторов. В этой версии доступны все те же операции, что и в классическом приложении: пользователи могут открывать счета, переводить деньги, оплачивать услуги и выполнять другие операции. Чтобы установить такое приложение, клиентам банка не нужно идти в офис — владельцы iOS и Android-устройство скачивают приложение напрямую с сайта.

PWA от Тинькофф Банка

Когда Apple удалил приложение Тинькофф Банка из App Store, банк предлагал пользователям разные варианты: установку при помощи сотрудников, аналоги старого приложения под другими названиями, установку версий напрямую с сайта. В итоге банк запустил PWA, чтобы новые клиенты банка и обладатели iPhone могли пользоваться облегчённой версией приложения и получать основные возможности как раньше.

PWA от ВТБ

ВТБ столкнулся с удалением приложения из-за санкций и попробовал перезапустить его под другим названием — «Прайм баланс». AppStore удалил первую копию через 2 месяца. Вторую копию банк переименовал и залил в стор под видом ресторанного гида — её удалили меньше, чем за 2 недели. В итоге ВТБ перешёл на использование PWA, в котором пользователям доступны привычные функции, включая Face ID и push-уведомления.

Другие банки также внедряют PWA, например, Альфа Банк, БелВЭБ и Абсолют Банк. Безопасность у таких приложений на уровне веба, поскольку технологии используются те же, что и в веб-аналогах. Это значит, что ни пользователи, ни банк не подвергаются лишним рискам.

Наш опыт в разработке PWA для банков

Мы накопили опыт разработки подобных решений для клиентов. Для Росбанка мы создали прогрессивное приложение на Flutter и помогли сократить затраты на поддержку этого решения в сравнении со старой версией.

В аналогичном решении для СМП Банка мы также реализовали автотесты, чтобы банк мог оптимизировать и те расходы, которые тратятся на регулярные тесты.

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

Почему PWA лучше делать на Flutter

Создавать PWA можно как на привычных для веба HTML, CSS и JavaScript, так и на Flutter. Мы рекомендуем именно Flutter, потому что разработка прогрессивного веб-приложения на Flutter обеспечивает:

• Адаптацию и корректное отображение на всех устройствах — разработка PWA приложения на Flutter позволит не тратить время и ресурсы на настройку каждой платформы, а получить результат сразу на всех — iOS, Android, Web, Windows, MacOS.
• Тестирование — проще по сравнению с разработкой отдельного PWA без фреймворка, так как код проверяется один раз на все платформы и нет необходимости пересборки всего продукта.
• Гибкость — можно использовать уже существующее приложение и адаптировать под запрос своего бизнеса.
• Экономия — разработчиков на проекте будет меньше, часов на разработку потребуется также меньше, в итоге сократятся расходы по сравнению с разработкой нативных приложений.
• Безопасность — код приложения на Flutter зашифрован так, чтобы его нельзя было восстановить с помощью реверс-инжиниринга — процесса копирования объекта по уже готовому образцу.

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

Как выбрать между PWA и нативными приложениями

У обоих вариантов есть отличительные особенности, которые могут быть выигрышными в разных ситуациях. При выборе решения нужно учитывать эти особенности и ограничения каждого вида. Сейчас мы не говорим о коробочных решениях, так как они представляют собой готовое приложение, которое сложнее развивать — оно может быть применимо для стартапов, но не для банковской сферы. Ниже мы наглядно сравним прогрессивные веб-приложения и кастомные и покажем их особенности. Дальше — решение за бизнесом.

Давайте на примерах рассмотрим несколько случаев, как конечная цель и особенности решения могут повлиять на выбор.

Классическое приложение — когда нужна полная функциональность устройства

Если бизнес-модель подразумевает активное использование функций смартфона, то разумнее выбрать кастомное приложение вместо PWA. Так, например, PWA не предоставляют интеграцию с Touch ID, что может осложнить работу сервисов, требующих такую аутентификацию пользователей.

PWA — когда важна конверсия

Предприятиям сферы e-commerce и FinTech важно помнить про коэффициент конверсии, так как это один из главных показателей успешности бизнеса. Мы сравнивали его в коробочном и кастомном приложениях. Теперь посмотрим, как PWA усиливает этот показатель.

PWA повышает конверсию за счёт:

• Загрузки за несколько секунд. В среднем — около 1 секунды. Время для пользователя критически важно: почти 70% пользователей мобильных приложений утверждают, что скорость загрузки решает, будут ли они пользоваться приложением дальше. 53% пользователей удаляют приложение, если оно загружается дольше 3 секунд.
• Подключения к голосовому поиску. PWA воспринимаются поисковыми системами как обычные сайты, что позволяет легче находить их. Умные колонки (Alexa, Алиса или Google Home) также просто интегрируются с PWA. Это поможет пользователям больше взаимодействовать с бизнесом и совершать целевые действия даже без устройства в руках.
• Единообразного UX. В PWA поддерживать один стиль интерфейса проще и дешевле, чем в других приложениях — не нужно разрабатывать отдельно для каждого устройства. Это также позволит пользователям iPhone легче взаимодействовать с продуктом.

Классическое приложение — если производительность критически важна

В случаях когда в приложении приходится работать с 3D-моделями или проводить видеостримы, лучше сделать выбор в пользу кастомного приложения. Нативная разработка позволит создать более производительное приложение, поскольку она учитывает особенности конкретной ОС и позволяет оптимально задействовать ресурсы устройства.

PWA — если обычное приложение могут удалить из App Store и Play Market

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

В итоге: что выбрать

В зависимости от нужд вашего бизнеса, решения для мобильных устройств ваших клиентов могут быть разными. Актуальные тренды и ситуация на рынке РФ говорит в пользу PWA: в этой статье мы объективно оценили плюсы и минусы этого варианта в сравнении с каноничными нативными приложениями. Если вам сложно принять решение, напишите нам — мы поможем вам определиться, подходит ли PWA для вашего конкретного случая.

FAQ

Безопасны ли веб-приложения PWA?

Да: в силу использования тех же технологий, что и в web, PWA обеспечивают высокий уровень безопасности. А при использовании для их разработки Flutter они также обеспечивают защиту от реверс-инжиниринга.

Что быстрее/дешевле в разработке: нативное приложение или PWA?

Разработка PWA занимает меньше времени и, как следствие, обычно стоит меньше, чем аналогичный проект по разработке кастомного приложения под ОС для устройств iOS или Android.

Чем PWA отличается от мобильной версии сайта, сохранённой на рабочий стол?

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

Поддерживает ли PWA Android?

Да. Прогрессивные веб-приложения работают на любых платформах: аналогично тому, как сайты открываются, с какой бы ОС на них ни заходили. И хотя в России PWA-приложения iOS-пользователям могут быть больше нужны, на Android-устройствах они работают так же и столь же эффективно адаптируются к окружению.