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 d'une autre application affichant un badge de type drapeau.
Exemple de Twitter avec huit notifications et d'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 (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 le nombre de messages non lus.

Les badges sont généralement plus conviviaux que les notifications et peuvent être mis à jour beaucoup plus fréquemment, car ils n'interrompent pas l'utilisateur. De plus, comme ils n'interrompent pas l'utilisateur, ils 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 de longue durée en arrière-plan (comme le rendu d'une image ou d'une vidéo) est terminée.
  • Les jeux, pour signaler qu'une action du joueur est requise (par exemple, aux échecs, lorsque c'est au tour du joueur).

Assistance

L'API App Badging fonctionne sur 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. L'API Badging n'est pas compatible avec Android. 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'il 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 Badging

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 à leur écran 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 cette valeur. Sinon, affichez un point blanc uni (ou un 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 du service worker enregistré. Pour définir ou effacer le badge (dans la page au premier plan ou 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, il est possible que le système d'exploitation ne permette pas de représenter exactement le badge. Dans ce cas, le navigateur tentera de fournir la meilleure représentation pour cet appareil. Par exemple, comme l'API Badging n'est pas compatible avec Android, Android n'affiche qu'un point au lieu d'une valeur numérique.

Ne partez pas du principe que vous savez comment l'user-agent affiche le badge. Certains user-agents peuvent prendre un nombre comme "4000" et le réécrire sous la forme "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 nombre réel, appelez simplement setAppBadge(unreadCount) et laissez l'agent utilisateur s'occuper de l'afficher en conséquence.

Bien que l'API App Badging dans Chrome nécessite une application installée, vous ne devez pas rendre les appels à l'API Badging dépendants de l'état d'installation. Appelez simplement l'API lorsqu'elle existe, car d'autres navigateurs peuvent afficher le badge ailleurs. Si ça marche, ça marche. Sinon, il ne le fait pas.

Définir et effacer le badge en arrière-plan à partir d'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 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 régulièrement le serveur, ce qui peut être utilisé pour obtenir un état mis à jour et appeler navigator.setAppBadge().

Toutefois, 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 push serveur peut mettre à jour le badge en appelant navigator.setAppBadge().

Toutefois, la plupart des navigateurs, y compris Chrome, exigent qu'une notification s'affiche chaque fois qu'un message push est reçu. Cela convient à 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 à votre site l'autorisation d'envoyer des notifications pour pouvoir recevoir des messages push.

Une combinaison des deux

Bien que cette solution ne soit pas parfaite, l'utilisation conjointe de l'API Push et de la synchronisation périodique en arrière-plan constitue une bonne solution. Les informations à haute priorité sont fournies via l'API Push, qui affiche une notification et met à jour le badge. Les informations de priorité inférieure sont fournies en mettant à jour le badge, soit lorsque la page est ouverte, soit par le biais d'une synchronisation périodique en arrière-plan.

Commentaires

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

Parlez-nous de la conception de l'API

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou bien manquent-ils des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ?

Signaler un problème d'implémentation

Avez-vous trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ?

  • Signalez un bug sur https://new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et définissez Composants sur UI>Browser>WebAppInstalls.

Soutenir l'API

Vous prévoyez d'utiliser l'API App Badging sur votre site ? Votre soutien public 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 de Prateek Katyal sur Unsplash