Прогрессивные веб-приложения (PWA): 3 лучших примера из практики

Представьте, что вы только что запустили свой стартап, и ваш веб-сайт выглядит потрясающе, но у вас недостаточно средств для разработки мобильного приложения, которое может иметь важное значение для вашей бизнес-стратегии. Однако это очень дорого и немного рискованно. Вам также придется потратить много времени на создание нативного приложения, но никто хорошо не знает ваш бренд. Будут ли люди доверять вашему приложению настолько, чтобы загрузить его из App Store или Google Play Store?

Более того, будут ли ваши клиенты/читатели достаточно решительны, чтобы предпринять некоторые дополнительные шаги, такие как закрытие вашего веб-сайта, открытие Google Play или App Store, а затем терпеливо ждать, пока приложение не будет установлено?

Помните, что в наши дни люди гораздо более требовательны. Другими словами, они тоже очень нетерпеливы — ждут быстрых решений . Загрузка такого приложения из внешнего магазина не кажется очень быстрой операцией, а нативные приложения не очень доступны для каждого пользователя. С точки зрения пользовательского опыта, у клиента есть много препятствий, прежде чем он достигнет своей (и вашей) цели.

И еще: уверены ли вы, что у ваших клиентов будет достаточно внутреннего хранилища для загрузки вашего приложения?

Таким образом, вы вкладываете много денег в создание мобильного приложения (как для IOS, так и для Android), и вы не можете быть уверены, что люди действительно будут его использовать. Ааа… и не забывайте обо всех этих огромных суммах вашего маркетингового бюджета, которые вам нужно будет потратить на рекламу и продвижение!

Но подождите, не паникуйте, к счастью, вы живете в 2019 году, когда   Прогрессивные веб-приложения становятся распространенным решением, когда дело доходит до создания мобильных приложений!

Вы когда-нибудь слышали о прогрессивных веб-приложениях ? Если нет, то сейчас у вас есть шанс догнать эту новейшую технологическую тенденцию, иначе вы останетесь позади! Мы уже написали исчерпывающую статью, объясняющую , что это такое и почему стоит выбрать этот вариант.

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

ТРИВАГО

Trivago приобрела хорошую репутацию поисковой системы отелей, которая доступна на 33 различных языках. На основе информации об отелях, фотографий, рейтингов, обзоров, фильтров и других функций Trivago помогает своим пользователям найти лучшее предложение.

Проблема

Проблема в том, что Trivago заметила значительное увеличение числа мобильных пользователей в последние годы. Бренд понял, что мобильный опыт становится все более и более важным для их клиентов.

Однако создание мобильных решений — непростая задача, и для этого нужно делать трудный выбор. В частности, компания не была уверена, примут ли люди плату за загрузку мобильного приложения, просто чтобы проверить, соответствует ли оно их ожиданиям. Также они заметили, что у многих возникают проблемы с качеством мобильной связи . По этим причинам Trivago искала другие возможности, отличные от нативного приложения.

 Рекомендуемая литература: Прогрессивные веб-приложения против нативных приложений: что вам больше подходит?

Решение

Наконец, они открыли для себя Progressive Web Apps , функции которых, казалось, идеально подходили для их нужд. В то время они искали решение, которое предоставило бы им push - уведомления , автономный режим и ярлыки на главном экране . И самым важным фактором для Trivago стала доступность этого приложения через стандартный мобильный браузер .

Это решение PWA помогло им создать приложение без привлечения больших групп разработчиков программного обеспечения. Вначале они сосредоточились на самых важных функциях, таких как push-уведомления, автономный доступ и возможность добавить приложение на главный экран . Конечно, поначалу были трудности. Они сказали, что одной из самых больших проблем было создание интуитивно понятного пользовательского интерфейса, потому что дизайн мобильного внешнего вида намного отличается от стандартного веб-сайта. По словам Лауры Одес, дизайнера PWA:

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

Результаты, достижения

