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.

Pete LePage

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

Exemple de Twitter avec huit notifications et une autre application affichant un badge avec un type de 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 à l'échelle de l'application, affiché dans un emplacement spécifique au système d'exploitation associé à l'application (par exemple, 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 de messages non lus.

Les badges sont généralement plus faciles à utiliser que les notifications et peuvent être mis à jour beaucoup plus fréquemment, car ils n'interrompent pas l'utilisateur. Et comme elles n'interrompent pas l'utilisateur, elles n'ont pas besoin de son autorisation.

Cas d'utilisation possibles

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

  • Applications de chat, de messagerie et de réseaux sociaux, pour signaler l'arrivée de nouveaux messages ou afficher le nombre d'éléments non lus.
  • Applications de productivité, pour signaler qu'une tâche en arrière-plan de longue durée (telle que 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, lorsque c'est au tour du joueur).

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 dans une prochaine version. 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 lorsqu'une notification non lue est présente, comme pour les applications Android.

Essayer

  1. Ouvrez la démo de l'API App Badging.
  2. Lorsque vous y êtes invité, cliquez sur Installer pour installer l'application ou utilisez le menu Chrome.
  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 Définir ou Effacer pour définir ou effacer le badge de l'icône de l'application. Vous pouvez également indiquer un nombre pour la valeur du badge.

Utiliser l'API App Bugging

Pour utiliser l'API App Badging, votre application Web doit répondre aux 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 badge sur la valeur fournie. Sinon, affichez un point blanc brut (ou tout autre indicateur approprié pour 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 du service worker enregistré. Pour définir ou effacer le badge (sur la page de premier plan ou dans le service worker), appelez:

// 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 ne permet pas de représenter exactement le 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 compatible avec Android, Android n'affiche jamais qu'un point au lieu d'une valeur numérique.

Ne partez pas du principe que l'user-agent affiche le badge de la même manière. Certains agents utilisateur peuvent prendre un nombre tel que "4000" et le réécrire sous la forme "99+". Si vous saturez le badge vous-même (par exemple, en le définissant sur "99"), le signe "+" n'apparaîtra pas. Quel que soit le nombre réel, appelez simplement setAppBadge(unreadCount) et laissez l'agent utilisateur s'en charger.

Bien que l'API Badging d'application dans Chrome nécessite une application installée, vous ne devez pas faire d'appels à l'API Badging en fonction de l'état d'installation. Il vous suffit d'appeler l'API lorsqu'elle existe, car d'autres navigateurs peuvent afficher le badge à d'autres endroits. Si ça fonctionne, ça fonctionne. Sinon, il ne s'affichera pas.

Définir 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. Pour ce faire, utilisez 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 d'interroger périodiquement le serveur, ce qui peut être utilisé pour obtenir un état à jour et appeler navigator.setAppBadge().

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

API Web Push

L'API Push permet aux serveurs d'envoyer des messages aux services 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 push de serveur 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 pour certains cas d'utilisation (par exemple, afficher une notification lors de la mise à jour du badge), mais il est impossible de mettre à jour le badge de manière subtile sans afficher de notification.

De plus, les utilisateurs doivent accorder l'autorisation de notification de votre site pour 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 en arrière-plan périodique constitue une bonne solution. Les informations de 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 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 manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter votre idée ? Avez-vous une question ou un commentaire concernant 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 problème et à définir Components 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 de Prateek Kayal sur Unsplash