Что только ни делают современные компании, чтобы угодить пользователю, уже изрядно избалованному широчайшим ассортиментом всего нужного и ненужного, возможностью купить любой товар в любое время в любом месте и оплатить его любым способом. Но пришло время идти дальше, поскольку никого уже не удивишь наличием сайта и приложения. Это уже must-have для компаний, работающих в сегменте e-commerce, где поддержание постоянной связи с пользователем становится одним из залогов успеха. Чтобы максимально облегчить это взаимодействие и свести к минимуму все факторы, мешающие компаниям оставаться на связи со своими клиентами 24/7, была разработана концепция прогрессивных веб-приложений (progressive web apps). Давайте разберемся, в чем суть этой технологии и как ее очевидные преимущества могут стать такими же очевидными выгодами для бизнеса.
Progressive web apps: что это?
Progressive web apps соединили в себе лучшие черты сайта и мобильного приложения. На практике это означает, что сайт может взаимодействовать с пользователями так же, как и приложение, и подключение к интернету при этом не обязательно.
Процесс установки такого приложения максимально прост и возможен в один клик напрямую из браузера.
Таким образом, отвечая на вопрос что это - progressive web apps, можно сказать, что это новая технология взаимодействия с целевой аудиторией, которая требует минимальных усилий от пользователя. Согласно статистическим данным большинство пользователей смартфонов не загружают ни одного приложения в течение месяца, а progressive web apps могут быть установлены мгновенно, поддерживают автоматическое обновление, работа с сайтом возможна в режиме офлайн, а возможность получать push-уведомления делает работу с таким решением еще более удобной.
Пример PWA: от теории к практике
Теория, безусловно, важна, но, как правило, любому потенциальному заказчику важно сначала “потрогать” каждое решение и понять принцип его действия изнутри.
Приведем наиболее успешные примеры PWA приложений. Вы наверняка слышали о них всех, а сайтами половины из них пользовались как минимум несколько раз. Итак, вот компании, которые уже внедрили progressive web app PWA в свои бизнес-процессы.
Немного статистики о PWA
- Twitter. Отличие решения, разработанного компанией, в том, что их PWA приложение занимает в три раза меньше места, чем мобильное приложение для iOS и Android .
- Trivago сделали основной акцент на push-уведомления и теперь возвращают своих пользователей с большим, на 150%, успехом, стимулируя их совершить целевое действие.
- Treebo добились четырехкратного увеличения конверсии.
- Прибыли Best Western River North Hotel увеличились на 300%.
- Время пребывания пользователей OpenSooq в PWA увеличилось на 25% по сравнению с сайтом, что дало возможность получить на 260% больше лидов.
- Tinder решили сыграть на скорости загрузки, уменьшив ее с 12 до 4, 69 сек с помощью PWA.
- Pinterest также поддержал идею о переходе на progressive web apps и создал свой новый сайт по типу такого приложения, благодаря чему вовлечение пользователей возросло на 60%.
- С помощью Forbes PWA медиа-ресурс получил более 12% новых читателей.
- Debenhams Online Retail приняли решение использовать progressive web apps, чтобы уменьшить время, нужное пользователю для совершения целевого действия. На данный момент этот показатель уменьшился вдвое, и в компании полагают, что это не предел.
- Washington Post PWA. Как показывает опыт этой компании, progressive web app показывает на 88% лучшие результаты по сравнению с mobile сайтом.
- Ali Express. Даже будучи довольно успешными на мировом ритейл рынке, Ali Express также создали PWA решение и на 74% увеличили время, которое проводит на сайте среднестатистический пользователь..
Технологии, нашедшие применение в PWA
Ключевыми показателями, которые должны быть реализованы в progressive web apps, являются надежность, быстрота и привлекательность. Давайте посмотрим, как разработчики наделяют прогрессивные решения этими качествами.
Service Worker. Эта технология отвечает за то, чтобы приложение работало быстро даже в условиях медленного интернет-соединения. Являясь промежуточным слоем между фронт- и бэкендом приложения, Service Worker обеспечивает плавный переход из браузера. На деле же это код, написанный на языке javascript.
HTTPS. Все ресурсы сайта передаются по этому протоколу, что означает надежность передачи данных.
Application Shell. Это виртуальная оболочка приложения, которая загружается при его запуске, а далее динамическая информация загружается на нее из сети.
Web App manifest. Это JSON файл, который задает параметры приложения, его внешний вид и т.д. Это то, как реализуется показатель привлекательности.
Push Notifications. Эта технология нашла свое применение и отдельно от PWA. Сейчас все больше сайтов предлагают пользователю разрешить получение уведомлений и прогрессивные приложения поддерживают эту идею.
Progressive web apps: очевидные выгоды для бизнеса
- Вы автоматически попадаете в зону более низкой конкуренции. Когда вы создаете мобильное приложение для своего бизнеса, вы автоматически вступаете в схватку с двумя миллионами приложений, уже созданных iOS и Android. Progressive web apps поддерживают возможность переходов из поисковой выдачи или страниц социальных сетей. Шансы быть замеченными возрастают в разы.
- Предложение об установке progressive web apps поступает пользователю после второго посещения сайта.
- Мгновенная установка и минимум занимаемого места. На практике это означает большее количество установок и, как следствие, пользователей, поскольку многие владельцы смартфонов отказываются от установки приложения именно из-за медленной скорости загрузки или неразумно большого занимаемого пространства.
- Progressive web apps работают на любой платформе. Поэтому больше не нужно инвестировать в создание решений отдельно для каждой платформы. Для бизнеса это не только экономия, но и максимально широкий охват пользователей независимо от используемых ими устройств.
- Это решение, которое подходит для любого типа бизнеса. Если раньше аналитики ломали себе головы над тем, стоит ли создавать мобильное приложение и на какой платформе сделать акцент, то сейчас все стало проще. Прогрессивные решения работают независимо от платформы, скорости интернета пользователя, используемого им устройства. И даже ниша, в которой работает бизнес, уже не так важна, поскольку progressive web apps могут быть одинаково успешно реализованы и для ритейл бизнеса, и для медиа-ресурсов, социальных сетей и развлечений.
Очевидные преимущества в процессе разработки progressive web apps
- Практический опыт разработчиков показывает, что создание PWA менее трудоемкий, чем даже создание обычного сайта, процесс.
- Единый код - нет необходимости создавать API c поддержкой обратной совместимости.
- PWA может быть запущено на абсолютно любом устройстве - нет необходимости создавать мобильные версии или бороться за адаптивность.
Выше мы привели ряд успешных примеров, но все-таки отметим, что progressive web apps относительно новая технология ( и в этом тоже ее преимущество). Пока что большинство приложений все равно будут разрабатываться для App Store и Play Market.
Подход Woxapp: максимально прогрессивные решения
Разрабатывая прогрессивные приложения, мы исходим из понимания того, что это решение должно одинаково адекватно работать на всех операционных системах. Наша компания уже больше года считает прогрессивные приложения стандартом в разработке, и это позволило нам получить четкое понимание принципов проектирования пользовательского интерфейса. Однако есть и сложности, которые мы успешно преодолеваем.
1. На старте разработки проекта мы прорабатываем Data flow системы и определяем, какие данные и на какой срок кэшировать. Это нужно не только для стабильной работы, но и для экономии трафика пользователя. Нужно понимать также, что кэширование или получение слишком больших объемов данных сразу может приводить к падению вкладки в браузере, так как в каждой ОС объем выделяемой под вкладку памяти ограничен.
2. На этапе отладки приложения главная трудность состоит в том, что операционные системы iOS и Android накладывают свои ограничения и по-разному интерпретируют объекты.
Но поскольку мы заранее “знаем в лицо” проблемы, с которыми нам предстоит столкнуться в процессе разработки, то разрабатываем каждый элемент с их учетом, что в дальнейшем позволяет нам сократить время и ресурсы на решение этих проблем.
В процессе разработки нами используются следующие технологии:
- Angular.js - фреймворк, созданный специально для разработки адаптивных приложений и динамических веб-сайтов.
- TypeScript - язык программирования
- Service Worker API - технология, обеспечивающая трансформацию сайта в прогрессивное приложение.
- SaSS - инструмент для создания стилей веб-страниц.
- HTML5/CSS3 - платформа для создания веб-приложений / инструмент описания внешнего вида веб-страниц.
К вопросу о стоимости
Пользовательский интерфейс приложения может быть индивидуальным, однако, разрабатывая front-end часть, нужно максимально приблизиться к интерфейсу, принятому на мобильных устройствах. На практике это означает, что верстка должна быть создана практически с нуля, как правило основываясь на material дизайне.
Поэтому стоимость проекта будет определяться исходя из:
- сложности дизайна,
- суммарного времени верстки,
- количества реализуемых фич.
Итоги
На данный момент в сегменте электронной коммерции соотношение progressive web apps составляет 40 из 100 приложений. Значит, есть довольно перспективная возможность привлечь максимум целевой аудитории и сделать ее взаимодействие с вашей компанией максимально эффективным. Сейчас мы наблюдаем только начало внедрения этих технологий в бизнес, но их преимущества уже очевидны. Поэтому те, кто инвестируют в них сегодня, останутся на одной волне со своими клиентами и завтра, и послезавтра.
