Как заставить пользователей быстро перейти к вашему приложению
Привет, Средний!
В этой статье я хочу объяснить и показать пример новой функции ярлыков для 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 прямо сейчас по следующим причинам:
- Создавайте ярлыки быстро и легко
- Устройства, которые не поддерживают эту функцию, просто не будут отображать ее (вы ничего не сломаете в коде)
Я уверен, что скоро другие браузеры добавят поддержку ярлыков. Когда это произойдет, вы будете впереди остальных.
Спасибо за уделенное время, дорогой читатель!