Сейчас люди практически не расстаются со своими смартфонами, поэтому мобильные приложения стали приоритетным способом общения компаний со своими потребителями. Единственный недостаток: дорогая и длительная разработка. Не каждый бизнес готов к этому. Впрочем, уже существует достойная замена: технология PWA, к разработке которой компания Microsoft приступила в далёком 2000 году. 

PWA начало набирать популярность в 2015 году, когда Google стал поддерживать элементы, необходимые для проектирования Progressive Web App. Некоторые считают, что в перспективе обычные мобильные приложения вовсе исчезнут. Гибриды веб-сайтов уже активно используются, поскольку они убыстряют разработку и требуют меньше затрат. При этом все данные, расположенные на веб-сайте компании, отображаются в привычном пользователям интерфейсе мобильного приложения. Различий практически нет, клиенты их не замечают.

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

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

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

Прогрессивные веб-приложения могут работать в автономном режиме: согласно заданному расписанию они отправляют пользователям push-уведомления. PWA чаще всего устанавливаются с сайта компании, хотя в последнее время появились целые каталоги: appsco.pe, storepwa.ru, findpwa.com.

Progressive Web Apps упрощают взаимодействие с клиентами и способствуют продвижению продуктов и услуг, в том числе через PWA Push notifications. Компании, которые приняли на вооружение PWA, обладают значительными конкурентными преимуществами. Многие бренды заинтересовались этой технологией, особенно те, чьи клиенты часто совершают повторные покупки, например, магазины, парикмахерские, клининговые компании, автосалоны, рестораны и службы доставки еды.

Преимущества и недостатки прогрессивных приложений

К преимуществам PWA приложений следует отнести следующие:

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

• Скорость создания. Разработка PWA-версии сайта занимает не так много времени. Существуют целые конструкторы, позволяющие собрать PWA быстро. Например, Microsoft утверждает, что объект можно создать за обеденный перерыв с помощью инструмента PWABuilder.

• Лёгкость установки. PWA в большинстве случаев реально установить с официального сайта. Это устраняет необходимость адаптировать PWA к требованиям магазина, ждать модерации и беспокоиться о риске удаления.

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

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

• Не мешает пользователям. PWA-приложения обновляются автоматически и весят совсем немного, по сравнению с классическими мобильными приложениями (менее 3 мегабайт). Пользователям не нужно занимать лишнюю память на своих девайсах.

• Время загрузки. В PWA всё происходит быстрее, чем в ситуации с обычными веб-сайтами. Кроме того, прогрессивные приложения могут работать офлайн (но с ограничениями).

Конечно, существуют и недостатки:

• Ограниченный функционал. PWA-приложения не могут полностью использовать аппаратные возможности девайса, на котором они установлены, а также не могут использовать преимущества всех технологий. Например, в случае с iOS нельзя использовать Face ID и Bluetooth. На Apple отправка push-сообщений проблематична.

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

• Высокий расход заряда батареи. PWA кодируются на JavaScript, языке программирования, который потребляет больше системных ресурсов, чем нативные языки (типа Java или Swift).

• Затраты на продвижение. Люди привыкли загружать приложения из App Store (iOS) или Google Play (Android), а не скачивать их с официальных веб-сайтов. Получается, что версия PWA требует вложений в маркетинговую кампанию по продвижению. Как альтернатива, можно пройти модерацию в каталоге, что не всегда просто.

  Тем не менее некоторым компаниям удаётся загружать своё PWA в App Store и Google Play. Поэтому вскоре этот минус канет в небытие.

Истории успеха брендов, использующих PWA-приложения

Такие известные бренды, как Telegram, Youtube, TikTok, Aviasales, Tinder, Pinterest, Forbes, AliExpress и Uber давно пользуются преимуществами PWA.

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

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

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

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

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

Как создать PWA-приложение

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

Создание Progressive Web Apps происходит с помощью Web App Manifest и Service Worker.

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

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

Для разработки Progressive Web Apps также используются и другие ключевые элементы:

• Цифровые SSL-сертификаты подтверждают подлинность веб-сайта. Они требуются для шифрованных HTTPS-соединений и обеспечивают безопасность.

• Оболочка приложения, Application Shell, шаблон, в который загружаются данные со страниц веб-сайта.

Заключение

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

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