4 примера отличных прогрессивных веб-приложений
Приготовьтесь к здоровой дозе ежедневного вдохновения и изучите 8 удивительных прогрессивных веб-приложений - 4 приложения, которые доказывают, что PWA готовы к массовому внедрению среди потребителей!
Создание наилучшего веб-опыта, особенно для мобильных пользователей, не только очень важно, но и критически важно, если ваш веб-сайт или интернет-магазин хочет выжить в ближайшие годы - это также причина, по которой вам следует подумать об инвестировании в прогрессивные веб-приложения (PWA).
Что такое прогрессивное веб-приложение?
Прогрессивные веб-приложения - это веб-сайты, которые выглядят, работают и имеют те же возможности, что и собственные приложения. Они могут предлагать полноценные нативные приложения, такие как автономные режимы, push-уведомления, доступные с домашнего экрана и т. Д., Но без раздражающего процесса прохождения через магазин приложений, установки и т. Д.
PWA предоставляет полный набор функций и возможностей нативного приложения прямо из браузера.
Почему вам следует заботиться о прогрессивных веб-приложениях?
Progress Web Apps доказали, что успешно помогают предприятиям увеличивать конверсию, продолжительность сеансов, количество посещений страниц, вовлеченность пользователей и конечные результаты.
Они являются лучшим вариантом для предприятий, которые стремятся к активному взаимодействию с мобильными пользователями и обеспечивают лучший пользовательский интерфейс, но без больших вложений, необходимых для нативных мобильных приложений.
Другие преимущества включают:
- Высокая производительность
- Супер быстрое время загрузки
- Привлечение пользовательского опыта
- Push-уведомления на мобильных устройствах
- Автономные режимы
- Устанавливается на главном экране (пропуская магазин приложений)
- Меньше использования данных
- И многое другое!
Более подробное описание PWA можно найти здесь.
Примеры прогрессивных веб-приложений
1. Trivago
Как одна из ведущих поисковых систем в мире, trivago имеет долгую историю инноваций. Основанная в Германии в 2005 году, бренд с тех пор вырос до более чем 1000 сотрудников.
Когда trivago впервые узнали о прогрессивных веб-приложениях, их сначала отговорили от использования этой технологии из-за предполагаемой неспособности проводить эффективные A / B-тесты для пользователей с прерванным мобильным подключением. Однако с разработкой API фоновой синхронизации эта проблема была решена, и небольшая группа разработчиков вместе с дизайнером начала работу над реализацией первых частей функциональности PWA.
Вместо того, чтобы создать полный набор функций в одном выпуске, Trivago в первую очередь сосредоточилась на автономном доступе, push-уведомлениях и добавлении на рабочий стол, полагая, что эти функции будут наиболее ценными для их пользователей.
Веб-сайт Trivago, созданный на основе PWA, теперь доступен на 33 языках в 55 странах. Освоение новой функциональности было впечатляющим: более полумиллиона человек добавили сайт trivago на свой рабочий стол. Вовлеченность пользователей, которые добавляют на рабочий стол, увеличилась на 150%: в среднем всего 0,8 повторных посещений для пользователей старого мобильного сайта до двух посещений для пользователей PWA. До появления нового, развитого сайта единственным средством повторного привлечения пользователей для trivago была электронная почта, но теперь, когда подписки на push-уведомления превосходят подписки по электронной почте, у бренда теперь есть новые ценные средства распространения информации. Все это расширенное взаимодействие, в свою очередь, привело к повышению конверсии, при этом количество переходов по предложениям отелей для пользователей PWA увеличилось на 97%.
Читайте полный пример здесь.
2. Lanc ô я
Чтобы привлечь как трафик, так и повторное вовлечение, бренд роскошной косметики Lancôme запустил Progressive Web App (PWA), чтобы обеспечить быстрый, похожий на приложение опыт в мобильном Интернете.
В 2016 году Lancôme впервые столкнулся с тем, что мобильный трафик затмил трафик настольных компьютеров. Несмотря на рост числа посетителей мобильных сайтов, показатели мобильной конверсии не соответствовали показателям настольных компьютеров. В то время как 38% тележек покупок приводили к заказам на компьютерах, коэффициент конверсии мобильного Интернета составил всего 15%.
Это несоответствие показало, что потребители сталкивались со значительными препятствиями при попытке совершить покупку с помощью мобильного телефона. Поскольку мобильный Интернет стал основным направлением деятельности, Lancôme изо всех сил пыталась создать быстрый и привлекательный опыт для своих покупателей через мобильный Интернет.
Вместо того, чтобы минимально обновлять свой основной сайт, Lancôme обратилась к технологиям PWA, чтобы обеспечить иммерсивный, похожий на приложение опыт. Они воспользовались сервисными работниками для обеспечения надежной работы в нестабильных сетях и push-уведомлений для повторного подключения.
С новым PWA время, пока страница не станет интерактивной, сократилось на 84% по сравнению с их предыдущим мобильным опытом, с соответствующим снижением показателя отказов на 15%. Количество мобильных сеансов Lancôme выросло более чем на 50%, а количество конверсий - на 17%. Новая стратегия также повысила удобство работы пользователей на разных платформах. iOS чрезвычайно важна для Lancôme - 65% всех пользователей, использующих свои PWA, используют iPhone. Благодаря новому PWA Lancôme увеличил продолжительность сеанса на 53% и снизил показатель отказов на 10% среди пользователей iPhone.
Lancôme также воспользовалась преимуществами технологий повторного вовлечения, таких как push-уведомления, которые стали очень популярными среди пользователей. Уведомления выглядят так же, как и в собственных приложениях, и приходят, даже если браузер больше не работает.
Lancôme отправляет четыре или пять предупреждений в месяц об эксклюзивных рекламных акциях и выпусках продукции. 8% потребителей, которые нажимают на push-уведомление, совершают покупку, что намного выше, чем коэффициент конверсии веб-сайта для настольных компьютеров. Lancôme также успешно использует push-уведомления для повторной связи с покупателями, которые бросили свою тележку. Новая стратегия обеспечила 18% открытий на мобильных устройствах, а коэффициент конверсии брошенных тележек увеличился на 8%.
Читайте полный пример здесь.
3. Убер
По мере того, как Uber выходит на новые рынки, они изо всех сил пытаются разрешить всем пользователям быстро запрашивать поездку, независимо от местоположения, скорости сети и устройства. Для Uber Progressive Web Apps стали решением их проблемы: они решили перестроить веб-клиент с нуля в качестве жизнеспособной альтернативы нативному мобильному приложению.
Совместимый со всеми современными браузерами, m.uber предлагает райдерам, использующим устройства низкого класса, в том числе не поддерживаемые собственным клиентом, работу, подобную приложениям. Веб-приложение очень маленькое - основное приложение для запроса поездки занимает всего 50 КБ, что позволяет приложению быстро загружаться даже в сетях 2G. В цифрах это означает трехсекундное время взаимодействия в типичных сетях 2G (250 КБ / с, задержка 300 мс).
И это сделало Progressive Web Apps ключом к выходу на новые рынки для Uber.
Прочтите полный пример здесь
4.Tinder
Tinder недавно прокрутил прямо в Интернете. Их новое адаптивное прогрессивное веб-приложение Tinder Online доступно 100% пользователей настольных и мобильных устройств. Используя все методы PWA, они добились отличной оптимизации производительности, устойчивости сети и push-уведомлений для взаимодействия в чате.
На реализацию MVP для PWA потребовалось 3 месяца с использованием React в качестве библиотеки пользовательского интерфейса и Redux для управления состоянием. Результатом их усилий стал PWA, который обеспечивает основной опыт Tinder за 10% затрат на инвестиции в данные для тех, кто работает на рынке с высокими затратами или дефицитом данных.
Ранние признаки показывают хорошие показатели прокрутки, обмена сообщениями и продолжительности сеанса по сравнению с родным приложением. С PWA:
- Пользователи проводят больше времени в Интернете, чем в собственных приложениях.
- Пользователи сообщают больше в Интернете, чем в их собственных приложениях
- Пользователи совершают покупки наравне с собственными приложениями
- Пользователи редактируют профили больше в Интернете, чем в собственных приложениях.
- Время сеанса в Интернете больше, чем в их собственных приложениях
Прочтите полный пример здесь
Как начать создавать прогрессивное веб-приложение?
Создание прогрессивного веб-приложения не должно быть трудным - с помощью такого инструментария, как DEITY Falcon, начать работу очень просто!
Во-первых, важно определить, кто ваши пользователи, какой опыт вы хотите им предоставить и какие функции PWA вы хотите использовать. Вы МОЖЕТЕ использовать автономный режим, push-уведомления, доступ к камере на телефоне, добавление на рабочий стол и т. Д., Но вам не обязательно использовать все одновременно с самого начала.
Обычно первое главное преимущество Progressive Web Apps - это сверхвысокое повышение производительности и удобство работы с пользователем. Начиная с этого момента, вы можете добавлять все интересные функции, которые вам нужны и которые вам нужны, и в то же время предлагать своим мобильным пользователям сверхвысокий уровень вовлеченности.
DEITY Falcon - витрины прогрессивных веб-приложений без головы
Хотите попробовать? Мы строили PWA уже несколько лет и решили создать из этого продукт.
DEITY Falcon - это набор инструментов для создания прогрессивных веб-приложений. Он построен с использованием ReactJS и NodeJS и включает GraphQL, Apollo State Management и другие интересные новые инновационные методы. DEITY Falcon не зависит от платформы, то есть вы можете использовать его с Wordpress, Magento, Shopify, Intershop, Contentful или даже со своей собственной CMS или базой данных.
Чтобы начать пользоваться DEITY Falcon, загляните здесь.
