PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

Рассказываем, как оставаться в мобильном устройстве любого пользователя независимо от того, что не нравится App Store и Google Play на этот раз.

Вы в блоге Surf. Здесь мы рассказываем о том, как мобильные и веб-приложения помогают банкам, ритейлу, производству и другим типам компаний решать свои бизнес-задачи. Мы разработали приложения для Росбанка, Евраза, Mars, KFC, Бургер Кинга, Магнита и 200 других компаний. Читайте их кейсы на нашем сайте.

Подписывайтесь на наш блог, чтобы узнавать новые истории.

Что происходит

Apple и Google продолжают удалять приложения банков из сторов из-за санкций. Этот аттракцион начался два года назад и не прекращается до сих пор. Последними жертвами стали Газпромбанк и МКБ, чьи приложения исчезли из сторов несколько дней назад.

Санкции проявили сильную зависимость банков от решений Apple, Google и законов других стран. Даже расчёт на Китай иногда не работает: AppGallery от Huawei тоже удалял некоторые банковские приложения из-за санкционной политики.

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

  1. Банки продолжают бороться с проблемой косметически, то есть пытаются исправить последствия, не работая с причиной.

  2. App Store и Play Store не готовы закрывать глаза на такие пути обхода.
PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

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

Почему банки все ещё выбирают путь перезалива приложений

Во-первых. Банк понимает, что замаскированное приложение пробудет в сторе недолго. Но все равно идет на это, потому что часть пользователей даже за небольшое время успеет скачать приложение на смартфон и сможет пользоваться услугами банка как раньше. Банку сложно отказаться от привычного формата размещения приложений, потому что закрывать многолетний проект просто нецелесообразно. К тому же, санкционные ограничения с банков могут в итоге снять, и тогда останется просто вернуть готовое приложение в сторы.

Во-вторых. Другие варианты работы приложения также имеют недостатки. Самые распространённые альтернативы:

  • Установка приложения в офисе банка, когда сотрудник получает на руки от клиента разблокированный iPhone, подключает его к рабочему ноутбуку через кабель и через специальную программу устанавливает с ноутбука замаскированную версию приложения.

  • Установка приложения курьером, когда всё то же самое сотрудник делает с выездом на адрес клиента.

  • Установка приложения на Android с помощью APK-файла, когда пользователь действует по инструкции компании.

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

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

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

А какие ещё есть варианты

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

Можно работать через мобильную версию сайта

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

  • Сайт охватывает всю аудиторию. Для использования веб-версии достаточно иметь браузер, а операционная система и тип устройства не важны.
  • Обновления загружаются сразу у всех. Не нужно ждать, пока пользователь обнаружит и установит очередной апдейт.
  • Сайт не принадлежит ни Apple, ни Google. Удалить что-либо с сайта банка может только банк.

Есть недостаток в виде UX. Мобильный сайт не заменит мобильное приложение по удобству. В 2023 году интернет-банками пользовались только 43% россиян — против 70% пользовавшихся мобильным банком. Веб предлагает пользователям другой UX, отличный от того, что есть в мобильных приложениях. Дольше загрузка, сложнее логика расположения элементов, иногда другие механики и набор возможностей на стартовом экране. Например, в мобильной веб-версии одного из протестированных банков сложно делать переводы по СБП — нужно скроллить экран и искать эту возможность, хотя в приложении того же банка такая опция находится в самом верху под рукой.

Другой пример — авторизация в онлайн-банке может быть в 6 раз дольше, чем в приложении. Нужно открыть сайт, дождаться загрузки, ввести свои данные, подтвердить вход по телефону или ввести пароль. В случае рассматриваемого банка вход в веб-версию занял 58 секунд при сохранённом логине, а вход в приложение того же банка по пин-коду — 9 секунд.

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

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

PWA — это пока лучшая альтернатива нативным банковским приложениям

