Перевод электронной книги, написанной Google, Microsoft & Awwwards
Прогрессивные веб-приложения (PWA). Будущее мобильного интернета
Сибирикс
Прогрессивные веб-приложения (PWA). Будущее мобильного интернета
Перевод электронной книги, написанной Google,
Microsoft & Awwwards. Часть 1
Мы в студии уже давно используем технологию PWA (прогрессивных веб-приложений) и даже проводили по этой теме открытый холивар. Если пропустили — читайте пост и смотрите видео. Технология реально прогрессивная и крутая, но пока многим неизвестная. Поэтому мы заботливо перевели большую электронную книгу, написанную совместно Google, Microsoft & Awwwards — чтобы вы ещё на шаг приблизились к будущему мобильного интернета.

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

Вместе с бумом мобилок растут ожидания. Пользователи ждут непревзойденного UX и в приложениях, и в мобильных версиях сайтов, а ещё — легкости при переходах с сайта в приложения и обратно. Разработчикам и дизайнерам теперь приходится создавать и поддерживать приложения не только для нескольких операционных систем (ОС), но еще и мобильную версию сайтов — всё это требует времени и усилий. И когда — как часто это бывает — UX на сайте и в приложении отличаются, пользователь разочаровывается.

Есть ли выход? Да — это прогрессивные веб-приложения (PWA). Их концепцию впервые представили в 2015 году. PWA — технология, которая позволяет сайту взаимодействовать с пользователем как приложение (работать в оффлайне, отправлять push-уведомления, использовать gps-навигацию и другие нативные функции).
Большие мобильные ожидания
Мобильное использование
Потребители ждут, что смогут решать свои повседневные задачи с помощью мобильных устройств: совершать покупки, поддерживать связь и развлекать себя. Дизайнеры и разработчики, соответственно, должны удовлетворять эти требования. А значит, мобильные приложения должны быть быстрыми, надежными, привлекательными, легко устанавливаться и работать в безопасной и доступной среде.

Исследования говорят, что в большинстве стран пользователи тратят вдвое больше минут на мобильные устройства, чем на настольные компьютеры. Хотя половину цифрового времени люди всё ещё сидят на десктопах — в сферах розничной торговли, бизнеса и финансов, путешествий, автомобилей и образования. Но у мобильных аудиторий в этих сферах охват иногда больше: потребители часто переключаются на те платформы, где им удобнее всего удовлетворить свои потребности.

Подливают масла в огонь пользователи, впервые подключившиеся к сети, — в Азиатско-Тихоокеанском регионе, в странах вроде Индии и Индонезии интернетом пользуются преимущественно через мобильные устройства. Миллениалы используют мобилки чаще, чем другие поколения, хотя люди старшего возраста не слишком от них отстают.

Большая часть времени на мобилках тратится на нативные приложения — 80% всех мобильных минут. У мобильного интернета лишь 20% времени. Из этих 80% львиная доля — у небольшого количества нативных приложений: социальных сетей, музыки, игр и развлечений. С точки зрения охвата вовлеченность у мобильного интернета больше: на среднем сайте уникальных посетителей мобильной версии в 2,2 раза больше, чем у нативных приложений.
Исследование пользователей: мобильный интернет и нативные приложения
Мобильные версии сайтов — чуть ли не единственный сценарий поиска информации: чаще всего пользователи обращаются для сбора данных именно к ним.

По словам участника исследования пользователей от Google: «Если вы, например, реально знаете, что ищете, зачастую проще перейти на мобильную версию сайта и поискать там… Есть ощущение, что там доступно больше продуктов и контента по сравнению с приложением». В мобильных версиях часто ищут и сравнивают альтернативные варианты, цены и отзывы.
Сайты с мобильными версиями имеют преимущества в поисковом рейтинге (см. руководство Гугла SearchEngine для начинающих).
Но нативные приложения — удобнее по мнению пользователей, поскольку изначально создаются под мобилки: у них продуманный дизайн и плавные взаимодействия.

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

