Badge per le icone delle app

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

Pete LePage

Che cos'è l'API App Badgeging?

Esempio di Twitter con otto notifiche e un'altra app che mostra un badge con il tipo di bandiera.
. Esempio di Twitter con otto notifiche e un'altra app che mostra una bandiera tipo di badge.

L'API App Badgeging consente alle app web installate di impostare un badge a livello di applicazione, mostrata in una posizione associata all'applicazione specifica del sistema operativo (come la barra delle app o la schermata Home).

I badge consentono di avvisare facilmente in modo discreto l'utente in caso di nuova attività che potrebbero richiedere la loro attenzione o per indicare informazioni, ad esempio il conteggio dei messaggi da leggere.

I badge tendono a essere più facili da usare delle notifiche e possono essere aggiornati con una frequenza molto più alta, in quanto non interrompono l'utente. Inoltre, perché non interrompono l'utente, non è necessaria la sua autorizzazione.

Possibili casi d'uso

Ecco alcuni esempi di app che potrebbero utilizzare questa API:

  • Chat, email e app social per segnalare l'arrivo di nuovi messaggi o per mostra il numero di elementi da leggere.
  • App di produttività, per segnalare che un'attività in background di lunga durata (ad esempio rendering di un'immagine o un video) non siano stati completati.
  • Giochi, per segnalare che è richiesta un'azione del giocatore (ad es. negli 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 futuro . Su Android, l'API Badging non è supportata. Invece, Android mostra automaticamente un badge sull'icona dell'app per l'app web installata quando c'è una notifica da leggere, proprio come per le app per Android.

Prova

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

Come utilizzare l'API App Badging

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

L'API Badge prevede due metodi su navigator:

  • setAppBadge(number): imposta il badge dell'app. Se viene fornito un valore, imposta il valore il valore fornito, altrimenti mostra un semplice punto bianco (o un'altra appropriata per la piattaforma). L'impostazione di number su 0 è uguale a chiamata a 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 dall'elenco con il Service worker. Per impostare o cancellare il badge (nella pagina in primo piano oppure 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 cercherà di fornire la migliore rappresentazione per quel dispositivo. Ad esempio, poiché l'API Badge non è supportata su Android, Android mostra sempre un punto invece di un valore numerico.

Non dare per scontato nulla sulla modalità di visualizzazione del badge da parte dello user agent. Alcuni user agent potrebbero accettare un numero come "4000" e riscriverlo come "Più di 99". Se satura il badge (ad esempio impostandolo su "99") quindi il "+" non verranno visualizzati. A prescindere dal numero, chiama setAppBadge(unreadCount) e lasciare che lo user agent si occupi mostrandolo di conseguenza.

L'API App Badgeging in Chrome richiede un'app installata, ma non è effettuare chiamate all'API Badging in base allo stato di installazione. Chiama il API quando esistente, perché altri browser potrebbero mostrare il badge altrove. Se funziona, funziona. In caso contrario, non è così.

Impostazione e cancellazione del badge in background da un service worker

Puoi anche impostare il badge dell'app in background utilizzando il service worker. Esegui una delle due azioni mediante una sincronizzazione periodica in background, l'API Push o una combinazione di entrambe.

Sincronizzazione periodica in background

La sincronizzazione periodica in background consente al service worker per eseguire periodicamente il polling del server, che potrebbe essere utilizzato per ottenere uno stato aggiornato, e chiama navigator.setAppBadge().

Tuttavia, la frequenza con cui viene chiamata 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 può eseguire codice JavaScript anche quando non è in esecuzione nessuna 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 una notifica per essere visualizzato ogni volta che si riceve un messaggio push. Va bene per qualche uso casi (ad esempio, mostrare una notifica durante l'aggiornamento il badge), ma non è possibile aggiornarlo in modo discreto senza visualizzare una notifica.

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

Una combinazione di entrambi

Anche se non è perfetto, l'API Push e la sincronizzazione periodica in background vengono utilizzati insieme rappresenta una buona soluzione. Le informazioni ad alta priorità vengono fornite tramite il pulsante API che mostra una notifica e l'aggiornamento del badge. Priorità inferiore informazioni vengono fornite aggiornando il badge, quando la pagina è aperta, o tramite sincronizzazione periodica in background.

Feedback

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

Parlaci della progettazione dell'API

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

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione rispetto alle specifiche?

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

Mostra il supporto per l'API

Vuoi utilizzare l'API App Badging sul tuo sito? Il tuo supporto pubblico aiuta Il team di Chrome assegna la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sono importanti è sostenerli.

Link utili

Foto hero di Prateek Katyal su Rimuovi spruzzi