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 ?
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 (par exemple, l'étagère ou l'écran d'accueil).
Les badges permettent de signaler facilement et 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 ont tendance à être 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
- Ouvrez la démonstration de l'API App Badgeging.
- Lorsque vous y êtes invité, cliquez sur Installer pour installer l'application ou utilisez le menu Chrome pour l'installer.
- 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).
- 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'installation 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 (ou un autre indicateur adapté à la plate-forme). Définirnumber
sur0
revient à appelerclearAppBadge()
.clearAppBadge()
: supprime le badge de l'application.
Tous 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 n'autorise pas 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 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 user-agents peuvent prendre un chiffre 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 "+" ne s'affichera 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 marche, ça marche. 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 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 servir à obtenir un état mis à jour, et d'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 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 autoriser les notifications 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 souhaite connaître votre expérience avec l'API App Badging.
Présentez-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 implémenter votre idée ? Avez-vous une question ou un commentaire concernant le modèle de sécurité ?
- Signalez un problème de spécification dans le dépôt GitHub de l'API Badging ou ajoutez vos réflexions à un problème existant.
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 à 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.
Apportez votre soutien à 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.
- Envoyez un tweet à @ChromiumDev en utilisant le hashtag
#BadgingAPI
et indiquez-nous où et comment vous l'utilisez.
Liens utiles
- Explication publique
- Brouillon de spécifications
- Démonstration de l'API Badging | Source de la démonstration de l'API Badging
- Bug de suivi
- Entrée sur ChromeStatus.com
- Composant clignotant :
UI>Browser>WebAppInstalls
Photo de l'illustration principale par Prateek Katyal sur Unsplash