Как заставить пользователей быстро перейти к вашему приложению

Привет, Средний!

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

Перед тем, как мы начнем, обратите внимание: Требуются начальные знания о PWA (как создать PWA и сделать его устанавливаемым).

Введение в ярлыки

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

Примеры использования

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

Как это выглядит?

Меню ярлыков на Android появляется после длительного нажатия значка PWA. Вот как это выглядит:

В Windows меню ярлыков вызывается щелчком правой кнопкой мыши по значку PWA на панели задач. Вот как это выглядит:

Пример кода

Это делается с помощью нескольких строк кода. В файле манифеста веб-приложения необходимо добавить новое свойство shortcuts (тип массива). Ниже приведен пример:

Массив shortcuts имеет следующие свойства:

  • name : Обязательно. Удобочитаемый ярлык для ярлыка приложения при отображении для пользователя.
  • short_name : Необязательно. Удобочитаемый ярлык, используемый при ограниченном пространстве. Рекомендуется предоставить его.
  • description : Необязательно. Указывает цель действия ярлыка.
  • url : Обязательно. URL-адрес, который загружается, когда пользователь активирует ярлык. Этот URL-адрес должен существовать в области действия файла манифеста веб-приложения. Если url является относительным URL-адресом, базовым URL-адресом будет URL-адрес манифеста.
  • icons : Необязательно. Массив объектов ресурса изображения. Обязательными свойствами каждого объекта являются src и sizes (свойство type необязательно).

Файлы SVG в настоящее время не поддерживаются - используйте PNG. В противном случае рекомендуется использовать один значок размером 192 x 192 пикселя.

Служба поддержки

Доступны ярлыки приложений:

  • Chrome 84 на Android (в настоящее время доступно через Chrome Dev)
  • Chrome 84 и Edge 84, включив флаг about://flags/#enable-desktop-pwas-app-icon-shortcuts-menu в Windows

Пример

Последняя мысль

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

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

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

Спасибо за уделенное время, дорогой читатель!

Ресурсы