• Мобильный веб-сайт Trivago доступен на 33 языках в 55 странах.
• Более 500 000 человек добавили ярлык Trivago на главный экран, и их участие увеличилось на 150% .
• По сравнению с предыдущими мобильными веб-сайтами Progressive Web App привлекла гораздо больше пользователей. Если до PWA было зафиксировано всего 0,8% повторных посещений, то теперь это число увеличилось в среднем до 2%.
• Пуш-уведомления оказались отличным средством коммуникации — они помогли увеличить конверсию — количество кликов в PWA по предложениям отелей увеличилось на 97%.

 Рекомендуемое чтение: 7 лучших прогрессивных веб-приложений в туристической индустрии

ПИНТЕРЕСТ

Pinterest — это социальная сеть, которая позволяет пользователям визуально обмениваться информацией и находить новые интересы, публикуя (называемые «закреплением» в Pinterest ) изображения или видео на своих или чужих досках (т. е. набор «закреплений», обычно с общим тема) и просматривать то, что прикрепили другие пользователи

Проблема

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

Pinterest PWA начался, потому что они были сосредоточены на международном росте, который привел их к мобильному Интернету.

Решение

За 3 месяца Pinterest перестроили свой мобильный веб-интерфейс с помощью React, Redux и webpack. Их переработка мобильного веба привела к нескольким положительным улучшениям основных бизнес-показателей.

Результаты, достижения

Их переработка мобильной сети привела к нескольким улучшениям производительности.

Затраты времени увеличились на 40 % по сравнению со старым мобильным веб-интерфейсом, доход от рекламы, создаваемой пользователями, вырос на 44 % , а основные взаимодействия — на 60 % :

Старый мобильный веб-интерфейс Pinterest был монолитным — он включал в себя большие пакеты JavaScript с высокой нагрузкой на процессор, которые увеличивали скорость загрузки пин-страниц и их интерактивность.

Их новый мобильный веб-интерфейс — радикальное улучшение.

Они не только сократили свой JavaScript на сотни КБ, уменьшив размер основного пакета с 650 КБ до 150 КБ, но и улучшили ключевые показатели производительности. Первая осмысленная отрисовка сократилась с 4,2 до 1,8 с, а время до интерактивного взаимодействия сократилось с 23 до 5,6 с.

Несмотря на то, что Pinterest продает приложения для iOS и Android, они смогли предоставить те же основные возможности домашней ленты, что и приложения в Интернете, за небольшую часть первоначальной стоимости загрузки — всего ~ 150 КБ в сжатом виде и в сжатом виде. Это контрастирует с 9,6 МБ, необходимыми для предоставления этого опыта для Android и 56 МБ для iOS.

Твиттер

Как вы уже знаете, Twitter — это платформа социальных сетей, где люди публикуют короткие сообщения, называемые твитами. Он был создан в марте 2006 года. Сейчас у него более 335 миллионов активных пользователей (июль 2018 года).

Проблема

Twitter заметил, что пользователям приходится преодолевать множество препятствий при использовании своего мобильного сайта.

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

Решение

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

Полученные результаты

Результаты оказались очень впечатляющими — цифры говорят сами за себя:

• снижение показателя отказов на 20%,
• 65% увеличение количества страниц за сеанс,
• На 75 % увеличилось количество отправленных твитов.

Как и в предыдущих историях успеха, подсказка « Добавить на главный экран » и ​push - уведомления значительно увеличили вовлеченность пользователя . Как сообщается в этом кейсе, Twitter заметил, что 250 000 уникальных пользователей ежедневно запускают Twitter Lite с домашнего экрана в среднем 4 раза в день. Более того, они отправляют более 10 миллионов push - уведомлений в день.

Согласно намерениям Twitter, PWA занимает гораздо меньше места (всего 600 КБ), чем родное приложение для Android (23,5 МБ), поэтому вероятность того, что у людей будет достаточно места во внутренней памяти для его сохранения, выше.

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

 Рекомендуемая литература: PWA SEO: приносят ли прогрессивные веб-приложения (PWA) пользу SEO? (со статистикой и примерами)

Примите будущее веб-сайтов

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

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