ru ua en
c l o c k
Расширение возможностей бизнеса с помощью PWA
24 April 2020
блог

Расширение возможностей бизнеса с помощью PWA

В этой статье мы подробно рассмотрим функционал Progressive Web Apps (PWA) и то, как они объединяют доступ в Интернет с интеграцией устройств с установленным программным обеспечением.

Прогрессивные веб—приложения — современный инструмент взаимодействия

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

Хотя браузеры остаются главным способом взаимодействия для пользователей, каждое устройство теперь имеет свой собственный магазин приложений. На Android, Chrome OS, Mac или Windows в магазине можно установить программное обеспечение, предназначенное для каждого устройства.

Суть установленного программного обеспечения заключается в том, что программное обеспечение будет интегрироваться с устройством так, как этого ожидает пользователь. Интеграция установленного программного обеспечения позволяет снова запускать программное обеспечение, например, с помощью значка на главном экране телефона или в меню «Пуск». Это также означает, что пользователь может переключаться между программным обеспечением с помощью встроенного в устройство переключателя активности, такого как «alt-tab» в Windows, или переключателя приложений на телефоне.

Прогрессивные веб—приложения Clock Creative Lab

Прогрессивные веб-приложения (PWA) объединяют доступ в Интернет с интеграцией устройств с установленным программным обеспечением. PWA можно установить на любом девайсе с современным веб-браузером, как на мобильном устройстве, так и на компьютере, а также в таких магазинах, как Google Play.

Примерами прогрессивных веб-приложений являются Google Music на YouTube и Google Earth, а также Twitter, Spotify, OYO и Etam.

В этой статье мы подробно расскажем о возможностях Progressive Web Apps, стратегиях продуктов для расширения PWA, рекламных шаблонах для управления PWA, лучших примерах UX для разработки установленных приложений, которые надежно работают в автономном режиме, а также покажем тематические исследования компаний, которые создали отличные PWA.

Устанавливаемые прогрессивные веб-приложения

Прогрессивные возможности сети Интернет:

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

Эти преимущества сделали Интернет ультрасовременной платформой даже на рабочем столе. Например, такие приложения как Google G Suite, Microsoft Office 365, Trello, Slack, Discord, InVision и Lucidchart, давно используются в качестве десктопных веб-приложений.

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

В настоящее время веб изначально поддерживает практически любые возможности, которые могут понадобиться, включая:

  • Медиа и потоковый доступ к медиафайлам, фото и видео с любой камеры на устройстве
  • Обнаружение формы, включая штрих-код и распознавание лица
  • Всплывающее уведомление
  • Биометрическая аутентификация, включая лицо и отпечатки пальцев
  • Bluetooth и NFC
  • Собственный доступ к контактам
  • Собственный доступ к файловой системе
  • Доступ к необработанному буферу обмена
  • Перемещение и ориентация устройства, вибрация, ориентация экрана (включая блокировку)

А также, многое другое.

Преимущества использования прогрессивных веб-приложений Clock Creative Lab

Преимущества использования прогрессивных веб-приложений

Прогрессивные веб-приложения сочетают в себе доступность Интернета с интеграцией устройств. Многие предприятия уже начали использовать преимущества PWA, чтобы обеспечить удобство работы пользователей. Например:

  • Такси-приложения, такие как Ola Cabs, Lyft и Uber, используют веб-push-уведомления, чтобы предупредить пассажиров о статусе поездки
  • Ритейлеры и банки используют опыт просмотра в автономном режиме для тех моментов, когда нету доступа к Wi-Fi
  • Службы доставки еды, такие как Delivery Club, используют PWA из-за простоты обслуживания и кроссплатформенности
  • PWA могут быть использованы немедленно. Содержимое из PWA может быть передано по URL-адресу, и лицо, получающее URL-адрес, может получить доступ к содержимому, независимо от того, установлено у него PWA или нет

Пользователь может установить PWA и получить интеграцию устройства подобную обычному приложению, например:

  • Доступно в привычных режимах запуска, таких как домашний экран и панель приложений
  • Автономный опыт, отдельно от браузера
  • Собственные сервисы устройств, такие как переключатель приложений и настройки
  • В дополнение к установке из браузера, PWA также можно установить из магазинов приложений, включая Google Play, Samsung Galaxy Store и магазин Microsoft в Windows 10

