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

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 la barra 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 elementi 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 hanno bisogno della sua autorizzazione.

Possibili casi d'uso

Esempi di app che potrebbero utilizzare questa API includono:

  • 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 a esecuzione prolungata (ad esempio il rendering di un'immagine o di un video).
  • 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 di 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 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 per installarla.
  3. Apri il sito come PWA installata. Tieni presente che deve essere eseguita come PWA installata (nella barra delle app 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 schermate Home.

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

  • setAppBadge(number): imposta il badge dell'app. Se viene fornito un valore, imposta il badge sul valore fornito; in caso contrario, visualizza un punto bianco semplice (o un altro flag 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 migliore rappresentazione 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 su come lo user agent visualizza il badge. Alcuni user agent potrebbero prendere un numero come "4000" e riscriverlo come "99+". Se saturi il badge (ad esempio impostandolo su "99"), il segno "+" non verrà visualizzato. Indipendentemente dal numero effettivo, chiama setAppBadge(unreadCount) e lascia che lo user agent si occupi di visualizzarlo di conseguenza.

Sebbene l'API App Badging in Chrome richieda un'app installata, non devi rendere le chiamate all'API Badging dipendenti dallo stato di installazione. Chiama l'API quando esiste, poiché altri browser potrebbero mostrare il badge in altri punti. Se funziona, funziona. In caso contrario, non lo fa.

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 questa operazione 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 service worker di eseguire periodicamente il 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 la visualizzazione di una notifica ogni volta che viene ricevuto un messaggio push. Questo va bene per 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 tuo sito per ricevere messaggi push.

Una combinazione di entrambi

Sebbene non sia perfetta, l'utilizzo combinato dell'API Push e della sincronizzazione periodica in background fornisce una buona soluzione. Le informazioni ad alta priorità vengono fornite tramite l'API Push, che mostra una notifica e aggiorna il badge. Le informazioni a 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.

Descrivi la progettazione dell'API

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

Segnalare un problema relativo all'implementazione

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

  • Invia una segnalazione di 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.

Mostra il tuo sostegno all'API

Intendi 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 sia fondamentale supportarle.

Link utili

Foto promozionale di Prateek Katyal su Unsplash