«PWA приложения»: Волшебная таблетка в эпоху санкций? 💊

ВСТУПЛЕНИЕ

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

Когда клиент приходит с запросом разработки, начитавшись всего подряд на просторах интернета - наша задача как первоклассных специалистов предельно простая и укладывается в 3️⃣ шага:

• рассказать какие есть подходы;
• пояснить что есть каждый подход со стороны определений и примеров;
• разложить по полочкам плюсы и минусы каждого подхода…

Дак вот, если касаться мира мобильной и веб разработки, всего есть 4️⃣ разных инструмента (подхода) к вашему будущему приложению:

• веб-приложение;
• прогрессивное веб-приложение (PWA);
• кроссплатформенное мобильное приложение;
• нативное мобильное приложение

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

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

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

Итак, а мы едем дальше... И начнем сравнение PWA с обычными веб-приложениями...👇🏻

1️⃣ PWA vs Веб-приложения

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

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

Поэтому многие компании стали создавать прогрессивные веб-приложения для замены нативным или в качестве дополнительного канала продаж.

PWA используют:

• ритейлеры -> спортмастер, DNS; Тинькофф банк; Альфа-банк, Сбер и другие банки
• онлайн-сервисы -> aviasales.ru, ivi.ru и соцсеть «В Контакте».

Мобильные веб-приложения создаются с помощью технологий для реализации frontend: HTML, CSS, JavaScript — и backend: Ruby, PHP, Python и т. д.
С точки же зрения backend реализация не отличается от обычного веб-сайта. Любой мобильный веб можно превратить в PWA, если доработать под определённую цель. И это играет на руку бизнесу, который некогда развивал мобильный веб, но забросил. Теперь из мобильной версии сайта можно сделать PWA и запустить новый канал продаж.

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

• React;
• Flutter;
• Angular;
• Vue;
• Polymer

6️⃣ отличий PWA от веб-версии сайта

• Скорость загрузки У PWA она существенно выше, чем у мобильной версии сайта. Это связано с тем, что все необходимые данные загружаются в смартфон и далее не зависят от скорости интернета. Новые фичи и обновления добавляются командой, которая поддерживает приложение.
• Независимость от браузеров PWA работает внутри системы через webview и они всегда выглядят одинаково, независимо от того, какие браузеры установлены у пользователя.
• Доступность в офлайне
  Сайт не может работать без интернета (мобильного или Wi-Fi), в отличие от PWA. При подключении к интернету, прогрессивные веб-приложения загружают и сохраняют необходимые файлы и дальше могут работать без доступа к сети. Но обратная сторона медали - велик риск хищения таких данных с устройства пользователя.
• UI\UX интерфейс В разработке PWA есть все инструменты для реализации интерфейса, довольно близкого к нативному.
• Добавления иконки на главный экран: PWA предоставляет такую возможность, облегчая поиск сервиса. В мобильную версию сайта пользователь может зайти через браузер или создав ярлык на экране. В случае с мобильной версией сайта, ярлык откроется в браузере, а PWA — отдельным приложением.
• Уведомления На сайте можно реализовать отправку браузерных уведомлений — web push. Они отображаются на экране мобильного устройства, но отправляет их не приложение, а браузер. Для отправки уведомлений пользователь должен дать разрешение, когда заходит на сайт. У PWA тоже есть возможность настроить уведомления, но пока есть трудности с реализацией на iOS. Однако Apple анонсировали, что проблема с пушами скоро решится.

2️⃣ PWA vs Кастомные приложения

Почему на PWA приложения растёт спрос в 2022-2024 годах?
Многие приложения российских банков, такие как Сбербанк, Альфа-банк, ВТБ, ПСБ, Tinkoff и другие, из-за санкций оказались удалены из магазинов. Бизнес находится в поиске альтернативных решений, и одно из них — забытая некогда технология Progressive Web Applications (PWA), или прогрессивные веб-приложения.

Стоит также отметить, что для прогрессивного приложения характерны:

• Использование Service Worker — прокси-сервера, который управляет сетевым запросом от приложения и даёт возможность кэширования и запоминания информации, отвечает за фоновую синхронизацию, позволяет присылать push-уведомления для полноценной коммуникации с клиентами.
• Работает со своими ресурсами с помощью HTTPS через браузер — так же, как нативное приложение обращается через файловую систему. Браузер выступает в роли виртуальной машины, которая запускает PWA приложение.
• Web App Manifest — текстовый json-файл, который добавляется в код страницы сайта. Он определяет, как будет отображаться приложение через браузер, то есть все визуальные элементы.

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

➕ДОСТОИНСТВА

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

➖ НЕДОСТАТКИ

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

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

📈 А ЧТО ПО КОНВЕРСИИ!?

В сфере E-commerce и FinTech важно помнить про коэффициент конверсии (conversion rate), так как это один из главных показателей успешности бизнеса. Вот и давайте посмотрим, как у PWA этот показатель.

В целом, PWA повышают конверсию сервиса так как:

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

🖥️ А ЕСТЬ УЖЕ ЗАПУЩЕННЫЕ ПРОЕКТЫ!?

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

🔺 Сбербанк использует 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%.