Дальше будет предоставлена ​​более подробная информация о технических требованиях и шаблонах для установки. А здесь, краткий обзор установки из браузера на мобильных, ПК и из магазинов приложений.

Установка из браузера

По состоянию на начало 2020 года установка прогрессивных веб-приложений поддерживается всеми основными браузерами, хотя процесс установки различается.

Установка на смартфон

  • Chrome & Edge на Android предлагает полный контроль над процессом установки (возможность «Добавить на главный экран» или A2HS)
  • Пользователи Firefox, Samsung Internet и Opera могут запустить установку, нажав значок в адресной строке
  • Safari на iOS требует, чтобы пользователи вручную устанавливали PWA из меню действий

Установка на рабочий стол

Десктопные PWA могут быть установлены из Chrome и Edge во всех операционных системах, включая Chrome OS, Linux, Mac и Windows.

Пользователю лишь необходимо нажать значок установки в адресной строке. После установки настольные PWA можно запускать из панели приложений в автономном режиме.

Установка из магазинов приложений

Google Play магазин. Действия Trusted Web Activity (TWA) позволяют публиковать прогрессивные веб-приложения в Google Play Store. Это позволяет пользователям находить Progressive Web Apps вместе с любым другим приложением в списке.

Магазин Samsung Galaxy. С начала 2020 года Samsung использует следующий процесс: отправьте URL-адрес по адресу pwasupport@samsung.com, и Samsung ответит, чтобы начать процесс добавления PWA в Galaxy Store, включая все необходимые лицензионные соглашения.

Стратегии разработки прогрессивных веб-приложений

Успешный интернет-магазин модных товаров ABOUT YOU создал прогрессивное веб-приложение и предложил установить его из браузера, в дополнение к их собственному приложению, которое доступно в магазине. Они обнаружили, что пользователи, которые установили PWA, «генерируют продажи в пять раз выше, чем средний мобильный пользователь».
Прогрессивные веб-приложения могут предоставить отличный опыт пользователям, которые никогда не установят нативное приложение. Установленные PWA обычно весят менее 1 МБ, что намного меньше, чем средний размер обычного приложения.
Эти функции особенно важны для компаний, стремящихся к росту на развивающихся рынках, где важна быстрая передача данных, объем памяти ограничен, а устройства могут потреблять много энергии.

Clock Creative Lab pwa

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

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

Следующие 4 стратегии показывают, как компании с различными потребностями могут использовать PWA, чтобы предложить наилучший возможный опыт наибольшему количеству пользователей.

Стратегия 1: All-in в сети

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

Для предприятий, которые:

  • Не имеют собственного приложения
  • Имели плохой опыт работы с приложениями
  • Или имеют собственное приложение, которое в значительной степени опирается на веб-контент

Разработка:

Опубликуйте PWA в Play, используя действия Trusted Web. Это может быть наиболее экономически эффективным решением для крупных интернет-компаний, желающих выйти в Play Store

Продвижение:

Браузер: продвигать установку PWA всем пользователям.
Магазин: публикация PWA в Google Play с использованием TWA.

Плюсы:

Может заменить устаревшее приложение Android, которое едва получает какие-либо обновления или имеет плохой пользовательский интерфейс. Совет. Особенно легко заменить устаревшее гибридное приложение на PWA.

Консолидация всей мобильной разработки в единой кодовой базе.

Минусы:

Не подходит, если требуются функции, недоступные в Интернете.

Стратегия 2: Дополнить приложение совместимым PWA — ‘Lite App’

PWA Lite App

Термины «Lite» и «Go» были придуманы для того, чтобы отличать более легкое, быстрое, но иногда менее специализированное веб-приложение от нативного приложения, для тех компаний, которые хотят предложить и то, и другое.

Для компаний, у которых уже есть отличное нативное приложение, прогрессивное веб-приложение с фирменным наименованием «Lite» может помочь пользователям, которые никогда не установят нативное приложение, например, на устройства среднего уровня.

