Бейджи для значков приложений

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

Пит ЛеПейдж

Что такое API для маркировки приложений?

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

API App Badging позволяет установленным веб-приложениям устанавливать значок для всего приложения, отображаемый в определенном месте операционной системы, связанном с приложением (например, на полке или на главном экране).

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

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

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

Примеры приложений, которые могут использовать этот API:

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

Поддерживать

API App Badging работает в Windows и macOS, в Chrome 81 и Edge 81 или более поздних версиях. Поддержка ChromeOS находится в разработке и будет доступна в будущем выпуске. На Android API Badging не поддерживается. Вместо этого Android автоматически отображает значок на значке приложения для установленного веб-приложения при наличии непрочитанного уведомления, как и для приложений Android.

Попробуй это

  1. Откройте демонстрационную версию API App Badging .
  2. При появлении запроса нажмите «Установить» , чтобы установить приложение, или используйте меню Chrome для его установки.
  3. Откройте его как установленный PWA. Обратите внимание, он должен быть запущен как установленный PWA (на панели задач или в доке).
  4. Нажмите кнопку Установить или Очистить , чтобы установить или очистить значок на значке приложения. Вы также можете указать число для значения значка .

Как использовать API App Badging

Чтобы использовать API App Badging, ваше веб-приложение должно соответствовать критериям установки Chrome , а пользователи должны добавить его на свои домашние экраны.

API значка состоит из двух методов navigator :

  • setAppBadge( number ) : Устанавливает значок приложения. Если указано значение, установите значок на указанное значение, в противном случае отобразите простую белую точку (или другой флаг, соответствующий платформе). Установка number на 0 аналогична вызову clearAppBadge() .
  • clearAppBadge() : удаляет значок приложения.

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

Значок может быть установлен либо с текущей страницы, либо с зарегистрированного сервисного работника. Чтобы установить или очистить значок (либо на странице переднего плана, либо в сервисном работнике), вызовите:

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

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

Не предполагайте ничего о том, как пользовательский агент отображает значок. Некоторые пользовательские агенты могут взять число вроде "4000" и переписать его как "99+". Если вы сами насытите значок (например, установив его на "99"), то "+" не появится. Независимо от фактического числа, просто вызовите setAppBadge(unreadCount) и позвольте пользовательскому агенту разобраться с его отображением соответствующим образом.

Хотя API App Badging в Chrome требует установленного приложения, вам не следует делать вызовы API Badging зависимыми от состояния установки. Просто вызовите API, когда он существует, так как другие браузеры могут показывать значок в других местах. Если он работает, то он работает. Если нет, то он просто не работает.

Установка и очистка значка в фоновом режиме от сервисного работника

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

Периодическая фоновая синхронизация

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

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

API веб-Push

Push API позволяет серверам отправлять сообщения сервис-воркерам, которые могут запускать код JavaScript, даже если не запущена ни одна страница переднего плана. Таким образом, push-уведомление сервера может обновить значок, вызвав navigator.setAppBadge() .

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

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

Комбинация обоих вариантов

Хотя это и не идеально, использование Push API и периодической фоновой синхронизации вместе обеспечивает хорошее решение. Высокоприоритетная информация доставляется через Push API, показывая уведомление и обновляя значок. А низкоприоритетная информация доставляется путем обновления значка, либо когда страница открыта, либо через периодическую фоновую синхронизацию.

Обратная связь

Команда Chrome хочет узнать о вашем опыте использования API App Badging.

Расскажите нам о дизайне API

Есть ли что-то в API, что работает не так, как вы ожидали? Или отсутствуют методы или свойства, которые вам нужны для реализации вашей идеи? У вас есть вопрос или комментарий по модели безопасности?

Сообщить о проблеме с реализацией

Вы нашли ошибку в реализации Chrome? Или реализация отличается от спецификации?

  • Сообщите об ошибке на https://new.crbug.com . Обязательно включите как можно больше подробностей, простые инструкции по воспроизведению и установите Components в UI>Browser>WebAppInstalls . Glitch отлично подходит для обмена быстрыми и простыми воспроизведениями.

Показать поддержку API

Планируете использовать API App Badging на своем сайте? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты функций и показывает другим поставщикам браузеров, насколько важна их поддержка.

  • Отправьте твит @ChromiumDev , используя хэштег #BadgingAPI , и расскажите нам, где и как вы его используете.

Полезные ссылки

Героическое фото Пратика Катьяла на Unsplash