(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(19355434, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(19355434, 'hit', window.location.href);

Антикризисные технологии: может ли PWA стать заменой мобильному приложению

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

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

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

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

Мы в Surf более 12 лет работаем с мобильными технологиями. Переиспользуем успешный опыт из разных отраслей и помогаем крупным игрокам войти в топ. Среди наших клиентов лидеры своей сферы — Росбанк, SBI Банк, Магнит, Лабиринт и KFC.

💼 Рассказываем об этом в наших кейсах.

📱 Недавно мы запустили канал в Telegram, в котором делимся своим продуктовым видением. Подписывайтесь!

О чём в этой статье:

Что такое 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-приложение для вашего бизнеса, пишите нам на [email protected].

Чтобы быть в курсе технологий и трендов, подписывайтесь на наш канал в Telegram.

Рекомендуем почитать:

Не Apple и Google Pay едиными: как ритейлеру внедрить аналоги платёжных систем

Система лояльности в e-commerce приложении: как внедрить и увеличить продажи

Кастом vs «коробка» для e-commerce-приложения: сравниваем, считаем упущенную выгоду

0
47 комментариев
Написать комментарий...
Vladislave

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

Ответить
Развернуть ветку
Surf
Автор

Для крупных банков - это скорей временная альтернатива мобильному приложению. Которую потом можно перекомпилировать в мобильное приложение с полной функциональностью.

Ответить
Развернуть ветку
Андрей

Здравствуйте. Подскажите на каком русскоязычном сайте сейчас можно посмотреть как работает pwa? И спасибо за статью👍

Ответить
Развернуть ветку
Surf
Автор

Добрый день, Андрей! PWA есть, например, у Telegram и Aliexpress. На их примере можно посмотреть, как это работает.

Ответить
Развернуть ветку
Андрей

Спасибо

Ответить
Развернуть ветку
Искатель историй

Вот зашёл на сайт Aliexpress, открывается обычная мобильная версия в хроме

Ответить
Развернуть ветку
Please be patient ihave autism

Скачать приложение в настройках (возможно будет добавить на главный экран)

Ответить
Развернуть ветку
Surf
Автор

Вот тут можно подробней почитать про кейс Алиэкспресса - https://developers.google.com/web/showcase/2016/aliexpress

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sergey Krupskiy

Да ладно, все таки самое основное это Service Worker и как настроено у него кэширование. И второе это отдача HTML сразу без ожидания, заранее выбранных страниц сайта. Ну хотя это тоже работа SW. Без него PWA это ноль

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Kvalter

Pwa - это тупо качественная мобильная версия. «Установить на телефон» это вы имеете в виду «Добавить ярлык на домашний экран»?

Ответить
Развернуть ветку
Slava Pedak

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

Ответить
Развернуть ветку
Всвиторе

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Всвиторе

Я просто неправильно выразился. От сайта ожидают что это сайт и каким бы он крутым не был, сайт бесполезен без интернета. Смысл тратить ресурсы на PWA практически нет. Разве что магазинам типа OZON чтобы тупо дожать показатели охвата на четверть процента. Фишка с добавлением сайта на главный мобильный экран ничего не даёт. Можно в браузере просто не закрывать вкладку и на этом всё.

Ответить
Развернуть ветку
Kvalter

Все это может делать вебверсия. Запускается так же через браузер, так что все херня

Ответить
Развернуть ветку
Slava Pedak

ну и как веб версия загрузится без соединения с сервером? Ну вот нет интенета в данных момент и как она это сделает?

Ответить
Развернуть ветку
Kvalter

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

Ответить
Развернуть ветку
К М

23% это 53 миллиона? Подождите, всего получается 230 млн устройств при 144 млн населения? Это верные цифры вообще? У каждого второго гражданина по 2 смартфона?

Ответить
Развернуть ветку
Surf
Автор

Такие данные дает исследование Global Digital 2021: https://datareportal.com/reports/digital-2021-global-overview-report
Россия
"Население: 145,9 млн человек, прирост за год составил всего 20 тысяч (0,1%).
Мобильные устройства: 228,6 млн устройств (многие люди регистрируют на себя несколько SIM-карт). За год количество мобильных подключений в снизилось на 8,7 млн (-3,7%)."
Перевод можно посмотреть, например, вот тут - https://www.sostav.ru/blogs/245966/30220/?ysclid=l3e8k61k2n

Ответить
Развернуть ветку
Alexey Remizov

А сигналки в машинах, модемы и прочее выкинули? Или с ними считали

Ответить
Развернуть ветку
К М

ну у меня 8 сим-карт, 4 смартфона+ кнопочный телефон. Но это единичные случаи, не думаю что у 70 млн по два устройства. И 146 млн это же вместе со школьниками

Ответить
Развернуть ветку
Please be patient ihave autism

Вообще у некоторых их овер много

Ответить
Развернуть ветку
G. Ivan
Ответить
Развернуть ветку
Alexander Belousov

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

При этом времени на разработку качественной мобильной версии часто нужно не меньше чем на полноценное мобильное приложение.

Ответить
Развернуть ветку
Mihael Isaev
Ответить
Развернуть ветку
Антон Ефимов

Ну да. Заблокировали в Google Play, но мы будем пользоваться другой технологией, которую развивает... Google...
Логично.

Ответить
Развернуть ветку
Всвиторе
Ответить
Развернуть ветку
К М

Но которую не может заблокировать. Google же не отключит js на вашем сайте?

Ответить
Развернуть ветку
Антон Ефимов

Шут его знает какие бэкдоры могут быть оставлены.

Ответить
Развернуть ветку
К М

бэкдоры где могут быть оставлены? В языке программирования?

Ответить
Развернуть ветку
Антон Ефимов

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

Ответить
Развернуть ветку
К М

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

Ответить
Развернуть ветку
Арсений

Любое приложение на вью, реакт, ангуляр - это же pwa?

Ответить
Развернуть ветку
К М

Нет

Ответить
Развернуть ветку
Арсений

А, это single page application, перепутал. Но разница видимо в том, что добавляется service workers

Ответить
Развернуть ветку
Sergey Krupskiy

Ну и еще манифест с ссылками на иконки и прочее, чтобы его можно было добавлять как ярлык на экран смартфона. Но главное это Service Worker, но его нужно уметь правильно настраивать. Там есть нюансы.

Ответить
Развернуть ветку
Arni

Вопросик, кхм-кхм, гуманитарный (нелепый), но всё же:
Дизайнеру в любом случае необходимо возиться и с мобайлом, и с десктопом? Или для PWA достаточно сверстать десктопную версию, которая чудесным образом (по велению разработчиков) будет идеально вписываться в любой экран?

Ответить
Развернуть ветку
Artem Petrenkov

В таком варианте разработчикам придётся материться и самим разрабатывать дизайн мобильной версии :)

Ответить
Развернуть ветку
Surf
Автор

Обычно любой дизайн современного веб-приложения следует правилу mobile first, а в рамках Flutter-приложения, изначально разработчики мыслят рамками мобильного устройства, и уже опционально рассматривают адаптацию под разный форм фактор.

Ответить
Развернуть ветку
Mihael Isaev

А я как раз написал фреймворк для разработки pwa на swift https://github.com/swifweb

Ответить
Развернуть ветку
К М

А в чем преимущество перед использованием стандартного js?

Ответить
Развернуть ветку
Please be patient ihave autism

Меньшая производительность, необходимость знать свифт, и пиздец с кандидатами на рынке труда

Ответить
Развернуть ветку
Андрей Хохлов

Согласен

Ответить
Развернуть ветку
Pavel Raspaev

Не сможет

Ответить
Развернуть ветку
Surf
Автор

Да, все верно, но как временное решение они могут иметь место.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
44 комментария
Раскрывать всегда