«[Приложения, которые мне нравятся] разработаны, чтобы быть действительно простыми и удобными для пользователя. Вы можете войти, выйти, решить [свою] задачу».
Используйте Руководство Гугла по материал-дизайну и компонентам, чтобы создать отличный UX и придать единый внешний вид мобильным сайтам и нативным приложениям.
База материал-дизайна. Цветовая схема.
Нативные приложения часто разрабатываются для конкретных задач и имеют только самый важный функционал — поэтому их можно считать более рациональными и ориентированными на цели пользователя, чем мобильные версии сайтов:

«По моему опыту, приложения имеют меньше функций, чем сайты. Таким образом, они очень упорядочены и ориентированы на конечный результат […]. В приложении меньше функций, потому что его цель — как можно быстрее доставить вас туда».
Дмитрий
аккаунт-менеджер
Действительно, часто функционал мобильного приложения отличается от сайта. С одной стороны, это сознательный фокус приложения на часто повторяющихся операциях: личные кабинеты, бонусные системы или усеченный контур продаж «каталог-корзина-заказ». Мобильное приложение заставляет отсекать любую лишнюю информацию или функционал, чтобы сфокусировать внимание пользователя на ключевых действиях. Плюс, сайты продвигаются поисковыми системами, на них должно быть 100 500 страниц с ответом на любой вопрос, которые помогают бороться за желанные верхние позиции выдачи в поисковиках.
Внутри нативных приложений часто можно хранить платежные реквизиты, информацию об учетной записи или настройки и предпочтения, что делает покупку проще и быстрее. Из-за этого они кажутся более персонализированными:

«[Приложение] предназначено для вас. Там есть история ваших заказов, она легко доступна. Вероятно, у него есть какие-то настройки персонализации […]».
Уменьшите нагрузку на потребителей — оптимизируйте пользовательский интерфейс для входа в систему и оплаты. Ускорьте регистрацию в мобильной версии (регистрация одним нажатием и автоматический вход на веб-сайтах) или в приложении для Android (с помощью входа в Google). Используйте Google Pay для удобной оплаты в нативных приложениях и на мобильных сайтах.
Нативные приложения проще найти и получить к ним доступ:

«Потому что оно есть на экране моего телефона, и я знаю, как оно выглядит, и на него легко нажать … А если я не добавлю сайт в закладки, что иногда забываю сделать, мне придется вспомнить его название или начать гуглить … «
Внедрите технологию PWA, благодаря которой пользователь может зайти на сайт со своего домашнего экрана — так же, как он делает это с приложениями (см. Добавить на домашний экран).
Потребители также считают, что с нативными приложениями быстрее:

«Я бы сказал, что приложения почти всегда работают быстрее, чем мобильный интернет».
Используйте AMP (ускоренные мобильные страницы) для создания супер быстрых целевых страниц для веб-сайтов.
С другой стороны, нативные приложения занимают много места на устройстве — а значит, пользователи будут устанавливать только те приложения, которыми планируют часто пользоваться:

«Я склонен не загружать приложения, за небольшим исключением, пока не решу, что действительно могу их использовать постоянно. У меня не так много приложений, к которым я редко обращаюсь. Так что, если это надо на один раз, я, скорее всего, просто зайду на сайт, поищу информацию, а затем уйду. Приложение — то, что я буду использовать часто, снова и снова».

И мобильным веб-сайтам, и нативным приложениям важно не разочаровывать пользователей. А значит, никакой рекламы, которая мешает взаимодействию с ними, и никаких назойливых нерелевантных уведомлений, которые мешают достижению целей пользователя. Иначе они уйдут или выключат абсолютно все уведомления:

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

«Я считаю, что если вы уведомляете вообще обо всём, то среди этой информации всё становится неважным».
Улучшите качество рекламы, используя рекомендации Coalition for Better Ads, и спроектируйте годные уведомления, которые не бесят пользователей (см. Уведомления Android).
Реальность такова, что пользователи будут переключаться между платформами по мере необходимости, чтобы найти нужную информацию или услугу. Недавнее исследование показало, что 46% сеансов мобильных покупок включают как минимум один переход между мобильной версией сайта и нативным приложением. Логично, чтобы опыт взаимодействия был быстрым, надежным, безопасным и охватывал все платформы, которые вы поддерживаете. Если ваше нативное приложение получает данные из интернета — ещё лучше. за плавность и хороший внешний вид нативных приложений отвечают технологии вроде Trusted Web Activities.

