Badges pour les icônes d'application

L'API App Badging permet aux applications Web installées de définir un badge à l'échelle de l'application sur son icône.

Pete LePage

Qu'est-ce que l'API App Badging ?

<ph type="x-smartling-placeholder">
</ph> Exemple de Twitter avec huit notifications et une autre application affichant un badge avec un type de drapeau. <ph type="x-smartling-placeholder">
</ph> Exemple de Twitter avec huit notifications et une autre application affichant un indicateur type de badge.

L'API App Badging permet aux applications Web installées de définir un badge à l'échelle de l'application, affiché à un emplacement spécifique au système d'exploitation associé à l'application (comme l'étagère ou l'écran d'accueil).

Les badges permettent d'informer subtilement l'utilisateur qu'il y a une nouvelle activité nécessitant leur attention, ou pour indiquer une faible quantité telles que le nombre d'éléments non lus.

Les badges sont généralement plus conviviaux que les notifications et peuvent être modifiés avec une fréquence beaucoup plus élevée, car ils n'interrompent pas l'utilisateur. Et parce qu'ils n'interrompent pas l'utilisateur, ils n'ont pas besoin de l'autorisation de l'utilisateur.

Cas d'utilisation possibles

Voici quelques exemples d'applications qui peuvent utiliser cette API:

  • Chat, e-mail et applications de réseaux sociaux, pour signaler l'arrivée de nouveaux messages, ou pour affichent le nombre d'éléments non lus.
  • les applications de productivité, pour signaler qu'une tâche en arrière-plan de longue durée (comme l'affichage d'une image ou d'une vidéo) est terminée.
  • Jeux, pour signaler qu'une action est requise de la part du joueur (par exemple, aux échecs, c'est au joueur de jouer).

Assistance

L'API App Badging fonctionne sous Windows et macOS, dans Chrome 81 et Edge 81 ou versions ultérieures. La compatibilité avec ChromeOS est en cours de développement et sera disponible prochainement. de sortie. Sur Android, l'API Badging n'est pas compatible. À la place, Android affiche automatiquement un badge sur l'icône de l'application Web installée. en cas de notification non lue, tout comme pour les applications Android.

Essayer

  1. Ouvrez le Démonstration de l'API App Badging
  2. Lorsque vous y êtes invité, cliquez sur Installer pour installer l'application ou utilisez l'application Chrome pour l'installer.
  3. Ouvrez-la en tant que PWA installée. Notez qu'elle doit être en cours d'exécution en tant que PWA installée. (dans votre barre des tâches ou votre Dock).
  4. Cliquez sur le bouton Définir ou Effacer pour activer ou désactiver le badge dans l'application. . Vous pouvez également indiquer un nombre pour la valeur du badge.

Utiliser l'API App Bugging

Pour que vous puissiez utiliser l'API App Badging, votre application Web doit respecter Critères d'installabilité de Chrome et les utilisateurs doivent l'ajouter à leurs écrans d'accueil.

L'API Badge se compose de deux méthodes sur navigator:

  • setAppBadge(number): définit le badge de l'application. Si une valeur est fournie, définissez le à la valeur fournie. Sinon, un point blanc uni (ou une autre le signaler en fonction de la plate-forme). Définir number sur 0 revient à en appelant clearAppBadge().
  • clearAppBadge(): supprime le badge de l'application.

Tous deux renvoient des promesses vides que vous pouvez utiliser pour la gestion des erreurs.

Vous pouvez définir le badge à partir de la page actuelle ou du badge enregistré un service worker. Pour activer ou désactiver le badge (sur la page de premier plan ou le service worker), appelez la commande suivante:

// 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.
});

Dans certains cas, le système d'exploitation n'autorise pas la représentation exacte du badge. Dans ce cas, le navigateur essaiera de fournir la meilleure représentation possible pour cet appareil. Par exemple, l'API Badging n'étant pas compatible avec Android, Android n'affiche qu'un point au lieu d'une valeur numérique.