Разработка:

Создайте прогрессивное веб-приложение. Опубликуйте PWA в магазине, используя действия Trusted Web. Используйте название «Lite», чтобы отличать его от нативного приложения.

Продвижение:

Браузер: продвигайте установку собственного приложения для пользователей. Если они отказываются, продвигайте PWA, используя предложение «Lite».
Магазин: опубликуйте PWA в Google Play с помощью TWA и используйте специальное наименование, чтобы пользователи могли отличить его от родного приложения и выбирать предпочитаемый ими интерфейс.

Плюсы:

Идеально подходит для компаний, у которых есть отличное, но «тяжелое» нативное приложение для Android, и которые стремятся предложить лучший опыт для пользователей устройств среднего и низкого уровня и / или пользователей в зонах с плохим интернет-соединением.

Минусы:

Требуется управлять двумя списками в магазине и использовать аналитику, чтобы вдумчиво сегментировать пользователей для продвижения PWA или Native App из браузера.

Стратегия 3: Отдельные приложения для отдельных задач

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

Например:

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

Разработка:

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

Продвижение:

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

Плюсы:

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

Минусы:

Не подходит для предприятий, которые не имеют дополнительных услуг.

Стратегия 4: PWA как инструмент увеличения пользовательской базы

PWA как инструмент увеличения пользовательской базы

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

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

Разработка:

Создание прогрессивного веб-приложения
Сборка нативных приложений

Продвижение:

Браузер: продвигайте PWA всем пользователям, кроме тех, у кого уже установлено нативное приложение. Совет. Используйте API getInstalledRelatedApps, чтобы продвигать установку вашего PWA только тем пользователям, у которых не установлено собственное приложение.

Плюсы:

Идеально для упрощения процесса установки, поскольку установка PWA короткая и не требует нажатия кнопки мыши из браузера, а в магазине только с одним списком пользователям не нужно выбирать между предложениями.

Минусы:

Перемещение пользователей PWA в собственное приложение может быть затруднительно, если между продуктами мало различий.

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

Требуется поддерживать как PWA, так и собственные приложения, тогда как разница в опыте невелика.

Требования к установке PWA

Требования к установке прогрессивного веб—приложения

Основные требования для установки Progressive Web App: обслуживание по HTTPS, Service Worker и манифест веб-приложения.

HTTPS:

Все современные сайты должны использовать HTTP, независимо от того, являются ли они PWA или нет.

Service Worker:

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

Манифест веб-приложения:

Файл Manifest - это файл JSON, который информирует о том, как работает PWA при его установке. Он должен быть связан с каждой страницы, чтобы пользователь мог нажать для установки в любое время. Почти все современные браузеры имеют некоторый уровень поддержки этой возможности.

Манифест должен включать:

Короткое имя и имя: короткое имя используется на домашнем экране пользователя, в панели запуска или в других местах, где пространство может быть ограничено. Имя используется в инвайте установки приложения.
Значки: используются в таких местах, как домашний экран, панель запуска приложений, переключатель приложений, заставка и т. Д. Для Chrome требуются значки размером 192x192px и 512x512px и рекомендуются дополнительные размеры, в том числе 270x270 и 180x180. Другие размеры не обязательны для тех, кто хочет иконки с идеальным пикселем.
Start_url: это то место, где PWA должен запускаться при запуске с домашнего экрана, и предотвращает запуск приложения на той странице, на которой был пользователь при установке.
Дисплей: рекомендуется использовать «автономный» в качестве режима отображения. Это позволит PWA открываться отдельно в браузере и создавать внешний вид нативного приложения.

Apple Touch Link

Когда пользователи iOS Safari устанавливают приложение, отображаемый значок называется Apple Touch. Включите тег link rel = "apple-touch-icon" href = "/ example.webp" в head страницы, чтобы указать, какой значок должен использовать PWA. Если это не включено, iOS генерирует значок, делая снимок экрана с содержимым страницы.
Значки iOS должны быть: 180x180 пикселей или 192x192 пикселей, а фон значка не должен быть прозрачным. Эта кодовая лаборатория показывает, как именно это сделать.