Прогрессивные веб-приложения (progressive web apps, PWA) — это по сути веб. PWA работают как невидимый браузер, в котором открывается сервис банка. Ключевой момент здесь в том, что он невидим — для пользователя запущенный сервис выглядит как обычное приложение на девайсе: установил, нажал на иконку, открылось в отдельном окошке-приложении, не в браузере.

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

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

PWA — это не чей-то фреймворк, а скорее методология. Это значит, что такое решение не проприетарно, и никто не сможет запретить использовать его. PWA банка остается под контролем этого банка.

Евгений Сатуров, лид Flutter-отдела

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

  • Не пропадёт из сторов. Потому что его не нужно загружать в сторы — пользователи скачивают его с сайта банка.
  • Запускается быстрее и дешевле нативного приложения. Вместо двух приложений — для iOS и Android — банк разрабатывает одно и задействует меньше специалистов.
  • Выглядит как обычное приложение. Пользователь не видит разницу. Он скачивает приложение с сайта, сохраняет иконку приложения на главном экране и пользуется как обычным приложением.
  • Обновляется без усилий пользователя. Команда банка обновляет приложение и обновления сразу появляются в установленной версии у пользователя.
  • Поддерживает push-уведомления. Для маркетинга и других коммуникаций с пользователем это важный канал. Он поддерживается в PWA начиная с iOS 16.4.
PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

Узнайте больше про особенности и принцип работы PWA в других наших статьях:

Раньше бизнес не стремился внедрять PWA из-за ограниченной функциональности. Например, до 2020 года PWA не могли поддерживать вход по Touch и Face ID, а до 2023 — настройку и отправку push-уведомлений. Сейчас PWA предоставляют эти функции, и для пользователей разница с нативным приложением по UX почти незаметна.

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

На каждой платформе есть минимум один браузер, который позволяет скачать PWA: на iOS — это Safari, на Android — Chrome. Чтобы пользователь установил такое приложение, банк готовит инструкцию из трёх шагов:

  1. Открыть сайт в нужном браузере.
  2. Выбрать кнопку «Домой» или «Скачать приложение».
  3. Пользоваться приложением.

Какие банки уже перешли на PWA, чтобы обойти постоянные удаления

PWA уже внедрили крупные банки. Например:

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

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

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

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

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

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

Создание PWA, которое повторяет UX приложения и использует привычные мобильные фичи — это перспективное направление для развития систем интернет-банкинга. Да, пока есть ряд ограничений. Например, не ко всему «железу» можно сейчас привязать браузер. Но при нужном внимании со стороны разработчиков клиенты получат производительность и сервис, которые позволят им быстро забыть про былые ограничения и неудобства. Тем более, что недавно вышел Flutter 3.0, где теме web-performance уделено особое внимание.

Андрей Овсянников, директор IT СМП Банка

Попробовать PWA для банка в деле

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

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

На компьютере открывать демо-версию можно из любого удобного браузера. Если нужно просматривать её с iPhone, то лучше всего открывать в Safari и сохранять себе при помощи кнопки «Домой». На Android-устройствах советуем открыть демо-версию в браузере Chrome и «Добавить на домашнюю страницу». Из других браузеров на обеих ОС всё работает так же, но без сохранения на устройство.

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

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

  • Можно отправить push на все устройства или на конкретное
  • Можно настроить вход по Face ID или Touch ID
  • Можно поиграться с цветовой схемой и цветом экрана загрузки

Инструкции, как это протестировать, мы оставили под кнопкой «Настройки».

Слева — принимающее уведомление устройство, справа — настройка отправки push

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

PWA на Flutter — это один продукт под множество платформ

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

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

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

Также Flutter — это опенсорсный фреймворк, и использовать его можно без опасений за санкционные ограничения. Сейчас на нём работают продукты Яндекса, Камаза и других российских компаний, которые могут попасть или уже попали под санкции. В мае 2023 года на Flutter работало более одного миллиона приложений, сейчас — это единственное кроссплатформенное решение с растущим трендом популярности за последние пять лет.

