Ещё в 2015 году Google представил новую технологию — прогрессивные веб-приложения, или PWA (Progressive Web App). Тогда инновация не произвела фурора. Зато сейчас, когда приложения Сбербанка, Альфа-банка, ВТБ, ПСБ, Совкомбанка и некоторых других удалены из сторов, технология имеет все шансы получить второе дыхание. Банки и крупные компании ищут пути обхода санкций и способы доставить до пользователей свои приложения. И если раньше PWA не рассматривались всерьёз как замена мобильному приложению, то новые вызовы требуют нестандартных решений. 

Особенно большие сложности возникают у компаний с мобильными решениями для пользователей iPhone, так как экосистема Apple гораздо более закрытая и обойти её ограничения сложней, чем в случае с Android. И хотя в России доля устройств с ОС Android преобладает и составляет, по данным Statista, 76,05%, пренебречь 23% айфонов (а это около 53 миллионов устройств) — роскошь, которую компании себе позволить не могут. 

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

Что такое PWA, и как это работает

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

Технология PWA использует Service Workers. Это прокси-сервер, который управляет сетевым запросом от приложения и даёт возможность кэширования, отвечает за фоновую синхронизацию, настройку push-уведомлений и автономные функции.

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

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

Плюсы и минусы PWA

Плюсы

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

Минусы

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

Сравниваем PWA, кастомные приложения и мобильный веб

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

Мобильная версия сайта обычно обладает меньшими удобством и функциональностью. В ней сложно реализовать дизайн, близкий к нативному. Важным фактором является и то, что у сайта, как правило, ниже производительность и быстродействие. А ещё сайт не работает без интернета. Но его проще, дешевле и быстрей реализовать, чем кастомное мобильное приложение. 

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

Но давайте рассмотрим подробней каждый из перечисленных инструментов для взаимодействия с пользователями.

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

Скорость загрузки. У PWA она существенно выше, чем у мобильной версии сайта, это связано с их лёгкостью, о которой мы говорили выше. 

Доступность в офлайне. Сайт в офлайне доступен не будет, в отличие от PWA. 

UI\UX. Так как PWA по своей реализации больше похоже на мобильное приложение, в нём можно реализовать интерфейс, достаточно близкий к нативному. Для сайта это невозможно. 

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

Уведомления. На сайте можно реализовать отправку браузерных уведомлений, так называемых web push. Они отображаются на экране мобильного устройства, но отправляет их не приложение, а браузер. Для отправки уведомлений пользователь должен дать разрешение, когда заходит на сайт. У PWA тоже есть возможность настроить уведомления, но пока наблюдаются некоторые проблемы с уведомлениями для iOS.

Чем отличаются PWA от кастомных приложений

Сходства:

1. PWA визуально похожи на кастомные приложения, и это играет на руку владельцам бизнесов. У пользователей не возникает отторжения к новому и неизвестному, а значит доверие к бренду в безопасности.
2. Основные данные приложения можно хранить на клиенте, по сети будет передаваться только изменяющийся контент.

Различия:

1. Кастомное приложение — это самостоятельная программа и работает она как и любая другая программа, установленная на компьютере, например, Microsoft Word. А PWA — это как Google Docs — хранится в облаке, но отображается у пользователя со всеми возможностями.
2. Любое мобильное приложение можно скачать только из официального стора: Android — из Google Play, iOS — из App Store, Huawei — из AppGallery. Фактически, сторы — это единственный монопольный дистрибутор приложений. PWA же загружаются и обновляются непосредственно разработчиками, а не пользователями. Новые фичи пользователи увидят сразу, им не придётся специально для этого скачивать обновления.
3. PWA индексируются поисковиками так же, как и обычные сайты. Исходя из этого, можно оптимизировать затраты на маркетинг и продвижение.
4. PWA основаны на той же системе управления, что и сайт. Управлять его контентом намного проще из одной админ-панели. Кастомное мобильное приложение — отдельный цифровой продукт и никак не связано с сайтом, следовательно, администрируется оно тоже отдельно. За исключением случаев, когда у обоих продуктов один и тот же бекэнд.

Как PWA влияет на конверсию

Одним из важнейших показателей как в e-commerce, так и в финтехе, является коэффициент конверсии (conversion rate). Мы сравнивали этот показатель в коробочном и кастомном приложении. Теперь посмотрим, как он может поменяться с внедрением PWA.

Он может вырасти, если:

• Страница загружается быстро. Согласно отчёту о влиянии скорости страницы на покупку или целевое действие, почти 70% пользователей признают, что скорость страницы влияет на вероятность совершения покупки. Более того, 53% пользователей уходят, если мобильная версия загружается более трех секунд. Напомним, что PWA в среднем загружает весь необходимый контент в течение нескольких секунд.
• Подключен голосовой поиск. Так как поисковые системы воспринимают PWA как обычные веб-сайты, то индексация происходит по классической схеме. Плюс, остаётся в силе интеграция с умными колонками: Алисой, Alexa и Google Home. Это упростит процесс взаимодействия с приложением и облегчит целевое действие.

Кейсы использования PWA

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

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

AliExpress увеличил показатель конверсии для новых пользователей на 104%. Функциональность PWA также помогла крупнейшему ритейлеру генерировать вдвое больше посещений страниц за сеанс. Время сеанса увеличилось в среднем на 74%.

Uber создали PWA для того, чтобы сделать бронирование автомобиля доступным в низкоскоростных сетях. Благодаря нативному интерфейсу PWA, оно выполняет запросы на быструю поездку независимо от местоположения, скорости интернета и устройства. Веб-приложение размером всего 50 КБ загружается за 3 секунды даже в сетях 2G.

Pinterest обнаружили, что только 1% их мобильных пользователей конвертируются в целевое действие: регистрацию, вход в систему или установку приложений. После внедрения PWA время, проведенное в соцсети, увеличилось на 40%, а также вырос доход от рекламы, создаваемой пользователями. 

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

MakeMyTrip — крупнейшая туристическая компания Индии, MAU сайта — более 8 млн пользователей. После запуска PWA коэффициент конверсии увеличился в 3 раза, а скорость загрузки страниц выросла на 38%.

Weekendesk — туристическая компания из Франции. Для увеличения показателей бронирования номеров, предлагают установить веб-приложение на второй посещённой странице. Клиенты, которые переходят на страницу оформления с иконки PWA, в 2 раза чаще бронируют номера.

Итог

Мы давно занимаемся разработкой мобильных приложений и следим за развитием трендов и технологий. Своим клиентам мы всегда советуем отталкиваться от их собственных целей и бизнес-задач. Для некоторых продуктов мобильные приложения должны быть нативными или кроссплатформенными — им нужна высокая производительность, доступ к основным системным ресурсам и т.д. Однако есть и проекты, которым достаточно и PWA: их не нужно регистрировать в сторах Google Play и App Store, для них открыт прямой выход на десктоп.

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

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