Ne partez pas du principe que le user-agent affiche le badge. Certains user-agents peuvent utiliser un nombre tel que "4000" et réécrivez-la sous la forme "99+". Si vous saturez vous-même le badge (par exemple, en le définissant sur 99) puis le signe "+" ne s'afficheront pas. Quel que soit le numéro, il suffit d'appeler setAppBadge(unreadCount) et laisser le user-agent s'occuper l'afficher en conséquence.

Bien que l'API App Badging dans Chrome nécessite une application installée, vous ne devez pas d'effectuer des appels vers l'API Badging en fonction de l'état d'installation. Il vous suffit d'appeler la méthode API lorsqu'elle existe, car d'autres navigateurs peuvent afficher le badge à d'autres endroits. Si ça marche, ça marche. Sinon, ce n'est tout simplement pas le cas.

Configurer et effacer le badge en arrière-plan à partir d'un service worker

Vous pouvez également définir le badge d'application en arrière-plan à l'aide du service worker. Effectuez l'une des opérations suivantes : via la synchronisation périodique en arrière-plan, l'API Push ou une combinaison des deux.

Synchronisation périodique en arrière-plan

La synchronisation périodique en arrière-plan permet à un service worker pour interroger régulièrement le serveur, ce qui peut être utilisé pour obtenir un état mis à jour, et appelez navigator.setAppBadge().

Cependant, la fréquence à laquelle la synchronisation est appelée n'est pas tout à fait fiable, et est appelé à la discrétion du navigateur.

API Web Push

L'API Push permet aux serveurs d'envoyer des messages aux service workers, qui peut exécuter du code JavaScript même lorsqu'aucune page de premier plan n'est en cours d'exécution. Ainsi, une transmission via le serveur peut mettre à jour le badge en appelant navigator.setAppBadge().

Toutefois, la plupart des navigateurs, y compris Chrome, exigent qu'une notification soit affiché à chaque réception d'un message push. Cela convient dans certains cas (par exemple, l'affichage d'une notification lors de la mise à jour le badge), mais il est impossible de le modifier subtilement sans affichant une notification.

De plus, les utilisateurs doivent accorder l'autorisation de notification à votre site pour recevoir des messages en mode push.

Une combinaison des deux

Bien que ce ne soit pas parfait, l'utilisation simultanée de l'API Push et de la synchronisation périodique en arrière-plan constitue une bonne solution. Les informations à priorité élevée sont transmises via la méthode Push. API, affichant une notification et mettant à jour le badge. Priorité faible les informations sont fournies en mettant à jour le badge, que ce soit lorsque la page est ouverte, ou via une synchronisation périodique en arrière-plan.

Commentaires

L'équipe Chrome aimerait connaître votre avis sur l'API App Bugging.

Présentez-nous la conception de l'API

L'API comporte-t-elle un élément qui ne fonctionne pas comme prévu ? Ou sont s'il manque des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Avez-vous une question ou un commentaire sur le modèle de sécurité ?

Signaler un problème d'implémentation

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation différent des spécifications ?

  • Signalez un bug sur https://new.crbug.com. Assurez-vous d'inclure autant de détails que des instructions simples pour reproduire le problème, puis définissez Components sur UI>Browser>WebAppInstalls Glitch fonctionne parfaitement partager des reproductions rapides et faciles.

Apportez votre soutien à l'API

Vous prévoyez d'utiliser l'API App Badging sur votre site ? Votre soutien public aide le l'équipe Chrome à prioriser les fonctionnalités, et montre aux autres fournisseurs de navigateurs à quel point est de les soutenir.

  • Envoyez un tweet à @ChromiumDev en utilisant le hashtag. #BadgingAPI et n'hésitez pas à nous dire où et comment vous l'utilisez.

Liens utiles

Photo principale de Prateek Ktyal sur Désactiver