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 che mostra un badge di tipo segnalazione.
Esempio di Twitter con otto notifiche e un'altra app che mostra un badge di tipo segnalazione.

L'API App Badging consente alle app web installate di impostare un badge a livello di applicazione, visualizzato in un punto specifico del sistema operativo associato all'applicazione (ad esempio la sezione o la schermata Home).

I badge consentono di notificare facilmente all'utente che è presente una nuova attività che potrebbe richiedere la sua attenzione o di indicare una piccola quantità di informazioni, ad esempio un conteggio di messaggi non letti.

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 richiedono la sua autorizzazione.

Possibili casi d'uso

Ecco alcuni esempi di app che potrebbero utilizzare questa API:

  • App di chat, email e social per segnalare l'arrivo di nuovi messaggi o per mostrare il numero di elementi da leggere.
  • App di produttività, per segnalare il completamento di un'attività in background di lunga durata (ad esempio il rendering di un'immagine o di un video).
  • Giochi, per segnalare che è richiesta un'azione del giocatore (ad es. nel gioco degli scacchi, quando è il turno del giocatore).

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 release futura. Su Android, l'API Badging non è supportata. Invece, Android mostra automaticamente un badge sull'icona dell'app per l'app web installata quando è presente una notifica non letta, 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 di Chrome.
  3. Aprila come PWA installata. Tieni presente che deve essere in esecuzione come PWA installata (nella barra delle app o nella barra delle app).
  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 loro schermate Home.

L'API Badge è composta da due metodi su navigator:

  • setAppBadge(number): imposta il badge dell'app. Se viene fornito un valore, imposta il badge sul valore fornito, altrimenti mostra un semplice punto bianco (o un altro indicatore in base alla piattaforma). Impostare number su 0 equivale a chiamare clearAppBadge().
  • clearAppBadge(): rimuove il badge dell'app.

Entrambi 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 servizio 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 quel dispositivo. Ad esempio, poiché l'API Badging non è supportata su Android, Android mostra sempre un punto anziché un valore numerico.

Non dare per scontato nulla sul modo in cui lo user agent mostra il badge. Alcuni user agent potrebbero prendere un numero come "4000" e riscriverlo come "99+". Se saturi il badge autonomamente (ad esempio impostandolo su "99"), il simbolo "+" non verrà visualizzato. Indipendentemente dal numero effettivo, chiama setAppBadge(unreadCount) e lascia che sia l'agente utente a occuparsi di visualizzarlo di conseguenza.

Sebbene l'API App Badging in Chrome richieda un'app installata, non devi effettuare chiamate all'API Badging in base allo stato dell'installazione. Basta chiamare l'API se esistente, poiché altri browser potrebbero mostrare il badge in altri punti. Se funziona, va bene. In caso contrario, non lo fa.

Impostazione e azzeramento del badge in background da un servizio worker

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

Sincronizzazione periodica in background

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

Tuttavia, la frequenza con cui viene chiamata la sincronizzazione non è perfettamente affidabile e viene chiamata a discrezione del browser.

API Web Push

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

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

Inoltre, per ricevere i messaggi push, gli utenti devono concedere l'autorizzazione di notifica al tuo sito.

Una combinazione di entrambi

Sebbene non sia perfetta, l'utilizzo congiunto dell'API Push e della sincronizzazione in background periodica rappresenta una buona soluzione. Le informazioni ad alta priorità vengono inviate tramite l'API Push, mostrando una notifica e aggiornando il badge. Le informazioni di priorità inferiore vengono fornite aggiornando il badge quando la pagina è aperta o tramite la sincronizzazione periodica in background.

Feedback

Il team di Chrome vuole conoscere la tua esperienza con l'API App Badging.

Fornisci informazioni sul design dell'API

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

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalla specifica?

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

Mostra il supporto per l'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 agli altri fornitori di browser quanto sia importante supportarle.

  • Invia un tweet all'indirizzo @ChromiumDev utilizzando l'hashtag #BadgingAPI e facci sapere dove e come lo utilizzi.

Link utili

Foto hero di Prateek Katyal su Unsplash