PWA приложения VS классические: новые возможности для банков

Почему на PWA приложения растёт спрос? Многие приложения российских банков, такие как Сбербанк, Альфа-банк, ВТБ, ПСБ, Tinkoff и другие из-за санкций оказались удалены из сторов. Бизнес находится в поиске альтернативных решений, и одно из них — технология Progressive Web Applications (PWA), или прогрессивные веб-приложения.
Технология была разработана ещё в 2000 году в Microsoft, а в 2015 году Google стал развивать её для использования на Android, но из-за скудного на тот момент user experience она не смогла завоевать внимание разработчиков. Сейчас она может стать полноценной заменой классическим приложениям и привычному App Store, и в этой статье мы расскажем, почему на неё стоит обратить внимание и какие есть плюсы и минусы PWA для банков и крупного бизнеса.
PWA: принципы работы
PWA — это технология, которая визуально и функционально преобразует сайт в приложение. Его можно открыть в браузере или загрузить как обычное мобильное приложение на своём смартфоне. Получается «продвинутая версия сайта» с адаптацией под устройства пользователей, и не нужно специально разрабатывать версии для Android или iPhone.
Для прогрессивного приложения характерны:
- Использование Service Worker — прокси-сервера, который управляет сетевым запросом от приложения и даёт возможность кэширования и запоминания информации, отвечает за фоновую синхронизацию, позволяет присылать push-уведомления для полноценной коммуникации с клиентами.
- Работает со своими ресурсами с помощью HTTPS через браузер — так же, как нативное приложение обращается через файловую систему. Браузер выступает в роли виртуальной машины, которая запускает PWA приложение.
- Web App Manifest — текстовый json-файл, который добавляется в код страницы сайта. Он определяет, как будет отображаться приложение через браузер, то есть все визуальные элементы.
Многие программисты называют PWA приложения эволюцией веб-разработки и прогнозируют слияние мобайла с вебом. Как минимум, потому что эта технология позволяет бизнесу избежать убытков в случае санкций и продолжать поддерживать взаимодействие с клиентом.
Плюсы PWA
- Свобода от сторов. Прогрессивные веб-приложения не нужно размещать в сторах — пользователи скачивают его прямо из браузера. Это экономит время пользователя, а также ваш бюджет на добавление и продвижение приложения в сторах.
- Офлайн-режим. Пользователям не нужно быть подключенным к интернету для некоторых операций. Это возможно благодаря Service Workers — специальному прокси-решению от Google. Кэширование позволяет PWA работать в автономном режиме даже при потере соединения с сервером, а затем синхронизирует всю информацию при подключении.
- Скорость. PWA загружаются очень быстро благодаря HTML-отдаче. С момента загрузки до появления первого элемента или изображения обычно проходит не более 1 секунды.
- Лёгкость. Одна из основных причин удаления приложений согласно маркетинговым исследованиям — ограниченный размер памяти смартфонов. К примеру, вес среднего приложения варьируется от 20 до 50 МБ, вес высоконагруженных может доходить до 300. В то время как установленное PWA приложение занимает менее 1 МБ.
- Лояльность клиентов. Google провёл исследование, согласно которому 50% пользователей смартфонов с большей вероятностью готовы использовать сайты для мобильных устройств, потому что не хотят загружать приложения. Возможность напрямую взаимодействовать с сервисом напрямую может повысить доверие пользователей.
- Адаптивность. PWA подстраиваются под любое пользовательское окружение. Они работают на всех возможных системах, устройствах и браузерах. Это достигается за счёт единой базы исходного кода.
- Узнаваемость. При загрузке PWA на свой смартфон можно установить ярлык на экран. Визуально он не будет отличаться от привычного значка приложения.
Недостатки PWA
- Ограниченный функционал. PWA приложения используют не все функции устройства. Например, сильно урезан доступ к контактам, календарю, Bluetooth и NFC. Так как разработчики PWA ограничены возможностями браузеров, то использовать все системные API невозможно. Если бизнес-модель подразумевает активное использование функций смартфона, то разумнее выбрать кастомное приложение вместо PWA.
- Меньшая виральность. Путь пользователя к сайту компании может быть долгим — многие активно пользуются stores. В случае с PWA они должны сами посетить тот сайт, который им нужен, а уже после добавить приложение на своё устройство. Поэтому бизнесу стоит учесть, что нужно заложить дополнительный бюджет на продвижение или пройти модерацию каталогов приложений.
- Низкая производительность. Производительность кастомных (нативных и кроссплатформенных) приложений выше, чем у PWA. На высококонкурентном рынке это может стать ключевым запросом большой аудитории.
- Низкая совместимость с iOS. Совместимость прогрессивных веб-приложений с браузерами и операционными системами всё ещё находится на стадии разработки. В частности, iOS поддерживает не все функции PWA: недоступен Bluetooth, Siri, отправка уведомлений, Face и Touch ID. От этого пользовательский интерфейс ограничен. Однако в связи с ростом популярности PWA, Apple постепенно предоставляет API для обхода этих ограничений. Например, в iOS 15.4 в экспериментальном режиме предоставлена возможность взаимодействия с push-уведомлениями, а это значит, что в ближайшем будущем это будет работать на iOS.
- Большой расход батареи. Из-за использования JavaScript вместо Java прогрессивные веб-приложения быстрее сажают батарею телефона и расходуют больше ресурсов.

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

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

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

