Badging API : limites des notifications PWA

Un badge PWA peut signaler qu’un travail attend sans ouvrir une demande de permission, mais ce n’est ni un canal de livraison ni une autorisation. BotBrowser peut rejouer une page autorisée qui appelle navigator.setAppBadge() et navigator.clearAppBadge() et enregistrer la branche de capacité visible ; il ne peut pas ajouter la prise en charge de Badging API, livrer Web Push ou prouver qu’un compteur privé est acceptable. Pour le flux du service worker, lisez cycle de vie et confidentialité Web Push ; pour les contenus partagés, entrée PWA Web Share Target décrit une autre frontière.

TL;DR

• setAppBadge() demande un nombre ou un point sur le raccourci de l’application ; clearAppBadge() retire cet état.
• Un badge est un indice de présentation. Il ne demande pas la permission de notification, ne réveille pas un service worker, ne livre pas un push et ne prouve pas la lecture.
• Utilisez un compteur utile et borné. Réduisez les grands nombres, excluez les identifiants et catégories sensibles, puis effacez après la reconnaissance réelle du travail.
• Détectez navigator.setAppBadge et navigator.clearAppBadge; sinon fournissez un repli honnête dans l’application.
• Séparez badge, Notification, PushManager et les traces de livraison serveur.

Contents

• Définir le contrat du badge
• Choisir nombre, point et moment d’effacement
• Construire un repli non pris en charge
• Séparer badge, push et notifications
• Minimiser les compteurs et vérifier les frontières
• Practical conclusion

Définir le contrat du badge

La spécification W3C Badging expose setAppBadge() et clearAppBadge() sur Navigator. Ils visent la représentation de l’application dans un lanceur ou un sélecteur de tâches, pas un élément DOM. Le système peut afficher un nombre, un point ou rien selon l’installation, le navigateur et les réglages. Une promesse résolue signifie que le navigateur a accepté la demande, pas que le lanceur a peint des pixels précis.

Le nombre doit résumer un travail que la personne peut accomplir. navigator.setAppBadge(3) ne crée pas trois notifications et ne prouve pas trois arrivées. Sans argument, navigator.setAppBadge() demande un badge non numérique. Utilisez le point lorsque le nombre est incertain ou trop révélateur. Les références MDN de setAppBadge() et clearAppBadge() décrivent l’API, sans garantir le même rendu sur chaque plateforme.

Un seul propriétaire doit calculer l’état. Page, worker et synchronisation ne doivent pas inventer des compteurs à partir de snapshots concurrents. Conservez seulement source, countKind, count, updatedAt, revision et outcome; excluez titres, identifiants et corps privés. Rejetez une révision ancienne qui remettrait 4 après l’effacement d’un autre onglet.

Choisir nombre, point et moment d’effacement

Un nombre comme 7 aide lorsqu’il guide une décision. Les retries internes ou événements cachés ne sont pas du travail utilisateur. Limitez à 99, puis utilisez un point ou une étiquette 99+ propre à l’interface. Cette limite protège l’utilisabilité et réduit la précision inutile. La présentation Chrome de Badging montre le cas PWA, mais pas la sémantique de votre produit.

Effacez lors d’une transition d’état, jamais avec un simple minuteur. Appelez clearAppBadge() après l’action représentée ou après une écriture autorisée confirmant le nouvel état. Ouvrir une boîte de réception n’est pas toujours lire. Pour deux éléments lus sur cinq, calculez 3 depuis l’état autoritatif plutôt que de soustraire deux d’un cache. Une réponse tardive doit être rejetée avec une revision monotone. Au logout, changement de compte ou perte d’autorisation, effacez le badge et supprimez l’état local du compte.

async function applyBadge(state) {
  const { revision, count, acknowledged, supported } = state;
  if (!supported || typeof navigator.setAppBadge !== 'function') {
    return { revision, outcome: 'unsupported', fallback: 'in-app-status' };
  }
  if (acknowledged || count === 0) {
    if (typeof navigator.clearAppBadge !== 'function') {
      return { revision, outcome: 'clear-unsupported', fallback: 'in-app-status' };
    }
    await navigator.clearAppBadge();
    return { revision, outcome: 'cleared' };
  }
  if (state.countKind === 'dot') {
    await navigator.setAppBadge();
    return { revision, outcome: 'dot' };
  }
  const bounded = Math.min(Math.max(0, count), 99);
  await navigator.setAppBadge(bounded);
  return { revision, outcome: 'number', count: bounded };
}

