Что такое PWA приложения и почему это хороший вариант при ограниченном бюджете бизнеса

Мобильная разработка дорожает. Несмотря на активное развитие технологий ИИ и автоматизацию многих задач разработки с помощью нейросетей, создать свое мобильное приложение все еще требует от бизнеса существенных вложений. И не только денег, но и времени. И совсем не факт, что клиенты в итоге ваше приложение установят. Что делать? Три буквы: PWA.

Progressive Web Applications или PWA-приложения — это доступная альтернатива родным (т.н. «нативным») мобильным приложениям. Сегодня рассказываю, что такое PWA приложение простыми словами, в чем его преимущества для бизнеса (особенно при ограниченном бюджете), и в каких сферах оптимально использовать это решение.

Итак, простыми словами: PWA-приложение — это веб-приложение, которое выглядит и ощущается пользователем как обычное мобильное приложение на телефоне.

Пользователь «устанавливает» его на смартфон в один клик, без App Store и Google Play. Обратите внимание на кавычки: реальной установки не требуется, скачивать большие файлы не нужно. По сути на экране смартфона просто появляется ярлык на веб-приложение. Собственно, отсюда и термин: прогрессивное веб-приложение или PWA.

Такие приложения загружаются быстрее обычных сайтов, могут работать офлайн благодаря кэшированию и поддерживают push-уведомления — то есть по цене «вебки» бизнес получает все преимущества полноценного нативного приложения. Но об этом подробно расскажу ниже.

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

И сразу адресую ключевое возражение. Дело в том, что у технологии PWA сложилась репутация легковесного инструмента, неподходящего для «настоящего» бизнеса. Это заблуждение!

С позиции бизнеса PWA-приложение обладает всеми преимуществами нативных iOS или Android приложений: увеличивает вовлеченность, помогает продать больше текущим клиентам и вернуть «уснувших». А с позиции пользователя разницы между нативным приложением и Progressive Web App и вовсе почти нет. Просто PWA быстрее работает и ставится буквально в два клика.

Безусловно, чисто технически отличия есть и эти отличия накладывают определенные ограничения. Об этом мы еще поговорим чуть ниже. Но с ходу отбрасывать технологию PWA как не серьезную — ошибка. Чтобы не быть голословным, приведу несколько примеров, а затем подытожим.

Именно в этой сфере разработка PWA более чем оправдана. Примеры PWA-приложений в ритейле лишь подтверждают этот тезис.

• AliExpress. Топовый маркетплейс создал свое PWA-приложение еще в нулевых и немедленно получил положительные результаты: рост конверсии в два раза, увеличение продолжительности сеанса, больший охват.
• Lancôme. Французский бренд косметики использует PWA не только для онлайн-продаж, но и для функций поиска косметики и виртуальной примерки. Конверсия ожидаемо выросла.
• Agent Provocateur. PWA-приложение британского бренда премиального нижнего белья объединяет каталог товаров, онлайн-магазин и программу лояльности.
• 7 цветов. Российская оптовая биржа цветов выбрала именно PWA в качестве инструмента для повышения продаж. А мы в Siberian.pro с удовольствием это решение реализовали.
• Zenith. Авторитетный бренд швейцарских часов обзавелся PWA-приложением и зафиксировал 20% рост выручки.

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

Вот несколько примеров из этой сферы.

• Starbucks. У знаменитого бренда реализовано PWA-решение для онлайн-заказов: меню, кастомизация напитков/еды, оформление заказа, возможность работать на нестабильном интернет-соединении (что весьма актуально и у нас). Результат: рост онлайн-заказов в два раза плюс более высокий средний чек.
• Just Eat. Сервис доставки еды в Европе. PWA-приложение позволяет делать заказ, отслеживать его статус и пользоваться преимуществами программы лояльности.
• Ordering.co. А здесь у нас целая платформа для приема разнообразных заказов, которую предлагается внедрять владельцам кафе и ресторанов. Платформа, по сути, и есть PWA.

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

Вот несколько примеров PWA-приложений для бизнеса:

• Microsoft Teams можно установить как PWA-приложение.
• Slack. Корпоративный мессенджер работает в браузере, но есть вариант запуска в виде отдельного PWA-приложения.
• Horilla — это HR-приложение для автоматизации найма, онбординга и управления персоналом. Формат PWA позволяет быстро установить решение на компьютер с любой OS или на смартфон.
• Lemonade. Страховая компания из США, о которой я уже несколько раз рассказывал, тоже предлагает клиентам легкий фронтенд на основе PWA, тогда как все сложные страховые расчеты спрятаны «под капотом» бэкенда. Результатом стало увеличение числа продлений полисов на 20%.

Альфа-Страхование, кстати, тоже предлагает PWA.

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

Примеры:

• Uber. Для заказа такси размер приложения имеет первостепенное значение. Мало ли какая там у клиента связь? PWA-приложение Uber быстро грузится даже на 2G. В полевых условиях — отличный вариант. При этом все функции на месте: поиск и заказ поездки, просмотр маршрута и ETA на интерактивной карте.
• Trivago — это сервис бронирования отелей. После запуска PWA вовлеченность пользователей выросла на 97%.
• Clinic.co — британский сервис телемедицины на базе PWA-приложения. Можно резервировать время консультаций, общаться в чате со специалистами, записывать и отправлять видео. Если вы задумались о разработке медицинского приложения, PWA — это отличный стартовый вариант для 99% клиник.