Сбербанк использует PWA приложение совместно с App Authentification и отмечает его особые удобства для владельцев iOS — теперь пользователи могут пользоваться веб-версией как приложением и для его установки не нужно идти в офис банка.
Spotify смогли уйти от санкций в App Store благодаря разработке PWA приложения. Они отметили, что у PWA адаптивный UI, что дало возможность приложению работать гораздо быстрее. Пользователи могут использовать новое приложение как аналог обычно загружаемого из AppStore — и говорят, что стало в несколько раз удобнее.
Starbucks провели эксперимент и разработали PWA, чтобы собирать больше заказов вместе с мобильным приложением. Выяснилось, что PWA оказалось меньше по весу на 99,84% по сравнению с классическим приложением. Выбор пользователей был сделан в пользу PWA. Количество заказов увеличилось в два раза и почти сравнялось с декстоп-заказами.
Только 1% мобильный пользователей Pinterest переходили к целевому действию: регистрации, входу в систему или установке приложений. Когда компания разработала PWA приложение, клиенты стали проводить на 60% больше времени в соцсети, а доход вырос от создаваемой пользователями рекламы.
Trivago, один из крупных немецких агрегаторов для бронирования отелей, обнаружили, что при переходе на PWA вовлечённость пользователей увеличилась на 150%.
MakeMyTrip — крупнейшая туристическая компания Индии, MAU сайта — более 8 млн пользователей. После запуска PWA коэффициент конверсии увеличился в 3 раза, а скорость загрузки страниц выросла на 38%.
Как Surf разработал PWA
В Surf мы накопили опыт разработки подобных решений для клиентов и создали концепт онлайн-банка. По сути, это 3 приложения в 1: для мобильных устройств, веба и десктопа.
Разработано на базе Flutter — кроссплатформенного фреймворка от Google. Позволяет, используя одну кодовую базу, создавать PWA приложения сразу для нескольких платформ и снижает затраты на разработку до 60%. На Flutter уже работает множество приложений из разных сфер: от сервисов доставки до автоконцернов и, например, Росбанк.

Что даёт разработка прогрессивного веб-приложения на Flutter:
- адаптация и корректное отображение на всех устройствах — разработка PWA приложения на Flutter позволит не тратить время и ресурсы на настройку каждой платформы, а получить результат сразу на всех — iOS, Android, Web, Windows, MacOS.
- тестирование — проще по сравнению с разработкой отдельного PWA без фреймворка, так как код проверяется один раз на все платформы и нет необходимости пересборки всего продукта;
- использование всех возможностей iOS и Android. Кроссплатформенная разработка не отличается по сложности или дается легче, чем нативная, так как использует всё те же нативные технологии самой платформы. Например, в приложении на Flutter можно, как и в нативном, использовать Touch и Face ID, сканер отпечатка пальца, GPS и камеру.
- гибкость — можно использовать уже существующее приложение и адаптировать под запрос своего бизнеса;
- экономия — разработчиков на проекте будет меньше, часов на разработку потребуется также меньше, в итоге сократятся расходы по сравнению с разработкой нативных приложений;
- безопасность — код приложения на Flutter зашифрован так, чтобы его нельзя было восстановить с помощью реверс-инжиниринга — процесса копирования объекта по уже готовому образцу, то есть уровень безопасности такого приложения высокий.
В итоге вы получаете эффективные приложения на нескольких платформах сразу и в обход сторов. Мы всегда предлагаем несколько сценариев развития и реализации технологии, отталкиваясь от запросов конкретного бизнеса, в частности — создание временного PWA приложения со всем необходимым функционалом, а в дальнейшем, после снятия санкций и ограничений, перекомпиляция в полноценное мобильное приложение.