Что такое PWA приложения: успешные примеры

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

Снова о технологии заговорили в 2015-м, когда корпорация Google стала поддерживать нужные для создания PWA компоненты. Есть мнения, что в будущем веб-приложения заменят классические. Уже сегодня гибридный формат сайта и привычного app используют, чтобы ускорить разработку и снизить её стоимость. 

Узнайте подробнее о PWA, плюсах и минусах таких приложений, а также об особенностях их создания.

Что такое PWA приложения

Progressive Web App (PWA)  — это адаптация сайта компании под мобильное устройство в виде приложения. Визуально это тот же значок и привычный интерфейс, но принцип работы другой.

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

Веб-приложения при необходимости работают автономно, присылают Push уведомления клиентам, что важно для постоянной коммуникации бренда с аудиторией. Устанавливаются обычно через сайт компании, но появились уже и каталоги с Progressive Web Apps: appsco.pe, storepwa.ru, findpwa.com и другие. 

Web приложения ускоряют взаимодействие с пользователями, создают конкурентные преимущества для бренда, продвигают его товары и услуги через PWA Push notifications. Поэтому технологию используют разные бизнесы, особенно те, где клиенты делают покупки и заказывают услуги регулярно: магазины, салоны красоты, клининг, автосалоны, рестораны, доставка еды, СМИ и так далее. Технология PWA «спасает» компании во время массовых блокировок российских приложений в официальных магазинах. 

Плюсы и минусы PWA приложений

Плюсы

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

1. Возможность установки с сайта, а не из специального каталога. Так PWA приложение не нужно подгонять под требования стора, ждать одобрения и бояться риска удаления.

1. Повышение лояльности и вовлечённости пользователей в контент бренда, которые приводят к повышению продаж и среднего чека. Напоминание клиентам об акциях и новостях бренда происходит через PWA notifications — привычные Push уведомления, которые сообщают об акциях бренда без запуска рекламы.

1. Индексация приложения поисковыми системами. Так как PWA — это как бы продвинутая версия сайта, для неё работают правила SEO-оптимизации. Эта особенность даёт дополнительный трафик.

1. Автоматические обновления и меньший вес (не более 3 мегабайт), чем у  мобильного приложения. Пользователю не придётся занимать лишнюю память устройства. 

1. Быстрая скорость работы по сравнению с сайтом и возможность перейти в  оффлайн-режим (но с ограничениями).

Минусы

1. У PWA приложений не полный доступ к аппаратным возможностям устройств, на которые они устанавливаются, нет возможности использовать все технологии. Например, для IOS не получится воспользоваться Face ID и Bluetooth. Apple очень медленно адаптируется под веб-приложения, поэтому на их устройствах есть проблема с отправкой Push.

1. Зависимость от браузера. Возможны ограничения из-за использования устаревших версий операционных систем, где нельзя установить обновления. Также сами браузеры не всегда обеспечивают полный функционал веб-приложений.

1. Большой расход батареи. PWA кодят на JavaScript — языке программирования, который тратит больше ресурсов системы, чем Java (на нём пишут обычные приложения).

1. Меньшая виральность. Пользователи привыкли скачивать приложения из App Store (IOS) и Google Play (Android), а не искать их на сайте брендов. При создании только PWA версии придётся вложиться в проведение маркетинговой кампании по продвижению. Или всё же пройти через модерацию каталогов приложений, которая не всегда простая и быстрая.  

Успешные кейсы работы компаний с PWA приложениями

PWA примеры есть у известных брендов: Telegram, Youtube, TikTok, Aviasales, Tinder, Pinterest, Forbes, AliExpress, Uber и других. Некоторые из них значительно улучшили пользовательский опыт и увеличили доход.

Tinder запустили веб-версию приложения, которая занимает всего 2,8 мегабайт памяти по сравнению с приложением на android (30 мегабайт). Скорость загрузки удалось уменьшить с 11,91 до 4,69 секунд, что улучшило user experience. 

Pinterest также смог сократить время загрузки интерфейса с 23 до 5,6 секунд. На 40% увеличилось время, которое пользователи проводят в сервисе, а доход от рекламы — на 44%. Значительно (60%) повысилось вовлечение в контент. 

Улучшить пользовательский опыт с PWA получилось у Forbes, приложение которого часто называли громоздким. Теперь люди проводят на 40% больше времени за чтением статей издания и просматривают на 15% больше контента. Загружаться страницы также стали быстрее. Если раньше ожидание длилось в среднем 6,5 секунд, то в новой версии — всего 2,5. 

Прогрессивное веб-приложение увеличило коэффициент конверсии AliExpress на 104%. За один сеанс пользователи стали посещать в два раза больше страниц и тратить на это 74% времени. 

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

Что нужно для создания PWA приложения

Progressive Web Apps доступны во всех операционных системах, но изначально нужен сайт, который преобразуется в прогрессивную версию с технологиями JavaScript, HTML и CSS. Веб-приложение отображается через WebView — компонент системы, который открывает интернет-страницы в приложении. Для работы PWA нужны браузеры: Safari (IOS) и Chrome (Android).

Чтобы создать веб-приложение, потребуются Web App Manifest и Service Worker.

Service Worker — скрипт, который принимает информацию (запросы) от браузера через безопасное HTTPS соединение. Компонент открывает браузер фоново, даже если страница не активна. Благодаря Service Worker пользователю отправляют Push уведомления, а приложение без участия юзера синхронизируется с сайтом. Обновления происходят автоматически, также доступен офлайн-режим. 

Web App Manifest — манифест в виде файла manifest.json добавляется в код страницы сайта и передаёт информацию браузеру о том, как должно отображаться приложение на устройстве. Определяет имя, ярлык, заставку, тему приложения и другие элементы. Манифест сообщает, какие данные остаются неизменными, а какие обновляются.   

Другие важные элементы для разработки веб-приложения:

1. Цифровой SSL-сертификат подтверждает подлинность сайта. Нужен для шифрованного соединения HTTPS соединения, которое обеспечивает безопасность. 
2. Application Shell — оболочка приложения или шаблон, в который загружаются данные с веб-страниц сайта.

Резюме

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

Веб-приложение создаётся с компонентами Service Worker и Web App Manifest, также придётся получить SSL-сертификат, чтобы сделать соединение безопасным и использовать Application Shell. 

PWA приложения быстро развиваются и в перспективе могут заменить привычные apps. 

Подписывайтесь на наш телеграм-канал. Там вы найдёте актуальные новости в области digital-маркетинга, полезные статьи и интересные исследования. Будьте в теме вместе с нами :)