Быстрые действия при нажатии на иконку PWA-приложения

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

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

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

Это перевод статьи https://web.dev/app-shortcuts/

О ярлыках приложений

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

Контекстное меню приложения вызывается щелчком правой кнопкой мыши значка приложения на панели задач (Windows) или док-станции (macOS) на рабочем столе пользователя или долгим нажатием значка средства запуска приложения на Android.

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

Каждая команда (ярлык) в меню быстрого доступа связано с URL-адресом в области вашего веб-приложения. URL-адрес открывается, когда пользователи нажимают на команду (ярлык) в этом меню. Ниже приведены примеры.

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

Определение ярлыков приложений в манифесте веб-приложения

Ярлыки приложений дополнительно определяются в манифесте веб-приложения (manifest.json) — файле, который сообщает браузеру о вашем прогрессивном веб-приложении и о том, как оно должно вести себя при установке на настольный компьютер или мобильное устройство пользователя. А если точнее, они прописываются в массиве shortcuts вышеуказанного файла. Ниже приведен пример манифеста, в котором указаны ярлыки быстрых действий.

Copied!{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}
{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

Каждый массив shortcuts должен содержать в себе в обязательном порядке параметры name и url. Другие параметры (такие, как description или icons) являются необязательными.

Ниже о том, что означают все эти параметры.

name

Текст, который будет отображаться в меню быстрого доступа.

short_name 

Укороченная версия текста в меню быстрого доступа.

description 

Описание быстрого действия. На данный момент не используется ни в одном браузере.

url

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

icons 

Массив объектов ресурсов изображений. Каждый объект должен содержать src и свойство sizes (размер). В отличие от значков манифеста веб-приложения, type изображения является необязательным.

Файлы SVG не поддерживаются на момент написания статьи, вместо этого используйте PNG.

Если хотите использовать разные размеры иконок для разных экранов, используйте размеры с шагом 48dp (т.е. 36×36, 48×48, 72×72, 96×96, 144×144, 192×192 пикселей). Или просто используйте один значок размером 192×192 пикселя.

Рекомендации

Упорядочивание ярлыков приложений по приоритету 

Рекомендуется упорядочивать ярлыки приложений по приоритету, причем наиболее важные ярлыки приложений появляются первыми в меню быстрого доступа, поскольку ограничение на количество отображаемых ярлыков приложений варьируется в зависимости от платформы. Например, Chrome и Edge в Windows ограничивают количество ярлыков приложений до 10, в то время как Chrome для Android учитывает только первые 4 ярлыка приложений.

Использование различных имен ярлыков приложений 

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

Используйте utm-метки 

Вы можете использовать такие же utm-метки, которые применяются в параметре start_url для отслеживания аналитики (например url: "/my-shortcut?utm_source=homescreen").

Поддержка браузеров 

Ярлыки приложений на февраль 2022 года доступны на Android (Chrome 84), Windows (Chrome 85 и Edge 85), Chrome OS (Chrome 92), macOS и Linux (Chrome 96 и Edge 96).

Это перевод статьи https://web.dev/app-shortcuts/