Insignias para íconos de apps

La API de App Badging permite que las aplicaciones web instaladas establezcan una insignia para toda la aplicación en el ícono de la aplicación.

¿Qué es la API de App Badging?

Ejemplo de Twitter con ocho notificaciones y otra app que muestra una insignia de tipo de marca.
Ejemplo de Twitter con ocho notificaciones y otra app que muestra una insignia del tipo de marca.

La API de App Badging permite que las apps web instaladas establezcan una insignia para toda la aplicación, que se muestra en la ubicación específica del sistema operativo y asociada con la app (como la biblioteca o la pantalla principal).

Las insignias permiten notificar sutilmente al usuario que hay una actividad nueva que podría requerir su atención, o bien para indicar una pequeña cantidad de información, como un recuento de mensajes no leídos.

Las insignias suelen ser más fáciles de usar que las notificaciones y se pueden actualizar con una frecuencia mucho mayor, ya que no interrumpen al usuario. Además, como no interrumpen al usuario, no necesitan su permiso.

Casos de uso posibles

Estos son algunos ejemplos de apps que podrían usar esta API:

  • Chat, correo electrónico y apps sociales para indicar que llegaron mensajes nuevos o mostrar la cantidad de elementos no leídos.
  • Apps de productividad, para indicar que se completó una tarea prolongada en segundo plano (como renderizar una imagen o un video)
  • Juegos para indicar que se requiere una acción del jugador (p. ej., en Ajedrez, cuando es su turno)

Asistencia

La API de App Badging funciona en Windows y macOS, en Chrome 81 y Edge 81, o versiones posteriores. La compatibilidad con ChromeOS está en desarrollo y estará disponible en una versión futura. En Android, la API de Badging no es compatible. En cambio, Android muestra automáticamente una insignia en el ícono de la app web instalada cuando hay una notificación no leída, al igual que en las apps para Android.

Probar

  1. Abre la demostración de la API de App Badging.
  2. Cuando se te solicite, haz clic en Instalar para instalar la app o usa el menú de Chrome para instalarla.
  3. Ábrela como una AWP instalada. Ten en cuenta que debe ejecutarse como una AWP instalada (en la barra de tareas o el Dock).
  4. Haz clic en el botón Set o Clear para establecer o borrar la insignia del ícono de la app. También puedes proporcionar un número para el Valor de la insignia.

Cómo usar la API de App Badging

Para usar la API de App Badging, tu app web debe cumplir con los criterios de instalación de Chrome, y los usuarios deben agregarla a sus pantallas principales.

La API de Badge consta de dos métodos en navigator:

  • setAppBadge(number): Establece la insignia de la app. Si se proporciona un valor, configura la insignia como el valor proporcionado; de lo contrario, muestra un punto blanco simple (o cualquier otra marca según corresponda para la plataforma). Establecer number en 0 es lo mismo que llamar a clearAppBadge().
  • clearAppBadge(): Quita la insignia de la app.

Ambas muestran promesas vacías que puedes usar para el manejo de errores.

La insignia se puede establecer en la página actual o desde el service worker registrado. Para establecer o borrar la insignia (en la página en primer plano o en el service worker), realiza la siguiente llamada:

// 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.
});

En algunos casos, es posible que el sistema operativo no permita la representación exacta de la insignia. En esos casos, el navegador intentará proporcionar la mejor representación para ese dispositivo. Por ejemplo, debido a que la API de Badging no es compatible con Android, Android solo muestra un punto en lugar de un valor numérico.

No supongas nada sobre la manera en que el usuario-agente muestra la insignia. Algunos usuarios-agentes pueden tomar un número como "4000" y reescribirlo como "99+". Si saturas la insignia tú mismo (por ejemplo, si la estableces en "99"), no aparecerá el "+". Sin importar el número real, solo llama a setAppBadge(unreadCount) y permite que el usuario-agente se encargue de mostrarlo según corresponda.

Si bien la API de App Badging en Chrome requiere una app instalada, no debes realizar llamadas a esta según el estado de instalación. Solo debes llamar a la API cuando exista, ya que otros navegadores pueden mostrar la insignia en otros lugares. Si funciona, funciona. Si no es así, simplemente no lo hace.

Configuración y eliminación de la insignia en segundo plano desde un service worker

También puedes configurar la insignia de la app en segundo plano con el service worker, lo que permite que se actualice incluso cuando la app no esté abierta. Puedes hacerlo mediante una sincronización periódica en segundo plano, la API de Push o una combinación de ambas.

Sincronización periódica en segundo plano

La sincronización periódica en segundo plano permite que un service worker sondee periódicamente el servidor, que se podría usar para obtener un estado actualizado, y llame a navigator.setAppBadge().

Sin embargo, la frecuencia a la que se llama a la sincronización no es del todo confiable y se denomina a discreción del navegador.

API de Web Push

La API de Push permite que los servidores envíen mensajes a los service workers, que pueden ejecutar código JavaScript incluso cuando no se ejecuta ninguna página en primer plano. Por lo tanto, un servidor push podría actualizar la insignia llamando a navigator.setAppBadge().

Sin embargo, la mayoría de los navegadores, incluido Chrome, requieren que se muestre una notificación cada vez que se recibe un mensaje push. Esto está bien para algunos casos de uso (por ejemplo, mostrar una notificación cuando se actualiza la insignia), pero hace que sea imposible actualizar la insignia de forma sutil sin mostrar una notificación.

Además, los usuarios deben otorgar el permiso de notificaciones de tu sitio para recibir mensajes push.

Combinación de ambos

Si bien no es perfecto, usar la API de Push y la sincronización periódica en segundo plano en conjunto proporciona una buena solución. La información de alta prioridad se entrega a través de la API push, que muestra una notificación y actualiza la insignia. Además, para entregar información de menor prioridad, se actualiza la insignia, ya sea cuando la página está abierta o mediante una sincronización periódica en segundo plano.

Comentarios

El equipo de Chrome quiere conocer tu experiencia con la API de App Badging.

Cuéntanos sobre el diseño de la API

¿Hay algo en la API que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad?

Informar un problema con la implementación

¿Encontraste un error en la implementación de Chrome? ¿O es diferente la implementación de las especificaciones?

  • Informa un error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedas, instrucciones simples para reproducir el problema y configura Components como UI>Browser>WebAppInstalls. Glitch funciona muy bien para compartir reproducciones rápidas y fáciles.

Demuestra compatibilidad con la API

¿Tienes pensado usar la API de App Badging en tu sitio? Tu asistencia pública ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo fundamental que es admitirlas.

Vínculos útiles

Foto hero de Prateek Katyal en Unsplash