В целом пользователи считают, что нативными приложениями проще пользоваться, а данные в них персонализированы и быстрее загружаются. Но мобильные версии сайтов — первая точка входа для изучения продукта и услуги, а также для поиска конкретной информации. Их не нужно устанавливать на смартфон, а за счет последних технологий они работают так же быстро и удобно, как приложухи.
Лучшее от обоих: прогрессивные веб-приложения
Прогрессивные веб-приложения (PWA) — это сайты, использующие современные веб-технологии для создания мобильных приложений, максимально приближенных к нативным. Одна ссылка на домашнем экране — и можно пользоваться функциями, которые раньше для интернета были почти недостижимы: доступ к контенту в автономном режиме, получение уведомлений от предпочитаемых брендов, добавление избранного на домашний экран.

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

Мобильные устройства — один из основных драйверов этой технологии. Но PWA даёт беспроблемное переключение между мобильным устройством, планшетом и десктопом, поэтому преимущество технологии очевидно. Поэтому настольные компьютеры для PWA — растущий рынок.
Что такое PWA
Прогрессивные веб-приложения — увлекательный и эффективный способ осчастливить пользователей наилучшим функционалом. Но прежде чем углубляться в детали «как», давайте сначала поговорим, «почему».
Краткая история доступности ПО
Исторически программное обеспечение поставлялось в виде приложений. Вы покупали его на дискетах, CD или картах памяти, устанавливали и использовали. Процесс был громоздким, поэтому ПО редко обновлялось. Затраты на создание таких продуктов и их доставку до пользователя были высоки, и если возникали ошибки, исправить их было нелегко.

С появлением интернета всё изменилось. Вместо использования физических носителей вы просто скачивали и устанавливали необходимое ПО. По мере развития браузеров и технологий даже этот процесс упростился: вместо загрузки и установки вы просто вводили URL-адрес или нажимали на ссылку.

Появление смартфонов снова стимулировало развитие отрасли. Формат «ПО в браузере» не был идеальным, а набирать URL-адрес на мобильном устройстве было непросто. Интерфейсы, созданные с помощью веб-технологий (HTML, CSS и JavaScript), часто оптимизировались для больших экранов и взаимодействий с мышью. Но их главная проблема — пользователь должен быть в сети, а мобильная связь оставалась менее надежной, чем проводное соединение на компе или ноутбуке.

Нативные приложения для iOS и Android дали то, чего не могли предложить мобильные версии сайтов: возможность работать в автономном режиме и удобство взаимодействия со смартфоном. В итоге начали предлагать программное обеспечение и мультимедиа через магазины приложений.
Удовлетворение текущей потребности
Вскоре стало ясно, что нативные приложения — всё-таки не волшебная таблетка. Да, распространять ПО через специализированные онлайн-сторы удобно для разработчиков и безопасно, поскольку такие магазины могут фильтровать вредоносное ПО. Главный минус — приходится создавать несколько версий приложений для различных систем и устройств, а это не каждый может себе позволить.

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

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

Все это — барьеры для входа, поэтому нужен был способ сочетать простоту использования мобильных версий сайтов с функциональностью нативных приложений.
Прогрессивные веб-приложения в помощь
Плюс PWA в том, что не нужно создавать приложения в разных форматах: есть базовое решение (сайт) и дополнительный функционал.
Дмитрий
аккаунт-менеджер
Делаем отдельную главную/стартовую страницу для PWA-версии, скрываем поисковую строку, меняем меню, добавляем навигационные поля — вуаля, была адаптивная версия сайта, а стало приложение.
Вместо того, чтобы наивно ожидать, что у пользователей будет определенный браузер или определенное аппаратное обеспечение, вы просто даёте им решение, которое работает всегда и везде. PWA доступно по ссылке в электронном письме, в чате, в результатах поиска, в QR-коде или в рекламном объявлении. У PWA подходящий интерфейс для разных устройств и их версий, приложение доступно сразу же, да ещё можно затестить его перед покупкой.

Пока пользователь взаимодействует с PWA, можно проверить возможности его устройства и загрузить больше данных в фоновом режиме. Дальше — больше: использование в автономном режиме, уведомления о появлении новых данных.