Проверки

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

Публикация с использованием доверенных веб-ресурсов

Используя Trusted Web Activity (TWA), Progressive Web Apps можно интегрировать с приложением Android и публиковать в Play Store. TWA должны соответствовать критериям установки Lighthouse PWA и загружаться быстро, с показателем производительности Lighthouse 80 или выше. Они также должны соблюдать политику Play store, включая правила для платежей, покупок в приложении и других цифровых товаров.

Узнайте больше о том, как опубликовать PWA в Play с использованием TWA, и ознакомьтесь с такими инструментами, как Llama pack и PWA Builder, которые помогают упростить этот процесс.

Шаблоны для продвижения установки PWA из браузера

Рекомендуется использовать шаблоны для настройки визуальных элементов и дизайна, чтобы они соответствовали как идентичности бренда, так и потребностям клиентов. Для обзора того, какие браузеры поддерживают полностью настраиваемые возможности установки, взгляните на caniuse.com.

Установка браузера на Android Chrome

Chrome на Android позволяет полностью адаптировать запросы интерфейса. Во-первых, убедитесь, что не включены настройки по умолчанию, что вызывает мини-информационную панель.

Предотвращение мини-информационной панели по умолчанию в Chrome

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

Лучшие примеры настраиваемых приглашений пользовательского интерфейса:

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

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

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

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

Используйте умеренную аргументацию

Не секрет, что людям нужна мотивация для выполнения любой задачи. Мотивируйте пользователей устанавливать PWA, объясняя, почему они должны это делать и что они получат в конце.

В этом случае важно говорить о преимуществах, которые получит пользователь, а не только о функциях PWA.

Плохие примеры мотивирования

Плохие примеры мотивирования для установки PWA

«Не беспокойтесь о памяти телефона. Наше приложение не займет много места».

  • Избегайте негативных формулировок
  • Выделите преимущества для пользователя

«Установите наше приложение, с быстрым, надежным и легким интерфейсом».

Не говорите только о функциях приложения - пользователи не очень техничны. Подумайте: что это значит для пользователя?

Хорошие примеры мотивирования

«Установите наше бесплатное веб-приложение на рабочий стол, чтобы иметь быстрый доступ к избранным».

  • Выделите преимущества для пользователя
  • Разговор о пользователе, а не о приложении

Используйте визуальные эффекты для иллюстрации действий

“Добро пожаловать! Воспользуйтесь нашим веб-приложением, чтобы всегда иметь при себе заказы, даже когда вы не в сети”.

Мать-природа встроила в мозг способность мгновенно распознавать образы. Визуальные элементы (значки, рисунки, иллюстрации) являются очень важным сигналом - они помогают проиллюстрировать содержание и функциональность, чтобы мозг пользователя быстрее распознавал и понимал.

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

Интеграция с пользовательским интерфейсом

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

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

Установка iOS

iOS требует, чтобы пользователи установили приложение из меню браузера. Проведите пользователей через этот процесс с подсказкой установки, которая объясняет, что делать.

Десктопная установка

На рабочий стол Progressive Web Apps можно установить в браузерах Chrome и Edge во всех операционных системах. Когда веб-приложение будет доступно для установки, в омнибоксе появится значок, который привлечет внимание пользователя.

Подумайте о предоставлении руководства по пользовательскому интерфейсу, чтобы убедиться, что пользователи полностью осведомлены о том, что они могут установить PWA.

Интуитивный и качественный интерфейс установки

Эффективный интерфейс для Progressive Web App, отвечает ожиданиям пользователей в отношении установленного приложения. В качестве вдохновения можно использовать наилучшие из современных UX как из веб-приложений, так и из нативных приложений, и, как всегда, обязательно прислушивайтесь к пользователям и проверяйте свои идеи дизайна.

Установка UX

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

Иконки

Для Android рассмотрите возможность создания маскируемых значков, которые могут адаптироваться к любой форме значка, необходимой производителю телефона. Для iOS используйте обычные рекомендации по дизайну иконок iOS, но учтите, что iOS не использует иконки из файла манифеста, поэтому обязательно добавьте метатег apple-touch-icon с соответствующим изображением.

