Chaque application mérite un badge
C'est un modèle d'interface utilisateur très courant que vous voyez tous les jours pour les applications natives de votre appareil : un badge de notification. C'est un excellent concept qui informe les utilisateurs de certaines informations manquées via un indicateur simple et petit. Le plus souvent, il s'agit d'un compteur et pour certaines applications spéciales, un badge personnalisé ou un ajustement visuel de l'icône est utilisé, par exemple sur l'application Keychain de macOS, où une pièce orange indique que le porte-clés est déverrouillé et accessible.
Mais revenons au badge par défaut. Grâce à Google qui fait constamment avancer le Web, votre application Web progressive installée peut également afficher un compteur sous forme de badge.
Conditions préalables
Pour que votre application Web puisse afficher un badge, elle doit répondre aux "critères d'installation" de Google, liés ci-dessous dans l'addendum. Et c'est tout à fait logique : votre PWA doit être installé sur un appareil afin d'avoir une place fixe dans votre système. Sous Windows, vos applications vivent dans la barre des tâches et sous macOS, elles se trouvent dans le Dock.
Si vous ne le savez pas encore, votre application web peut être progressivement améliorée pour évoluer vers une nouvelle classe d'applications appelées « Progressive Web Apps », ou PWA en abrégé. Les PWA prennent en charge une grande variété de nouvelles fonctionnalités qui n'étaient auparavant disponibles que pour les applications natives. Vous pouvez consulter de nombreux articles sur les PWA sur cette application Web, qui est elle-même une PWA pouvant être installée.
Notez que la prise en charge de l'API App Badging est actuellement limitée aux navigateurs Chromium et uniquement prise en charge sur les appareils de bureau ainsi que sur Android. L'état général de l'API est stable pour Chromium, mais n'est en aucun cas pris en charge par les autres navigateurs. Par conséquent, l'utilisation ne devrait pas être une exigence obligatoire pour utiliser l'application, mais plutôt améliorer progressivement l'UX existant.
Comment ça fonctionne
L'implémentation réelle est très simple et ne nécessite que quelques lignes de code pour couvrir tous les cas d'utilisation.
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
Un aspect très intéressant de cette nouvelle API est qu'elle peut également être utilisée dans votre Service Worker, ce qui signifie que, si elle est implémentée, votre PWA installée peut récupérer des données en arrière-plan et recevoir des notifications push, qui à leur tour peuvent mettre à jour le badge de votre application !
Conclusion
Comme vous l'avez vu, l'utilisation de l'API App Badging est très simple. Tout ce dont vous avez besoin pour tester est un navigateur basé sur Chromium ainsi qu'un simple PWA qui peut être installé. Il ne faut pas s'attendre à ce que cette API soit disponible sur Safari ou Firefox de sitôt, car cela implique également plus d'engagement envers les PWA en général par ces équipes. Mais pour une UX améliorée pour votre application Web dans la mesure du possible, c'est une grande victoire et doit absolument être utilisé !