Первые описания PWA казались сложными и пугали разработчиков. Но на самом деле всё просто:
Прогрессивность
Приложение даёт больше функционала при последующих посещениях в зависимости от возможностей устройства.
Отзывчивость
Взаимодействие с интерфейсом плавное, очевидное и быстрое.
Независимость от сети
PWA функционирует как в автономном режиме, так и в сети, а также при нестабильных соединениях.
Всё, как в нативном приложении
PWA работает как любое другое приложение: без необходимости загрузки в браузере.
Свежесть
Обновления происходят автоматически и без длительного процесса установки.
Безопасность
Данные доставляются по защищенным каналам.
Доступность
PWA доступно в интернете, а также в магазинах приложений.
Вовлеченность
Для уведомлений не нужно, чтобы приложение было постоянно открыто.
Легкость установки
PWA отображается рядом со всеми другими приложениями (меню «Пуск», значок на главном экране, результат поиска приложения на устройстве …).
Кликабельность
Доступ через простой механизм вроде клика на ссылку.

PWA постоянно развиваются, и ключевые характеристики технологии видоизменяются. Одна из последних концепций — концепция FIRE: Fast (быстрота), Installable (легкость установки), Reliable (надежность) и Engaging (привлекательность).

Если сократить особенности PWA до трёх характеристик, то это будет:

  • Быстрота — первый контакт с интерфейсом PWA даёт мгновенный, отзывчивый и приятный опыт.

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

  • Вовлеченность — PWA дарит пользователю классные UX & UI, работает независимо от состояния сети или возможностей устройства. Да, не весь функционал может быть доступен, но PWA никогда не станет клянчить подключение к сети, чтобы что-то загрузить или установить.
Технологический стек
Чтобы такие характеристики стали возможными, потребовалось много новых функций, которые теперь доступны во всех браузерах и операционных системах. В их основе — договоренности различных компаний, которые их поддерживают. Это делает разработку PWA более простой, чем когда-либо.

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

Первый — веб-манифест. Это JSON-файл, который описывает ваше PWA. Он включает название приложения, экранную раскладку (книжная/альбомная) необходимые доступы к устройству, описание и иконки. Веб-манифест нужен, чтобы дать понять браузерам и устройствам, что перед ними именно PWA. Когда пользователь кликнет на ссылку на сайт с корректно настроенным манифестом PWA, брайзер понимает, что это сайт можно установить как приложение.

Второй стандарт — Service Worker, специальный скрипт, который запускается в фоновом режиме, когда пользователь открывает PWA. Он определяет, какие данные следует хранить на устройстве, а какие — загружать из интернета, когда пользователь снова будет в сети. Также скрипт отвечает за частоту обновлений и типы уведомлений для пользователя.

Но перед созданием веб-манифеста и Service Worker, конечно же, нужно сначала создать сайт, который позже станет приложением. Он должен быть адаптивным и весить как можно меньше, чтобы пользователь, впервые открывший сайт, заценил его скорость и плавность. Поскольку PWA — это фактически сайт, написанный на HTML, CSS и JavaScript, не приходится настраивать отдельную среду разработки для приложений.

Итого: адаптивный и шустрый сайт дает основу — скорость и оперативность. Манифест отвечает за возможность установки PWA— пользователь понимает, как получить доступ к приложению и куда кликнуть для этого. Скрипт Service Worker делает приложение надежным и повышает вовлеченность — PWA адаптируется к нестабильности сети и подкидывает пользователю уведомления.
Причина эволюции ПО в PWA проста — в основе таких приложений лежат технологии, которые не зависят от типа операционной системы или среды разработки.
Как разрабатывать PWA
Цель PWA — создать ядро адаптивного сайта и постепенно нанизывать функционал для лучшего опыта взаимодействия пользователя. Это и есть прогрессивность. Чтобы помочь разработчикам прокачать навыки и познакомить их с новыми принципами дизайна, Google разработал курс обучения PWA. Кратко о нём — в видео.

Курс подойдёт:

  • разработчикам начального и среднего уровня,
  • разработчикам, которым удобно использовать HTML, CSS и скромные возможности JavaScript.
  • разработчикам, которые хотят создавать веб-приложения, которые работают для всех.
На сегодня — всё. Продолжение книги в следующем посте: поговорим о дизайне PWA и о том, что делать после запуска прогрессивного приложения. Бонусом — кейсы крупных компаний, внедривших PWA у себя.