Название

Использование фирменного наименования в качестве имени PWA имеет смысл.

Если PWA использует локальные домены в зависимости от местоположения пользователя - например, example.co.uk, example.fr, рассмотрите возможность включения страны в имя PWA. Обратите внимание, что в манифесте веб-приложения нет встроенной интернационализации, поэтому для этого требуется отдельный манифест для каждого домена.

Добавление суффикса «Lite» к названию может быть хорошим способом провести различие между PWA и собственным приложением, если оба они доступны.

Запуск

Когда приложение запускается с домашнего экрана, поведение Android по умолчанию состоит в отображении белого экрана, пока PWA не будет готов. Пользователь может увидеть пустой белый экран длительностью до 200 мс. Тем не менее, заставку можно настроить, чтобы обеспечить плавный запуск. Chrome для Android автоматически настраивает заставку, если манифест содержит:

  • Имя свойства
  • Для свойства background_color установлено правильное значение цвета CSS
  • В массиве значков указывается значок размером не менее 512 на 512 пикселей
  • Значок существует и является PNG

Для iOS в настоящее время нет настройки заставки, поэтому добавьте метатеги для указания предварительно созданных заставок.

Автономный интерфейс

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

Навигация

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

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

Цветовые схемы

В Android панель браузера можно изменить в соответствии с цветом бренда приложения. Это также повлияет на автономный режим, в частности на цвет панели системных уведомлений.

Перезагрузка

Pull-to-refresh - это интуитивно понятный жест, популярный в таких приложениях, как Facebook и Twitter. Для установленных PWA рассмотрите возможность настройки режима «подтягивание к обновлению» и «прокрутка».

Обмен

Когда пользователи находятся в автономном режиме как на Android, так и на iOS, меню браузера недоступно для выбора URL и простого обмена. Подумайте о том, чтобы отобразить дополнительные кнопки, которые запускают API веб-ресурса, чтобы вызвать собственный диалог общего доступа Android и упростить обмен URL-адресами с помощью других приложений, таких как социальные сети или мессенджеры.

Создание уникального пользовательского опыта

Предоставление возможности работы в автономном режиме в Progressive Web App означает, что пользовательский интерфейс соответствует тому, что они ожидают от собственных приложений, которые часто имеют некоторые автономные функции: по крайней мере, доступен пользовательский интерфейс и отображаются разумные сообщения об ошибках, если возникают проблемы с сетевым подключением.

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

Основные положения для пользователей в автономном режиме

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

При определении работы в автономном режиме учтите следующие вопросы:

Информирование об изменении состояния

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

  • Copy - слова для информирования пользователей об изменении состояния
  • Иконки - визуальные элементы, которые помогают проиллюстрировать текущее состояние
  • Цвета - для выделения контента, доступного в автономном режиме

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

В Copy есть несколько вещей, которые следует учитывать:

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

Не стоит употреблять следующие фразы:

«Вы не подключены к Интернету. Пожалуйста, переподключите и повторите попытку. »

«Что-то пошло не так с нашей стороны».

«Похоже, что-то было отключено. Спасибо за ваше терпение, пока мы исправляемся».

Лучше использовать:

«Вы в настоящее время не в сети».

«Мы постараемся восстановить вас через 30 секунд».

«Страница будет загружена, как только вы вернетесь в сеть».

«Нажмите здесь, чтобы обновить страницу».

  • Не вините пользователя
  • Не просите пользователя исправить вещи
  • Не вините свои собственные системы, так как это влияет на доверие к сервису
  • Используйте неформальный язык с осторожностью

Вместо этого:

  • Подтвердить состояние как есть
  • Заверить пользователя, что ему не нужно ничего «исправлять»
  • Объясните, что произойдет, когда соединение вернется (нужно ли пользователю обновить или страница перезагрузится автоматически)

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

Предоставление опыта в автономном режиме

В дополнение к простому уведомлению пользователя о том, что он находится в автономном режиме.

Резервный опыт