Construire un repli non pris en charge

Testez les deux méthodes à chaque utilisation:

const canBadge = 'setAppBadge' in Navigator.prototype && 'clearAppBadge' in Navigator.prototype;

Contexte sécurisé, mode installé, version du navigateur, intégration système et politique gérée peuvent modifier le résultat. Le guide MDN Badging API décrit la disponibilité, mais n’autorise pas à simuler le badge du lanceur en changeant l’icône d’une autre application.

Si l’API manque, rendez le même état dans l’application: compteur accessible, titre mis à jour ou marque visible. Le repli doit aussi effacer après la même écriture autoritative. N’utilisez pas Web Push comme repli: il exige abonnement, worker, permissions et serveur, sans garantie d’exécution en arrière-plan. Un résultat { "capability": "absent", "fallback": "in-app-status" } suffit au support; n’enregistrez pas le texte d’une conversation.

Séparer badge, push et notifications

Notification demande la permission d’afficher une notification système; Badging API n’ouvre pas cette demande. Web Push est une occasion de livraison au service worker, pas un état de badge. Notification MDN, Push API et guide Push MDN décrivent des surfaces distinctes.

Surface	Demande	Ne prouve pas	Propriétaire
Badging API	nombre ou point local	pixels, livraison, lecture	état coordonné
Notification	permission et écran système	attention ou lecture	page ou worker
Web Push	occasion de livraison	heure d’arrivée ou état	push et worker

Un push peut mettre à jour un enregistrement minimisé et une page active peut réconcilier le badge. Le nombre vient de l’état non lu autoritatif, jamais du nombre d’événements push. N’effacez pas après l’affichage d’une notification: l’affichage n’est pas l’accusé de lecture.

Minimiser les compteurs et vérifier les frontières

Un nombre sur un écran verrouillé ou une capture est une divulgation. Préférez un point, une tranche (1, 2-5, 6-20) ou un maximum. Calculez après autorisation et avant l’appel; ne passez jamais d’identifiant utilisateur ou de conversation comme argument. Le fixture ci-dessous ne prouve que le choix de branche:

const record = {
  fixtureId: 'badge-boundary-01',
  countKind: 'bounded',
  count: 3,
  revision: 18,
  outcome: 'pending',
};

try {
  if (typeof navigator.setAppBadge !== 'function') {
    record.outcome = 'unsupported';
  } else if (record.count === 0 && typeof navigator.clearAppBadge === 'function') {
    await navigator.clearAppBadge();
    record.outcome = 'cleared';
  } else if (record.count > 0) {
    await navigator.setAppBadge(Math.min(record.count, 99));
    record.outcome = 'number-requested';
  } else {
    record.outcome = 'clear-unsupported';
  }
} catch (error) {
  record.outcome = error.name === 'NotAllowedError' ? 'policy-error' : 'api-error';
}

Répétez avec méthodes présentes, absentes, après reconnaissance et après rejet. Gardez browserVersion, context, revision, countKind et outcome, sans données de compte. BotBrowser peut capturer ces branches dans un contexte autorisé; il ne peut pas forcer le rendu du lanceur, accorder une permission, livrer un push ni certifier la confidentialité d’un compte réel. Comparez le premier champ changé après un changement de navigateur, manifest ou worker.

{
  "fixtureId": "badge-boundary-01",
  "context": "installed-pwa",
  "revision": 18,
  "countKind": "bounded",
  "requestedCount": 3,
  "outcome": "number-requested"
}

Sources publiques

• Spécification W3C Badging
• MDN : Badging API
• MDN : Navigator.setAppBadge()
• MDN : Navigator.clearAppBadge()
• Chrome Developers : Badging API
• MDN : Notification
• W3C Push API
• MDN : Push API
• MDN : PWA installation
• BotBrowser : cohérence de l’automatisation

Practical conclusion

Utilisez setAppBadge() pour un nombre ou point borné et clearAppBadge() après reconnaissance ou réconciliation. Détectez les deux méthodes, gardez un repli accessible et n’enregistrez que capacité, révision et résultat. Badge, permission de notification et livraison Web Push restent indépendants. BotBrowser peut rejouer la machine d’état synthétique, mais le lanceur et la décision de confidentialité restent hors du fixture. Définissez le propriétaire du compteur et l’événement d’effacement avant chaque répétition.