Badge per le icone delle app

L'API App Badging consente alle app web installate di impostare un badge a livello di applicazione sull'icona dell'app.

Pete LePage

Che cos'è l'API App Badging?

Esempio di Twitter con otto notifiche e un'altra app con un badge a forma di bandierina.
Esempio di Twitter con otto notifiche e un'altra app con un badge di tipo flag.

L'API App Badging consente alle app web installate di impostare un badge a livello di applicazione, mostrato in una posizione specifica del sistema operativo associata all'applicazione (ad esempio, nella barra delle app o nella schermata Home).

Il badge consente di notificare in modo discreto all'utente la presenza di nuove attività che potrebbero richiedere la sua attenzione oppure di indicare una piccola quantità di informazioni, ad esempio un conteggio dei dati da leggere.

I badge tendono a essere più intuitivi delle notifiche e possono essere aggiornati con una frequenza molto più elevata, poiché non interrompono l'utente. Inoltre, poiché non interrompono l'utente, non è necessaria l'autorizzazione dell'utente.

Possibili casi d'uso

Ecco alcuni esempi di app che potrebbero utilizzare questa API:

  • Chat, email e app social per segnalare che sono arrivati nuovi messaggi o per mostrare il numero di elementi da leggere.
  • App di produttività per segnalare il completamento di un'attività in background a lunga esecuzione (come il rendering di un'immagine o di un video).
  • Giochi, per segnalare che è richiesta un'azione da parte del giocatore (ad esempio, negli scacchi, quando è il suo turno).

Assistenza

L'API App Badging funziona su Windows e macOS in Chrome 81 ed Edge 81 o versioni successive. Il supporto per ChromeOS è in fase di sviluppo e sarà disponibile in una versione futura. Su Android, l'API Badging non è supportata. Invece, Android mostra automaticamente un badge sull'icona dell'app web installata quando c'è una notifica da leggere, proprio come per le app per Android.

Prova

  1. Apri la demo dell'API App Badging.
  2. Quando richiesto, fai clic su Installa per installare l'app o utilizza il menu Chrome per installarla.
  3. Aprila come PWA installata. Tieni presente che deve essere in esecuzione come PWA installata (nella barra delle applicazioni o nel dock).
  4. Fai clic sul pulsante Imposta o Cancella per impostare o cancellare il badge dall'icona dell'app. Puoi anche fornire un numero per il valore del badge.

Come utilizzare l'API App Badging

Per utilizzare l'API App Badging, la tua app web deve soddisfare i criteri di installabilità di Chrome e gli utenti devono aggiungerla alle proprie schermate Home.

L'API Badge prevede due metodi su navigator:

  • setAppBadge(number): imposta il badge dell'app. Se fornisci un valore, imposta il badge sul valore fornito e mostra un punto bianco (o un altro contrassegno appropriato per la piattaforma). Impostare number su 0 equivale a chiamare clearAppBadge().
  • clearAppBadge(): rimuove il badge dell'app.

Entrambe restituiscono promesse vuote che puoi utilizzare per la gestione degli errori.

Il badge può essere impostato dalla pagina corrente o dal service worker registrato. Per impostare o cancellare il badge (nella pagina in primo piano o nel service worker), chiama:

// 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.
});

In alcuni casi, il sistema operativo potrebbe non consentire la rappresentazione esatta del badge. In questi casi, il browser tenterà di fornire la rappresentazione migliore per il dispositivo. Ad esempio, poiché l'API Badging non è supportata su Android, Android mostra sempre solo un punto anziché un valore numerico.

Non dare per scontato che lo user agent mostri il badge. Alcuni user agent potrebbero prendere un numero come "4000" e riscriverlo come "99+". Se saturano personalmente il badge (ad esempio impostandolo su "99"), il segno "+" non verrà visualizzato. Non importa il numero effettivo, chiama setAppBadge(unreadCount) e lascia che lo user agent lo mostri di conseguenza.

Sebbene l'API App Badging in Chrome richieda un'app installata, non dovresti effettuare chiamate all'API Badging in base allo stato di installazione. È sufficiente chiamare l'API quando esiste, perché altri browser potrebbero mostrare il badge in altre posizioni. Se funziona, funziona. In caso contrario, non è così.

Impostazione e cancellazione del badge in background da parte di un service worker

Puoi anche impostare il badge dell'app in background utilizzando il service worker. Esegui questa operazione tramite una sincronizzazione periodica in background, l'API Push o una combinazione di entrambe.

Sincronizzazione periodica in background

La sincronizzazione periodica in background consente a un service worker di eseguire periodicamente il polling del server, operazione che potrebbe essere utilizzata per ottenere uno stato aggiornato e di chiamare navigator.setAppBadge().

Tuttavia, la frequenza con cui viene richiamata la sincronizzazione non è perfettamente affidabile ed è definita a discrezione del browser.

API Web Push

L'API Push consente ai server di inviare messaggi ai service worker, che possono eseguire il codice JavaScript anche quando non è in esecuzione nessuna pagina in primo piano. Di conseguenza, un push del server potrebbe aggiornare il badge chiamando navigator.setAppBadge().

Tuttavia, la maggior parte dei browser, Chrome incluso, richiede la visualizzazione di una notifica ogni volta che viene ricevuto un messaggio push. Questo va bene in alcuni casi d'uso (ad esempio mostrare una notifica durante l'aggiornamento del badge), ma rende impossibile aggiornare il badge in modo discreto senza visualizzare una notifica.

Inoltre, gli utenti devono concedere l'autorizzazione alle notifiche del sito per ricevere i messaggi push.

Una combinazione di entrambi

Sebbene non siano perfetti, l'utilizzo dell'API Push e della periodica sincronizzazione in background insieme rappresentano una buona soluzione. Le informazioni ad alta priorità vengono inviate tramite l'API Push, che mostra una notifica e aggiorna il badge. Inoltre, le informazioni con priorità inferiore vengono fornite aggiornando il badge, quando la pagina è aperta o tramite sincronizzazione periodica in background.

Feedback

Il team di Chrome vuole conoscere le tue esperienze con l'API App Badging.

Parlaci della progettazione dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà per implementare la tua idea? Hai domande o commenti sul modello di sicurezza?

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?

  • Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, semplici istruzioni per la riproduzione e imposta Componenti su UI>Browser>WebAppInstalls. Glitch è perfetto per condividere riproduzioni facili e veloci.

Mostra il supporto dell'API

Hai intenzione di utilizzare l'API App Badging sul tuo sito? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto è fondamentale supportarle.

Link utili

Foto hero di Prateek Katyal su Unsplash