Эта возможность предоставляет альтернативный опыт пользователю, когда соединение прерывается. Примеры:

  • Показать статическую автономную страницу. Это может содержать альтернативные способы, такие как поиск магазина, контактная информация для связи с колл-центром, контактная форма, которая отправляется, когда пользователь снова подключается к сети
  • Быть полезным и показывать соответствующую информацию из учетной записи пользователя. Туристическая компания может предоставить билеты или посадочные талоны. Продавец может показать сохраненные товары или товары в корзине
  • Развлекайте пользователей игрой, головоломкой или забавными фактами и занимайте их время, пока они ждут, когда соединение вернется

Продолжить просмотр в автономном режиме

Кэширование может использоваться, чтобы позволить пользователям продолжать просмотр, когда они находятся в автономном режиме.

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

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

Выполнять задачи в автономном режиме

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

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

Создание осмысленных уведомлений

Progressive Web Apps поддерживают push-уведомления

Progressive Web Apps поддерживают push-уведомления на Android с установкой пользователя или без него. Уведомления представляют большую ценность для бизнеса: они увеличивают количество повторных посещений и, соответственно, продажи и конверсии.

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

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

Получение разрешения

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

Появляются, когда это уместно

Основное правило - не запрашивать у пользователей разрешения на отправку уведомлений при первом посещении сайта. Запросите разрешение в нужный момент, когда уведомления могут принести пользу. Используйте предварительное разрешение интерфейса пользователя и настраивайте текст, визуальные эффекты и стиль.

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

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

Используйте аргументированные предложения

Настройте значение предложения уведомлений в соответствии с контекстом текущей страницы и действиями, которые пользователь выполняет там. Например: на странице продукта ценным предложением может быть «получить уведомление, когда этот товар появится в наличии».

Отправка уведомлений

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

Каждое уведомление состоит из трех высокоуровневых элементов.

Copy - что говорится в сообщении и как.

  • Copy состоит из имени PWA, заголовка сообщения и содержимого сообщения
  • Текст должен быть четким и лаконичным и содержать не более 40 символов
  • Не дублируйте имя приложения в тексте (оно уже есть в заголовке)
  • Убедитесь, что вся отображаемая информация актуальна для пользователя

Визуальные элементы - значок PWA или другие визуальные объекты.

  • Значок PWA является обязательным, поскольку он визуально информирует пользователя, какое приложение отправляет сообщение
  • Иногда изображение может быть добавлено для визуализации другой информации основного сообщения: например, фотография отправителя, фотография товара, который на складе, или фотография новой банковской карты, заказанной пользователем
  • Изображение и значок не должны дублировать друг друга

Действия (не обязательно) - какое действие может предпринять пользователь.

  • Здесь важно позволить пользователям выполнять некоторые действия на основе полученной информации, не открывая приложение
  • Не дублируйте действия, уже встроенные в систему взаимодействия уведомлений Android, например, стандартные действия «Нажмите, чтобы открыть» и «Отказаться»

Измерение воздействия и необходимости оптимизации PWA

Хорошо разработанное Progressive Web App должно повысить уровень вовлеченности, ускорить переходы на страницы и ускорить конверсию благодаря автономному режиму и возможности установки. Итак, как лучше всего измерить это?

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

Измерение скорости установки

Создание устанавливаемого Progressive Web App - это мощная функция, но ее успех также очень зависит от шаблонов UX, используемых для продвижения - так же, как и с приглашениями для установки нативных приложений.

Поэтому убедитесь, что у вас есть правильная аналитика для отслеживания скорости установки и коэффициентов взаимодействия / конверсии, чтобы можно было оптимизировать поток и UX.

В Chrome и Microsoft Edge всю воронку можно отслеживать следующим образом

Шаг 1

Измерить количество пользователей, имеющих возможность на установку.

Для этого изучите beforeinstallprompt, чтобы измерить число пользователей , которые могут установить приложение.

Шаг 2

Измерить количество пользователей, которые нажимают на приглашение установки пользовательского интерфейса.

Это будет зависеть от того, как именно вызывается метод prompt, но он, вероятно, будет связан с click элементом UI на странице.

Шаг 3

Измерить количество пользователей, которые принимают / отказываются от установки.

