Cada aplicación merece una insignia
Es un patrón de IU muy común que ves todos los días para las aplicaciones nativas en tu dispositivo: una insignia de notificación. Es un gran concepto que informa a los usuarios sobre cierta información perdida a través de un indicador simple y pequeño. Por lo general, es un contador y, para algunas aplicaciones especiales, se utiliza una insignia personalizada o un ajuste visual del ícono, por ejemplo, en la aplicación Keychain de macOS, donde una moneda naranja indica que el llavero está desbloqueado y accesible.
Pero volvamos a la insignia predeterminada. Gracias a que Google impulsa constantemente la web, su aplicación web progresiva instalada también puede mostrar un contador como insignia.
Prerrequisitos
Para que su aplicación web pueda mostrar una insignia, debe cumplir con los "criterios de instalación" de Google, vinculados a continuación en el apéndice. Y esto tiene absolutamente sentido: su PWA debe estar instalada en un dispositivo para tener un lugar fijo en su sistema. En Windows, sus aplicaciones se encuentran en la barra de tareas y en macOS, en el Dock.
Si aún no lo sabe, su aplicación web se puede mejorar progresivamente para evolucionar a una nueva clase de aplicaciones llamadas "Aplicaciones web progresivas", o PWA para abreviar. Las PWA admiten una amplia variedad de funciones nuevas que anteriormente solo estaban disponibles para aplicaciones nativas. Puede consultar muchos artículos sobre PWA en esta aplicación web, que es una PWA en sí misma que se puede instalar.
Tenga en cuenta que la compatibilidad con la API de identificación de aplicaciones está actualmente limitada a los navegadores Chromium y solo es compatible con dispositivos de escritorio y Android. El estado general de la API es estable para Chromium, pero no es compatible de ninguna manera con otros navegadores. Por lo tanto, el uso no debería ser un requisito obligatorio para usar la aplicación, sino mejorar progresivamente la UX existente.
Cómo funciona
La implementación real es muy sencilla y solo requiere unas pocas líneas de código para cubrir todos los casos de 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 aspecto muy bueno de esta nueva API es que también se puede usar dentro de su Service Worker, lo que significa que, si se implementa, su PWA instalada puede obtener datos en segundo plano y recibir notificaciones automáticas, que a su vez pueden actualizar la insignia de su aplicación. !
Conclusión
Como ha visto, usar la API de identificación de aplicaciones es realmente simple. Todo lo que necesita para probar es un navegador basado en Chromium, así como una PWA simple que se puede instalar. No es de esperar que esta API esté disponible en Safari o Firefox en el corto plazo, ya que esto también implica un mayor compromiso con las PWA en general por parte de esos equipos. Pero para una UX mejorada para su aplicación web siempre que sea posible, ¡es una gran victoria y definitivamente debe usarse!
