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 l'icône de l'application.

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

Exemple de Twitter avec huit notifications et une autre application affichant un badge de type drapeau.
Exemple de Twitter avec huit notifications et une autre application affichant un badge de type drapeau.

L'API App Badging permet aux applications Web installées de définir un badge au niveau de l'application. Celui-ci s'affiche à un emplacement spécifique du système d'exploitation et associé à l'application (comme l'étagère ou l'écran d'accueil).

Les badges permettent d'informer subtilement l'utilisateur qu'une nouvelle activité peut nécessiter son attention, ou d'indiquer une petite quantité d'informations, comme un nombre non lu.

Les badges ont tendance à être plus conviviaux que les notifications et peuvent être mis à jour avec une fréquence beaucoup plus élevée, car ils n'interrompent pas l'utilisateur. Et, comme ils n'interrompent pas l'utilisateur, ils n'ont pas besoin de son autorisation.

Cas d'utilisation possibles

Voici quelques exemples d'applications susceptibles d'utiliser cette API:

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

Assistance

L'API App Badging fonctionne sous Windows et macOS, dans Chrome 81 et Edge 81 ou version ultérieure. La compatibilité avec ChromeOS est en cours de développement et sera disponible dans une prochaine version. Sur Android, l'API de badge n'est pas prise en charge. Au lieu de cela, Android affiche automatiquement un badge sur l'icône de l'application Web installée lorsqu'il y a une notification non lue, comme pour les applications Android.

Essayer

  1. Ouvrez la démonstration de l'API App Badging.
  2. Lorsque vous y êtes invité, cliquez sur Installer pour installer l'application ou utilisez le menu Chrome pour l'installer.
  3. Ouvrez-la en tant que PWA installée. Notez qu'elle doit s'exécuter en tant que PWA installée (dans votre barre des tâches ou votre dock).
  4. Cliquez sur le bouton Set (Définir) ou Clear (Effacer) pour définir ou effacer le badge à partir de l'icône d'application. Vous pouvez également indiquer un nombre dans Valeur du badge.

Utiliser l'API App Badging

Pour utiliser l'API App Badging, votre application Web doit répondre aux critères d'installation de Chrome, et les utilisateurs doivent l'ajouter à leurs écrans d'accueil.

L'API Badge comprend deux méthodes sur navigator:

  • setAppBadge(number): définit le badge de l'application. Si une valeur est fournie, définissez le badge sur cette valeur. Sinon, affichez un point blanc simple (ou tout autre indicateur adapté à la plate-forme). Définir number sur 0 revient à appeler clearAppBadge().
  • clearAppBadge(): supprime le badge de l'application.

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

Le badge peut être défini à partir de la page actuelle ou à partir du service worker enregistré. Pour définir ou effacer le badge (sur la page de premier plan ou dans 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 peut ne pas autoriser la représentation exacte du badge. Dans ce cas, le navigateur tente de fournir la meilleure représentation pour cet appareil. Par exemple, comme l'API Badging n'est pas prise en charge sur Android, Android n'affiche qu'un point au lieu d'une valeur numérique.

Ne partez pas du principe que l'user-agent affiche le badge. Certains user-agents peuvent utiliser un nombre tel que "4 000" et le remplacer par "99+". Si vous saturez vous-même le badge (par exemple, en le définissant sur "99"), le signe "+" n'apparaîtra pas. Quel que soit le numéro réel, il vous suffit d'appeler setAppBadge(unreadCount) et de laisser le user-agent l'afficher correctement.

Bien que l'API App Badging dans Chrome nécessite une application installée, vous ne devez pas l'appeler en fonction de l'état d'installation. Il suffit d'appeler l'API lorsqu'elle existe, car d'autres navigateurs peuvent afficher le badge à d'autres endroits. Si cela fonctionne, cela fonctionne. Si ce n'est pas le cas, ce n'est pas le cas.

Définir et supprimer le badge en arrière-plan pour un service worker

Vous pouvez également définir le badge de l'application en arrière-plan à l'aide du service worker. Pour ce faire, utilisez une 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 d'interroger régulièrement le serveur, ce qui peut permettre d'obtenir un état à jour, et d'appeler navigator.setAppBadge().

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

API Web Push

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

Toutefois, la plupart des navigateurs, y compris Chrome, exigent l'affichage d'une notification chaque fois qu'un message push est reçu. Cela convient à certains cas d'utilisation (par exemple, l'affichage d'une notification lors de la mise à jour du badge), mais il est impossible d'effectuer une mise à jour subtile du badge sans afficher de notification.

En outre, les utilisateurs doivent autoriser votre site à envoyer des notifications afin de recevoir des messages push.

Une combinaison des deux

Bien que ce ne soit pas parfait, l'utilisation conjointe 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 l'API Push, qui affiche une notification et met à jour le badge. De plus, les informations de priorité inférieure sont transmises en mettant à jour le badge, soit lorsque la page est ouverte, soit via une synchronisation périodique en arrière-plan.

Commentaires

L'équipe Chrome souhaite connaître votre avis sur votre expérience avec l'API App Badging.

Décrivez-nous la conception de l'API.

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il 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 est-elle différente des spécifications ?

  • Signalez un bug à l'adresse https://new.crbug.com. Veillez à inclure autant de détails que possible, à des instructions simples pour reproduire le bug et à définir le champ Composants sur UI>Browser>WebAppInstalls. Glitch est idéal pour partager des reproductions rapides et faciles.

Afficher la compatibilité avec l'API

Vous prévoyez d'utiliser l'API App Badging sur votre site ? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Liens utiles

Photo principale par Prateek Katyal sur Unsplash