После того, как пользователь нажмет на приглашение установки пользовательского интерфейса, появится всплывающее окно установки chrome. Измерьте, принял или отклонил пользователь в свойстве userChoice.

Шаг 4

Измерьте количество пользователей, которые установили.

Успешная установка может быть измерена с помощью appinstalled.

Для других браузеров

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

Тем, кто этого не делает (например, Safari), сложнее отслеживать установки PWA. В этих случаях рекомендуется, по крайней мере, измерить использование установленного PWA, как описано в следующем разделе.

Измерение установленных PWA

Важно понимать поведение пользователей, которые установили Progressive Web App.

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

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

Использование TWA

Когда Progressive Web App публикуется в магазине Play Store с использованием операций Trusted Web, многие релевантные показатели, касающиеся скорости установки, становятся доступны непосредственно из консоли магазина.

Помимо этого отслеживания по умолчанию, существует несколько способов передачи информации в TWA через параметры запроса URL, URL-адрес реферера или заголовки запроса, и все они могут использоваться для включения дополнительного отслеживания.

Использование в Trusted Web Activity записывается с помощью обычного кода аналитики веб-сайта, но обязательно добавьте параметр отслеживания в URL-адрес TWA по умолчанию, чтобы включить фильтрацию для пользователей TWA в аналитике.

Атрибуция кампаний приложений

Кампании приложений можно использовать для продвижения PWA, опубликованного в магазине, с использованием действий Trusted Web.

Чтобы установить атрибуты, используйте атрибуцию кампании в Google Play или встроенный SDK для аналитики приложений, например, Google Analytics для Firebase.

Чтобы приписать больше, чем просто установку, кампании немного сложнее, поскольку то, что происходит в веб-части (TWA), отделено от основной части (что установлено). Вот конкретный пример того, как это можно сделать с помощью AppsFlyer, передав параметры отслеживания через URL или заголовки в сочетании с отслеживанием между серверами. Многие пакеты App Analytics поддерживают интеграцию сервера с сервером, которая может использоваться для точного отслеживания TWA.

Измерение в автономном режиме и кэширование

Атрибуция кампаний приложений

Offline

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

Для Google Analytics это легко доступно в модуле для библиотеки Workbox и означает, что все аналитические события будут по-прежнему отслеживаться, даже когда пользователь переходит в автономный режим.

Может быть полезно добавить явное отслеживание того, когда пользователь отключается или подключается к сети, используя соответствующие события браузера. Этот способ позволяет измерить, сколько пользователей перешли в автономный режим и могут быть восстановлены, а также сколько времени проведено в автономном режиме (путем вычисления времени между онлайн и офлайн-событиями и отправки его в вашу аналитику). Имейте в виду, что офлайн будет много, только если есть хороший оффлайн опыт.

Кэширование и конверсии

Service worker может принести больше конверсии, чем просто в автономном режиме.

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

Кэширование и скорость

Кэширование и скорость PWA

Четко определенные стратегии кэширования через Service worker могут сделать сайт быстрее при повторных загрузках. Ускорение с помощью Service worker можно легко измерить с помощью обычных инструментов скорости, таких как Lighthouse или Webpagetest.org, измеряя один раз с Service worker и один раз сравнивая оба. Помните, что Service worker устанавливается при первой загрузке и, как правило, оказывает наибольшее влияние на загрузку страниц после первой, поэтому обязательно измеряйте скорость при повторных загрузках или с предварительно подготовленным кешем.

Для высокой точности данных используйте выбранный аналитический пакет, отфильтруйте показатели производительности для повторных загрузок или возвращающихся пользователей и сравните данные до и после запуска сервисного работника.

Еще один вариант, который не требует дополнительной настройки, - просто отслеживать производительность в обычных условиях с помощью Отчета о работе пользователей Chrome до и после запуска (который содержит первую и повторную загрузку и поэтому должен показывать повышение скорости за счет кэширования Service worker).

Измерение Push-уведомлений

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

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

Измерение выглядит следующим образом:

Шаг 1

Измерить количество пользователей, имеющих право на push-уведомления.

Определите, доступно ли push-уведомление в браузере, с помощью функции обнаружения.

Шаг 2

