Почему на 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

1. Свобода от сторов. Прогрессивные веб-приложения не нужно размещать в сторах — пользователи скачивают его прямо из браузера. Это экономит время пользователя, а также ваш бюджет на добавление и продвижение приложения в сторах.
   
2. Офлайн-режим. Пользователям не нужно быть подключенным к интернету для некоторых операций. Это возможно благодаря Service Workers — специальному прокси-решению от Google. Кэширование позволяет PWA работать в автономном режиме даже при потере соединения с сервером, а затем синхронизирует всю информацию при подключении. 

3. Скорость. PWA загружаются очень быстро благодаря HTML-отдаче. С момента загрузки до появления первого элемента или изображения обычно проходит не более 1 секунды.
   
4. Лёгкость. Одна из основных причин удаления приложений согласно маркетинговым исследованиям — ограниченный размер памяти смартфонов. К примеру, вес среднего приложения варьируется от 20 до 50 МБ, вес высоконагруженных может доходить до 300. В то время как установленное PWA приложение занимает менее 1 МБ.
   
5. Лояльность клиентов. Google провёл исследование, согласно которому 50% пользователей смартфонов с большей вероятностью готовы использовать сайты для мобильных устройств, потому что не хотят загружать приложения. Возможность напрямую взаимодействовать с сервисом напрямую может повысить доверие пользователей.
   
6. Адаптивность. PWA подстраиваются под любое пользовательское окружение. Они работают на всех возможных системах, устройствах и браузерах. Это достигается за счёт единой базы исходного кода.
   
7. Узнаваемость. При загрузке PWA на свой смартфон можно установить ярлык на экран. Визуально он не будет отличаться от привычного значка приложения.

Недостатки PWA

1. Ограниченный функционал. PWA приложения используют не все функции устройства. Например, сильно урезан доступ к контактам, календарю, Bluetooth и NFC. Так как разработчики PWA ограничены возможностями браузеров, то использовать все системные API невозможно. Если бизнес-модель подразумевает активное использование функций смартфона, то разумнее выбрать кастомное приложение вместо PWA.
   
2. Меньшая виральность. Путь пользователя к сайту компании может быть долгим — многие активно пользуются stores. В случае с PWA они должны сами посетить тот сайт, который им нужен, а уже после добавить приложение на своё устройство. Поэтому бизнесу стоит учесть, что нужно заложить дополнительный бюджет на продвижение или пройти модерацию каталогов приложений.
   
3. Низкая производительность. Производительность кастомных (нативных и кроссплатформенных) приложений выше, чем у PWA. На высококонкурентном рынке это может стать ключевым запросом большой аудитории.
   
4. Низкая совместимость с iOS. Совместимость прогрессивных веб-приложений с браузерами и операционными системами всё ещё находится на стадии разработки. В частности, iOS поддерживает не все функции PWA: недоступен Bluetooth, Siri, отправка уведомлений, Face и Touch ID. От этого пользовательский интерфейс ограничен. Однако в связи с ростом популярности PWA, Apple постепенно предоставляет API для обхода этих ограничений. Например, в iOS 15.4 в экспериментальном режиме предоставлена возможность взаимодействия с push-уведомлениями, а это значит, что в ближайшем будущем это будет работать на iOS.
   
5. Большой расход батареи. Из-за использования 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 приложения со всем необходимым функционалом, а в дальнейшем, после снятия санкций и ограничений, перекомпиляция в полноценное мобильное приложение.