PWA — единственное, что защитило банки от блокировки приложений. Тот, кто это понял, не зависит от Apple и политики

Новое приложение Росбанка также работает на Flutter. Мы разработали его на имеющемся бэкенде старого приложения. Это помогло сократить затраты на поддержку нового решения в сравнении со старой версией. В перспективе эта экономия составит порядка 60%.

Сколько стоит и длится разработка PWA на Flutter

Разработка PWA на Flutter занимает два месяца, внутреннее и пользовательское тестирования — ещё четыре. В результате получается рабочая версия для запуска. А чтобы PWA полностью заменил нативное приложение по функциональности, потребуется ещё около десяти месяцев.

Но есть особенности. Если банковские приложения написаны не на Flutter, переиспользовать реализацию этих продуктов не выйдет. Придётся переписывать всё с нуля. А если приложение уже написано на Flutter, но поддержка веба не закладывалась — на адаптацию кодовой базы к запуску в вебе потребуется ещё 10-15% времени от уже затраченного.

Однако, в перспективе это решение будет экономически оправданно за счёт своей кроссплатформенности.

Если банк теряет возможность публиковать приложение в App Store для iOS, он должен принять решение: либо он продолжает развивать iOS-приложение — при этом непонятно, сможет ли оно когда-нибудь попасть к пользователю; либо же iOS-приложение перестаёт поддерживаться вообще — остаётся только Android-приложение и веб. Если использовать Flutter, то этого выбора делать не нужно: банк просто продолжает развивать проект в единой кодовой базе.

Евгений Сатуров, лид Flutter-отдела

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

В сухом остатке: PWA — отличный выход из неприятностей

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

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

2727
22
22 комментария

Отпишите о минусах PWA - они де наверняка есть? Если б было так все гладко, все бы юзали его активно

2
Ответить
Автор

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

Если чуть детальнее про главные ограничения PWA, то:

1. Из-за ограничений на iOS у них нет полного доступа к некоторым функциям устройств: к Bluetooth, NFC и некоторым другим.
2. Они расходуют заряд устройства сильнее, чем нативные приложения.
3. Они хуже справляются с операциями, нагружающими процессор — то есть, если нужно обрабатывать видео, то лучше сделать выбор в пользу кастомного приложения.

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

4
Ответить

PWA это практически тот же самый сайт, только с некоторым набором возможностей, имеет практически все те же недостатки. Производительность как у веб сайта. Сделать его нормально достаточно сложно, нормально сделанных примеров практически нет. В целом история схожа с electron(на нем вообще норм только сделан vs code и еще парочка)

3
Ответить

Вот кому нужно pwa)

2
Ответить

Рил. Теперь приходится держать все версии просто «на всякий случай». Непонятно, какое можно и нужно удалять, какое нет.

Ответить

Многим фронтендщикам говорил 5 лет назад, запрыгивате в поезд Flutter, он только начинает движение. Они же его приняли за electron и говорили нах оно нам надо, завтра он помрет, ведь там Dart, который никогда не заменит JS. Ну и как итог: флаттер прекрасно забрал свою нишу и дарт вместе с ним. А ведь все просто было "на подумать": React Native уже начал сдавать позиции, все ждали что-то похожее на нативные языки с наименьшей тонкостью прослойки, и вот он Flutter, дающий почти все это + 60 fps.

1
1
Ответить

Недавно полистал различные исследования и рейтинги, и с удивлением обнаружил, что Flutter не просто становится популярнее, а React Native нет. Flutter – единственный кроссплатформенный фреймворк с позитивной динамикой изменения популярности ЗА ПОСЛЕДНИЕ 5 ЛЕТ!!!

Об этом и данные statista говорят (https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/), и, косвенно, исследование от JetBrains подтверждает (https://www.jetbrains.com/lp/devecosystem-2023/development/#mobile_crossplatform_frmwrk_two_years).

1
Ответить