Измерить количество пользователей, которые нажимают на пользовательский интерфейс уведомлений.

Это будет зависеть от того, как именно эта функция будет предлагаться пользователям.

Шаг 3

Измерить количество пользователей, которые принимают / отклоняют разрешение на push-уведомления.

После того, как пользователь примет приглашение уведомления пользовательского интерфейса, разрешение Chrome будет активировано.

Шаг 4

Измерить количество пользователей, получающих push-уведомления.

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

Шаг 5

Измерить количество пользователей, которые работают с уведомлением.

Всякий раз, когда пользователи нажимают на уведомление (или одно из действий в нем), запускается событие уведомление. Здесь добавьте аналитический код для отслеживания взаимодействия с пользователем. Точно так же есть событие закрытия уведомления, чтобы сделать то же самое для пользователей, отклоняющих уведомление без взаимодействия.

Шаг 6

Измерить уровень конверсии.

Большую часть времени, когда нажимается уведомление, оно открывает PWA. Код для этого можно найти в Интернете, и его можно использовать для добавления параметров отслеживания в URL, чтобы пометить сеанс как начатый из уведомления (например, через utm_source в Google Analytics). Однако в зависимости от пользовательского кода пакета аналитики в обработчике событий clickotification можно использовать вместо параметров URL.

Примеры качественной реализации PWA

Weekendesk превращает свой мобильный сайт в прогрессивное веб-приложение и получает в 2,5 раза больше конверсий. Weekendesk является номером 1 для выходных и коротких тематических поездок и предлагает лучший пользовательский опыт через их веб-сайт и нативное приложение.

Благодаря более чем 60% веб-сессий, проводимых с мобильных устройств и устаревшему Android-приложению, Weekendesk имеет стратегический интерес предлагать своим клиентам лучший мобильный опыт, объединяя при этом свои веб-разработки и разработки приложений.

Weekendesk постепенно добавляет современные веб-функции на свой мобильный сайт, превращая его в настоящее прогрессивное веб-приложение, которое делает его таким же удобным, как и нативное приложение.

Благодаря Service Worker сайт становится быстрее и доступен в автономном режиме, а предложение установить PWA приносит больше комфорта пользователям, которые уже задействованы.

После преобразования своего сайта в PWA Weekendesk воспользовался Trusted Web Activity, что позволило им публиковать PWA непосредственно в Play Store.

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

Для пользователей: один и тот же удобный и качественный опыт доступен везде: в Интернете и в приложении.

Для группы разработчиков продукта: более быстрая реализация новых функций и снижение затрат благодаря поддержке единого кода.

Для бизнеса: 2,5-кратная конверсия, когда пользователи приходят с установленного PWA, сайт на 30% быстрее, более активное участие в просмотрах страниц (+ 108%) и время, проведенное на сайте (+ 85%).

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

Etam, бренд нижнего белья, использует Progressive Web App для улучшения работы пользователей на мобильных устройствах.

Etam понимает важность оптимизации онлайн-общения с клиентами, особенно на мобильных устройствах. Более 70% сеансов происходит на смартфонах. Родное приложение Etam стареет, поэтому команда решила не переделывать его, а вместо этого сосредоточиться на улучшении работы в Интернете.

Разработчики сначала сосредоточились на скорости, оптимизируя код. Затем они реализовали архитектуру, которая запоминает статическое содержимое страницы, включая область клиента. Это, в частности, позволяет пользователю иметь свою карту лояльности и список избранных, даже если он не в сети.

Etam облегчает пользователям вход в систему, используя протокол WebAuth для входа с помощью отпечатка пальца. Etam также упрощает покупку всего за 3 клика, используя Google Pay.

Etam продолжает вводить новшества, публикуя свой PWA в Google Play Store, используя Trusted Web Activity (TWA). Таким образом, Etam доступен в магазине Google Play для пользователей, которые ищут бренд, и для управления кодом достаточно одной команды, чтобы обеспечить бесперебойную работу, которую можно быстро обновить.

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

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

Выводы

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

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

Вы готовы к лидерству в интернете?

Давайте обсудим перспективы продвижения вашего сайта!