Прогрессивные веб-приложения кажутся последним модным словом, но что оно означает? Мы подробно расскажем, что такое прогрессивное веб-приложение, почему оно важно и как его создать. В этой статье мы рассмотрим ключевые концепции прогрессивного веб-приложения и то, как вы можете приступить к работе. Итак, приступим.
Веб-разработка сильно изменилась за эти годы. Когда Ajax превратил Интернет из статических страниц в динамические интерактивные возможности, ожидания пользователей перешли от щелчка сбоку карты и секундного ожидания ее прокрутки к чему-то вроде Google Maps с возможностью панорамирования и масштабирования в реальном времени. Вам не нужно жить с этим ужасным кликом и ждать взаимодействия с пользователем. К сожалению, улучшения, которые мы видели в десктопной версии, не переносятся на мобильную версию. Подумайте вот о чем: если бы я попросил вас открыть Карты Google на вашем телефоне, вы бы сделали это с помощью родного приложения или через браузер?
Скорее всего, вы будете использовать нативное приложение. Мобильность — ключевой фактор этой революции.
Рост мобильных
Сейчас мы используем мобильные устройства больше, чем настольные компьютеры. И в зависимости от того, на какую статистику вы смотрите, так было более двух лет. На мобильных устройствах пользователи проводят большую часть своего времени в нативных приложениях, а не в Интернете.
Фактически, они проводят 87% своего времени в нативных приложениях по сравнению с 13% своего времени в мобильном Интернете. На вопрос, почему пользователи часто говорят, что приложения более предсказуемы. Их легко найти на главном экране, а также есть push-уведомления, которые возвращают их обратно. Так должны ли мы отказаться от Интернета и заняться созданием нативных приложений? Конечно, нет.
Есть и обратная сторона использования нативных приложений. Использование приложений сильно сконцентрировано, и пользователи, как правило, устанавливают и используют только несколько приложений. Если вы не одно из этих избранных приложений, очень плохо. Пользователи сказали нам, что они рассматривают нативные приложения как большие обязательства по пространству, времени и стоимости. Согласно недавнему исследованию, средний пользователь устанавливает ноль приложений в месяц — ноль.
Никто. Напротив, мобильные пользователи ежемесячно посещают более 100 веб-сайтов. В этом сила URL-адресов и эфемерность Интернета. Один из способов понять разницу между нативными и веб-приложениями — это ось возможностей. Когда вы нажимаете на их значок, нативные приложения запускаются быстро.
Они, как правило, работают в автономном режиме. Они могут показывать уведомления, синхронизироваться в фоновом режиме и иметь доступ к датчикам, таким как камеры и микрофоны. Но охват несколько ограничен, и для каждой платформы требуется своя версия. Сеть безопаснее, а ее модель разрешений более уважительна к вашей конфиденциальности. Но без некоторых из тех же возможностей не имеет значения, сколько людей могут его использовать.
Лучшее из обоих миров
Мы хотим объединить возможности и возможности, к которым пользователи привыкли в нативных приложениях, с доступностью Интернета. Мы хотим лучшего из обоих миров. Прогрессивное веб-приложение — это просто отличный пользовательский интерфейс, который кажется интегрированным и занимает место на моем домашнем экране, не отказываясь от доступа, чтобы получить его. Термин «прогрессивные веб-приложения» на самом деле просто означает радикальное улучшение качества вашего сквозного взаимодействия с пользователем. Для этого нам нужно сосредоточиться на четырех вещах: сделать приложение быстрым, сделать его более интегрированным, обеспечить его надежную работу и вовлечь пользователей.
Давайте рассмотрим каждое из этих свойств немного подробнее.
Пользователи ожидают, что приложения будут загружаться быстро и иметь плавную прокрутку. К сожалению, у Интернета плохая репутация для этого, особенно на мобильных устройствах. А пока давайте сосредоточимся на производительности загрузки, что означает обеспечение быстрой загрузки вашего веб-приложения. Теперь это не просто эзотерика.
Все мы знаем, что время – деньги. Эта диаграмма показывает, насколько это верно. 20% пользователей покинут сайт, если он загружается более трех секунд. Я мог бы пошутить о сегодняшних детях и короткой концентрации внимания, но я тоже виноват в этом.
Другие исследования показывают еще худшие результаты.
Через три секунды 53 % пользователей покидают сайт.
Одним словом, скорость убивает. Пользователям не нужно открывать вкладку браузера, чтобы получить доступ к вашему приложению. На самом деле пользователь даже не должен думать о том, что он в сети. Вместо этого они должны иметь возможность взаимодействовать с ним так же, как и со всеми другими приложениями на своем устройстве.
Они рассчитывают запустить его из того же места, откуда запускают все остальные приложения. Они ожидают увидеть его в списке задач. Они ожидают, что у него будут все возможности и доступ к оборудованию, которые есть у других приложений. Веб-платежи — то, что мы рассмотрим в следующей статье — это хороший пример удержания пользователя в потоке.
Вместо того, чтобы требовать от пользователя заполнения сложной формы оформления заказа, API запроса платежа упрощает его до нескольких нажатий и даже может интегрироваться с другими платежными приложениями, такими как PayPal или Android Pay.
Еще один хороший пример — воспроизведение мультимедиа. С помощью Media Session API вы можете предоставлять метаданные о том, что в данный момент воспроизводится, и даже обрабатывать события, связанные с мультимедиа, от пользователя. Если экран заблокирован, пользователь может быстро увидеть, какая песня играет, и, возможно, перейти к следующей песне.
Он работает в автономном режиме, пользователи знают об этом?
Пользователи не ожидают, что Интернет будет работать без подключения к сети. И часто они даже не пытаются пытаться, когда это медленное или прерывистое соединение.
Нам нужно изменить это восприятие. Веб-приложения должны быть надежными. Когда пользователь нажимает на значок на главном экране, он ожидает, что он загрузится мгновенно и надежно. Приложения, запускаемые с главного экрана, никогда не должны отображать динозавра. Вспоминая 90-е, когда Интернет вырос, вот как мы попали в Интернет.
Выход в интернет означал перевод всего дома в онлайн-режим. Я помню, как мне пришлось кричать наверху, не бери трубку. И если бы кто-то это сделал, это убило бы мою связь. Мы привыкли знать, когда мы были онлайн. Но сейчас, в эпоху широкополосного доступа, мы даже не думаем об этом.
Возможность подключения к рабочему столу всегда есть. Мы привыкли всегда быть онлайн.
А когда нет и мы видим этого милого маленького Динозавра, это катастрофа. Мобильные телефоны не всегда онлайн. Возможно, вы включили режим полета или ваша станция метро не обслуживается.
И даже когда у вас есть четыре такта, у вас может не быть прямой связи. Но не только отсутствие соединения подрывает доверие пользователя. Не меньшее влияние на пользователей оказывают медленные и прерывистые соединения. Тем не менее, мобильные приложения никогда не показывают Динозавра. Ничто на моем домашнем экране не показывает это. Чтобы веб-приложение заняло свое место на главном экране, нам нужно сделать его надежным, даже если сеть не работает. Увлекательное приложение выходит за рамки функциональности и гарантирует, что весь опыт будет восхитительным, облегчая пользователю выполнение того, что ему нужно.
Функциональность приложения в помощь
Используя такие функции, как веб-push, он всегда актуален. Уведомления информируют пользователя. Увлекательное приложение прекрасно использует нужные возможности в нужное время.
Один из примеров — push-уведомления. Они существуют какое-то время, но я очень рад, что мы, как веб-разработчики, наконец-то получили к ним доступ, и они работают даже при закрытом браузере. На мобильных устройствах уведомления являются фундаментальной частью превращения ежемесячного активного пользователя в ежедневного активного пользователя. Итак, достаточно экспозиций. Давайте взглянем на Twitter Lite, прогрессивное веб-приложение, разработанное для обеспечения более надежного взаимодействия с явными целями для мгновенной загрузки, повышения вовлеченности пользователей и снижения потребления данных.
Прогрессивное веб-приложение Twitter Lite сочетает в себе лучшее из современного Интернета и собственных функций. В апреле 2017 года оно стало мобильным веб-приложением по умолчанию для всех пользователей. При первой загрузке оно выглядит и ведет себя как любое обычное веб-приложение. Это хорошо продуманный мобильный интерфейс — плавная прокрутка, адаптивный дизайн и все остальное. Когда я повторно захожу на сайт, Chrome предлагает мне баннер «Добавить на главный экран», что позволяет мне легко добавить его на главный экран.
Когда я нажимаю «Добавить», появляется небольшое всплывающее уведомление, сообщающее мне, что оно было добавлено на мой домашний экран. В будущей версии Chrome прогрессивные веб-приложения также будут добавлены в панель запуска задач. Посмотрим, как это выглядит. Вот он на главном экране. При нажатии на значок он сразу же запускается, показывая заставку во время загрузки.
Затем он запускается в полноэкранном режиме.
Такое ощущение, что все другие установленные приложения на моем телефоне. Даже щелчок по диспетчеру задач показывает его как приложение верхнего уровня с использованием значка, имени приложения и цветов, определенных в манифесте. Нахождение в поле зрения пользователя очень важно для повторного вовлечения. Вскоре после запуска Twitter Lite они ежедневно наблюдали более 1 миллиона запусков с главного экрана.
Лидеры, устанавливающие статус-кво
Twitter реализовал веб-push-уведомления, которые работают так же, как и в их собственном приложении, и приходят, даже если браузер пользователя закрыт. Пользователям предлагается включить уведомления или они могут зайти в настройки и включить уведомления там. Уведомления появляются на заблокированном домашнем экране. И когда я нажимаю на уведомление, я попадаю прямо в нужное место, что позволяет мне легко ответить, поставить лайк или ретвитнуть что-то. Когда пользователи твитят, у них есть доступ ко всем тем функциям, которые они ожидают. Они могут делать снимки, прикреплять уже сделанные фотографии и так далее.
Было довольно круто увидеть демонстрацию этого в Твиттере на их мероприятии по запуску, где они опубликовали твит с изображением примерно за секунду и получили сотни лайков, все еще находясь на сцене. Охват широкого круга пользователей важен для Твиттера, особенно на развивающихся рынках, где распространены более низкие скорости загрузки и менее мощные мобильные устройства. Twitter Lite помогает более эффективно охватить эту аудиторию, делая Twitter быстрее и проще в использовании на соединениях с низкой пропускной способностью.
Twitter Lite занимает всего около 600 КБ по проводу по сравнению с почти 24 мегабайтами для установки собственного приложения для Android.
А для Twitter, который измеряет свой успех количеством твитов и страниц, просмотренных за сеанс, их прогрессивное веб-приложение имело мгновенный успех: количество отправленных твитов увеличилось на 75%, а количество просмотров страниц увеличилось на 65%. Сегодня у Twitter Lite больше активных пользователей, чем у любого другого клиента Twitter. Twitter Lite работает быстро. Он запускается как полноэкранное приложение с моего домашнего экрана. Это надежно, работает независимо от моего сетевого подключения, и это интересно.
Service Workers — это один из API новых платформ, лежащий в основе многих новых возможностей, о которых я говорил. Традиционная веб-модель требует, чтобы браузер подключался к сети для каждого отдельного запроса. А если сеть не работает, все выходит из строя, и вы получаете того самого знаменитого Динозавра. Но вам не всегда нужно проходить через сеть каждый раз. Service Worker может кэшировать все ресурсы, необходимые для вашей страницы.
Это дает вам полный контроль над управлением кешем и позволяет решать, когда обращаться к кешу, а когда — к сети.
Расширенные браузерные «работники»
Сервисные работники могут обрабатывать больше, чем просто сетевые запросы. Они могут обрабатывать уведомления системного уровня, такие как push-сообщения. Push-сообщение — это просто еще один тип запроса, который обслуживает Service Worker. Когда приходит сообщение, оно пробуждает работника службы, а затем вызывает его в обработчике push-уведомлений.
Ранее в этом году Lancome запустила новое прогрессивное веб-приложение. По сравнению с их предыдущим мобильным опытом время до интерактивного взаимодействия сократилось на 84%, что привело к снижению показателя отказов на 15%. Для повторного взаимодействия с пользователями Lancome добавила веб-push-уведомления, предупреждающие пользователей об эксклюзивных рекламных акциях, выпусках продуктов и повторно связывающиеся с покупателями, которые отказались от своих корзин. Эта стратегия обеспечила 18% открытий на мобильных устройствах, а коэффициент конверсии брошенных корзин увеличился на 8%.
Максимальная кроссплатформенность
Новая стратегия также обеспечила гораздо лучший опыт на разных платформах.
iOS важна для Lancome, и 65% всех пользователей, заходящих в их прогрессивное веб-приложение, используют iPhone.
Благодаря новому PWA Lancome увеличил продолжительность сеанса на 53 % и снизил показатель отказов на 10 % среди пользователей iPhone, несмотря на то, что некоторые функции были для них недоступны.
В целом прогрессивное веб-приложение имело огромный успех, увеличив конверсию на 17%. Lyft также запустила свой новый мобильный сайт как прогрессивное веб-приложение с учетом потребностей пользователей развивающихся рынков. На развивающихся рынках, где вы не можете воспринимать пропускную способность или даже возможность подключения как должное, вашей аудитории еще труднее получить доступ к вашему приложению.
Вместо того, чтобы создавать простую целевую страницу, которая просит пользователя что-то установить, их прогрессивное веб-приложение представляет собой полнофункциональную версию Lyft, только без шага установки. Помните, что цель не в том, чтобы заставить пользователя установить ваше приложение, а в том, чтобы заставить его использовать ваш сервис. Слово «прогрессивный» в прогрессивных веб-приложениях не случайно. Сосредоточение внимания на сквозном пользовательском опыте окажет огромное влияние на ваш бизнес, даже для пользователей, которые не могут воспользоваться всеми возможностями прогрессивных веб-приложений, потому что они используют устройство, которое не полностью поддерживает Service Workers.
Разработка прогрессивного веб-приложения не должна быть сложной задачей
Итак, с чего начать? Ну, в первую очередь, вам нужна безопасность. Это означает обслуживание вашего сайта из безопасного источника. Все должно обслуживаться через HTTPS. Это как столовые ставки для вашего прогрессивного веб-приложения.
Фактически, для многих новых и даже некоторых старых мощных веб-API, таких как геолокация, теперь требуется безопасное происхождение. Вы можете знать зеленый замок из строки URL. Зеленый замок указывает на наличие защищенного соединения между сайтом и пользователем. Наличие безопасного соединения на самом деле означает три вещи. Пользователь может быть уверен, что сайт на самом деле принадлежит вам, он может быть уверен, что никто не вмешивался в страницу и что никто не прослушивает соединение.
Сеть имеет огромный охват и беспрепятственна, поэтому обеспечение безопасности пользователей чрезвычайно важно. Как только вы обслуживаете все из безопасного источника, вы готовы начать свой путь создания прогрессивного веб-приложения.
Есть много способов начать работу, но их можно свести к этим трем подходам: 1. создание с нуля
2. начиная с простой версии и концентрируясь на одной функции
3. Каждый из них имеет смысл в другом сценарии.
Начинать с нуля имеет смысл, когда сайт собирается пройти редизайн. Если вы все равно начинаете с нуля, имеет смысл встроить прогрессивное веб-счастье с самого начала. Такой подход позволяет легко использовать шаблон оболочки приложения и использовать преимущества Service Workers. OLX является одним из крупнейших онлайн-ресурсов для тематических объявлений в Индии, предоставляя сообществам и быстрорастущим рынкам динамичную онлайн-площадку. Они обратились к прогрессивным технологиям веб-приложений, чтобы обеспечить более быструю загрузку, иммерсивное и похожее на приложение взаимодействие. После запуска их прогрессивного веб-приложения время до того, как страница станет интерактивной, сократилось на 23%, а показатель отказов снизился на 80%. OLX также хотел повторно привлечь мобильных пользователей, как в своем мобильном приложении. Это означало использование таких возможностей, как push-уведомления и добавление на главный экран. Эти два обновления увеличили вовлеченность на 250%.
Также улучшилась монетизация. Объявления загружаются быстрее, поэтому рейтинг кликов увеличился на 146%. Конечно, не каждый может принять такой подход. Начинать с нуля часто нереально. Второй подход — создать простую версию сайта — облегченную или мобильную версию — и выбрать оптимизацию для определенного раздела или пути пользователя. Примером такого подхода является Air Berlin.
Их график и требования не позволяли начать с нуля, поэтому вместо этого они сосредоточились на опыте после бронирования.
Их пользовательский путь — это то, с чем вы, возможно, знакомы. Вы находитесь в аэропорту и вам нужен быстрый доступ к деталям вашего маршрута, информации о пункте назначения и, прежде всего, к посадочному талону. Их прогрессивное веб-приложение активно использует кэширование, чтобы обеспечить сверхбыструю загрузку и надежную работу. С момента нажатия пользователем значка на главном экране до выдачи посадочного талона проходит меньше секунды, и он работает даже без подключения к Интернету. Последняя стратегия заключается в том, чтобы определить конкретную функцию, на которой следует сосредоточиться.
Выберите одну функцию, на которую вы можете оказать сильное влияние, и сосредоточьтесь на ней. Такой подход часто требуется в крупных компаниях, где у вас может не быть поддержки, чтобы начать с нуля или даже создать отдельную простую версию. Например, The Weather Company довольно давно интересовалась прогрессивными технологиями веб-приложений, но им нужно было расставить приоритеты, исходя из того, что, по их мнению, окажет наибольшее влияние на их пользователей и их бизнес.
Уведомления о выигрыше
Они решили, что самой важной функцией являются уведомления. Они решили сосредоточиться на одной функции с веб-пушами и пошли дальше, развернув уведомления по всему миру на более чем 60 языках.
Пользователи своего мобильного веб-приложения могут подписаться на несколько типов уведомлений, как и в своем родном приложении. Этот успех настраивает их на путь создания полноценного прогрессивного веб-приложения. За первые три месяца развертывания веб-рассылки Weather получило более миллиона подписок. Веб-push-уведомления позволяют Weather охватить совершенно новую аудиторию с тем же набором уведомлений, что и пользователи их собственных приложений.
Размышляя о своем путешествии, делайте то, что имеет смысл для ваших пользователей, вашего сайта и вашей компании.
Говоря об этом, мы были так взволнованы, увидев невероятный импульс прогрессивных веб-приложений по всему миру. Крупные компании, такие как Wego, Expedia, Outlook, ZiggoTV и Trivago, развернули успешные прогрессивные веб-приложения. Такие издатели, как Infobae и Forbes, запустили прогрессивные веб-приложения, и Forbes отмечает удвоение активности пользователей с момента их запуска. Сайты электронной коммерции, такие как Fandango, Alibaba и Rakuten, инвестировали в прогрессивные веб-приложения. Даже новые услуги, такие как компании по совместному использованию поездок, которые мы могли бы рассматривать как приложения, вступают в действие.
Прошлой осенью Lyft развернула свое прогрессивное веб-приложение, а Ola Cabs, крупнейший сервис по совместному использованию поездок в Индии, только что запустил свое прогрессивное веб-приложение. Это всего лишь пример некоторых людей, которые поставляют или активно работают над прогрессивными веб-приложениями. У каждой из этих компаний был свой собственный путь инвестирования в мобильный Интернет и начало пути прогрессивных веб-приложений.
