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 de tipo de marca.

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

Las insignias facilitan notificar sutilmente al usuario que hay nueva actividad 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 necesita 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 en segundo plano de larga duración (como el procesamiento de 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 su lugar, 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. Ábrelo como una AWP instalada. Ten en cuenta que debe ejecutarse como una AWP instalada (en la barra de tareas o en el conector).
  4. Haz clic en el botón Configurar o Borrar 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, establece la insignia en el valor proporcionado; de lo contrario, muestra un punto blanco liso (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 en 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 forma 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 signo "+". 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 la API de Badging dependiendo del estado de instalación. Solo llama a la API cuando exista, ya que otros navegadores podrían mostrar la insignia en otros lugares. Si funciona, funciona. Si no es así, simplemente no lo hace.

Configurar y borrar la insignia en segundo plano por parte de un service worker

También puedes configurar la insignia de la app en segundo plano con el service worker. Puedes hacerlo mediante la 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 podría usarse para obtener un estado actualizado, y llamar a navigator.setAppBadge().

Sin embargo, la frecuencia con 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 service workers, que pueden ejecutar código JavaScript incluso cuando no se ejecuta una 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 sutilmente la insignia sin mostrar una notificación.

Además, los usuarios deben otorgar al sitio el permiso de notificaciones 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 proporcionan 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, la información de menor prioridad se entrega mediante la actualización de 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? ¿La implementación es diferente de las especificaciones?

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

Muestra compatibilidad con la API

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

Vínculos útiles

Foto hero de Prateek Katyal en Unsplash