Как видите, PWA приложения востребованы в самых разных сферах. В e-commerce это ускорение загрузки и как следствие увеличение количества заказов. В фудтехе приложение уменьшит нагрузку на персонал и упростит заказ блюд. В сфере услуг PWA существенно снижает барьер вхождения и облегчает бронирование.

Давайте чуть подробнее разберем преимущества PWA.

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

Разработка PWA-приложений как правило обходится бизнесу дешевле, чем создание аналогичного по функциям native-приложения. Причина в том, что PWA — это один веб-код вместо двух отдельных стеков под iOS и Android. Как следствие, типичная экономия составляет от 30 до 60%. Поддержка PWA тоже обойдется дешевле.

Потому что не нужно ничего скачивать в сторах. Простая кнопка на сайте, два клика — и приложение добавлено на главный экран смартфона. Все! Размер приложения крошечный (например, Uber добился размера около 50 КБ), работает быстро даже в медленных сетях и на старых телефонах.

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

Одно и то же PWA покрывает сразу все платформы: десктоп, iOS, Android. Есть и неочевидное следствие: PWA-страницы индексируются поисковыми системами и даже могут попадать в ИИ-рекомендации!

Типовые PWA-приложения, не содержащие сложных вычислений (3D-графика, VR/AR), работают быстро и плавно. Интерфейс привычен пользователю. Кроме того, прогрессивные веб-приложения могут работать в офлайн-режиме. Данные в этом случае синхронизируются при появлении связи. Актуальненько!

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

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

1. Service Worker. Это сердце PWA. По сути, небольшой скрипт в браузере, который работает в фоне. Он отвечает за кэширование страниц и данных, поэтому приложение открывается мгновенно, даже если интернет слабый или временно пропал. Пользователь получает быстрый стабильный интерфейс, а бизнес теряет меньше заказов из-за долгой загрузки.
2. Manifest.json. Чтобы сделать сайт похожим на приложение, в файле манифеста прописываются технические нюансы: ориентация экрана, внешний вид окна и элементов в нем, иконка и прочие UX/UI особенности. Браузер через service worker читает манифест и применяет его настройки к странице. Тем самым превращая ее в полноценное приложение.
3. Акцент на офлайн работу. PWA умеют загружать контент заранее, поэтому базовый функционал остается доступным даже в офлайн-режиме: каталог товаров, меню заведения, корзина, вот это все. Это особенно полезно, если клиенты часто бывают в местах с нестабильной связью — например, в торговых центрах, на улице или в дороге.

Вот простой чек-лист выбора PWA-приложения. Если набрали 3-4 пункта — вам стоит присмотреться к PWA. Ответили «да» на 5-6 вопросов? PWA точно вам подойдет.

• Ваше приложение должно работать на iOS, Android и компьютерах, но бюджет на разработку ограничен.
• Установка приложения из магазина по каким-то причинам не подходит: корпоративное приложение, ограничения со стороны сторов или клиенты совершают покупки лишь «разово» и поэтому не хотят что-то устанавливать.
• Вам важно быстро запустить MVP, протестировать идею или сезонную акцию.
• Нужна возможность отправлять push-уведомления без сложной интеграции.
• У компании уже есть работающий сайт с каталогом, корзиной и другой функциональностью, и вы хотите расширить его до приложения, а не делать продукт с нуля.
• Ваши пользователи могут находиться в местах с нестабильным интернетом, а офлайн-работа будет преимуществом.
• Вы хотите ускорить вовлечение клиента и сократить путь от открытия сайта до действия — в 1–2 клика, без промежуточных загрузок.
• Вы хотите экономить на поддержке: одно приложение — для всех платформ, обновления — без публикации в магазинах.

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

Более того, для многих сфер PWA-приложение не подходит. Каких? Сейчас разберем.

Иногда клиенты сами приходят к нам за разработкой PWA-приложения, а мы вынуждены отказать или, если бюджет заказчика позволяет, разрабатываем вместо этого нативное приложение для iOS и Android. Почему?

Дело в том, что кажущаяся простота онлайн-магазина может скрывать множество технологий, которые на базе PWA реализуются сложно или вовсе невозможны. Как правило, это различные функции, связанные с аппаратной частью: NFC, Bluetooth, BLE, интенсивная работа с файлами на устройстве, интеграции с OS или другими приложениями.

Следовательно, вашему бизнесу нужно нативное приложение, а не PWA, если:

• предполагается активное взаимодействие с «железом» телефона (NFC, биометрия, геолокация);
• нужна интеграция с IoT (носимые устройства, умный дом);
• приложение будет активно работать в фоне, в том числе с выключенным экраном;
• возможна активная работа с медиа (загрузка большого числа фото и видео). PWA плохо справляются с кешированием, поэтому такой вариант не подойдет, например, для приложения страховых агентов, работающих «в полях» на оценке ущерба.
• есть высокие требования к безопасности данных приложения. Например, если это корпоративный инструмент со строгими политиками безопасности в отношении пользователей;
• приложение включает «тяжелую» графику, работу с графическим ускорителем или VR-функциональность. Игры — это не про PWA;
• интенсивная работа в офлайне. Хотя PWA отлично может работать без интернета, кэшировать данные за месяц ему не под силу. Если сценарий использования подразумевает длительные периоды без интернета, то нужно выбрать нативное приложение;
• банкинг, финансы — сразу нет. PWA не подходит для критичных задач, где важны точная синхронизация, безопасность и недопустимы даже кратковременные сбои;
• вам нужна сложная экосистема, суперапп. В этом случае приложение должно быть нативным, чтобы наилучшим образом соответствовать гайдлайнам операционной системы.

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