Ogni app merita un badge
È un modello di interfaccia utente molto comune che vedi ogni giorno per le app native sul tuo dispositivo: un badge di notifica. È un ottimo concetto che informa gli utenti su alcune informazioni perse tramite un indicatore semplice e piccolo. Più comunemente è un contatore e per alcune app speciali viene utilizzato un badge personalizzato o una regolazione visiva dell'icona, ad esempio sull'app Portachiavi di macOS, dove una moneta arancione indica che il portachiavi è sbloccato e accessibile.
Ma torniamo al badge predefinito. Grazie a Google che spinge costantemente il Web in avanti, la tua app Web progressiva installata può anche visualizzare un contatore come badge.
Prerequisiti
Affinché la tua app web possa mostrare un badge, deve soddisfare i "criteri di installazione" di Google, collegati di seguito nell'addendum. E questo ha assolutamente senso: la tua PWA deve essere installata su un dispositivo per avere un posto fisso nel tuo sistema. Su Windows, le tue app si trovano nella barra delle applicazioni e su macOS sono nel Dock.
Se non lo sai ancora, la tua web app può essere progressivamente migliorata per evolversi in una nuova classe di applicazioni chiamate "Progressive Web Apps", o PWA in breve. Le PWA supportano un'ampia varietà di nuove funzionalità che in precedenza erano disponibili solo per le app native. Puoi consultare molti articoli sulle PWA su questa app Web, che è una PWA stessa che può essere installata.
Tieni presente che il supporto per l'API App Badging è attualmente limitato ai browser Chromium e supportato solo su dispositivi desktop e Android. Lo stato generale dell'API è stabile per Chromium, ma non è supportato in alcun modo da altri browser. Pertanto l'utilizzo non dovrebbe essere un requisito obbligatorio per utilizzare l'app, ma piuttosto migliorare progressivamente l'esperienza utente esistente.
Come funziona
L'effettiva implementazione è molto semplice e richiede solo poche righe di codice per coprire tutti i casi d'uso.
// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.
async function setSimpleBadge(){
// Just a simple indicator without any value.
// This is the simplest variant of a badge.
await navigator?.setClientBadge();
}
async function incrementBadgeCount(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = getUnreadMessagesCount();
await setUnreadMessagesCount(countNow + 1);
// Update the UI.
await navigator.setAppBadge(countNow + 1)
.catch((error) => { /* ... */ });
}
async function resetBadge(){
// As simple as it gets: reset the badge UI.
await navigator.clearClientBadge();
}
Un aspetto molto interessante di questa nuova API è che può essere utilizzata anche all'interno del tuo Service Worker, il che significa che, se implementata, la tua PWA installata può recuperare dati in background e ricevere notifiche push, che a loro volta possono aggiornare il badge della tua app !
Conclusione
Come hai visto, l'utilizzo dell'API App Badging è davvero semplice. Tutto ciò che è necessario per testare è un browser basato su Chromium e una semplice PWA che può essere installata. Non è prevedibile che questa API sarà presto disponibile su Safari o Firefox, poiché ciò implica anche un maggiore impegno nei confronti delle PWA in generale da parte di quei team. Ma per una UX migliorata per la tua app web, ove possibile, è una grande vittoria e dovrebbe essere sicuramente utilizzata!
