Insignias para íconos de apps

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

Pete LePage

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

La API de App Badging permite que las apps web instaladas establezcan una insignia para toda la aplicación, mostrar en un lugar específico del sistema operativo que esté asociado a la aplicación (como la biblioteca o la pantalla principal).

La insignia facilita la notificación sutil del usuario sobre la existencia de una actividad nueva que podrían requerir su atención o 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. Y... porque no interrumpen al usuario ni necesitan su permiso.

Casos de uso posibles

Entre los ejemplos de apps que podrían usar esta API, se incluyen los siguientes:

  • Chat, correo electrónico y apps sociales para indicar que llegaron mensajes nuevos o para muestra la cantidad de elementos no leídos.
  • Aplicaciones de productividad, para indicar que 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 el juego de ajedrez, cuando es el turno del jugador).

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 el futuro lanzamiento. En Android, no se admite la API de Badging. En cambio, Android muestra automáticamente una insignia en el ícono de la app para la app web instalada cuando hay una notificación no leída, al igual que en las apps para Android.

Probar

  1. Abre el Demostración de la API de App Badging
  2. Cuando se te solicite, haz clic en Instalar para instalar la app, o usa el navegador Chrome para instalarlo.
  3. Ábrelo como una AWP instalada. Ten en cuenta que se debe ejecutar como una AWP instalada (en la barra de tareas o en el Dock).
  4. Haz clic en el botón Establecer o Borrar para establecer o borrar la insignia de la app. ícono. 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 siguientes requisitos: Criterios de instalación de Chrome, y los usuarios deben agregarlo a sus pantallas de inicio.

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

  • setAppBadge(number): Establece la insignia de la app. Si proporcionas un valor, establece la insignia con el valor proporcionado; de lo contrario, muestra un punto blanco liso (o cualquier según corresponda para la plataforma). Establecer number en 0 es lo mismo que llamando 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 desde la página actual o desde la dirección service worker. Para establecer o borrar la insignia (en la página en primer plano o en el service worker), llama a:

// 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 tales 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 cómo el usuario-agente muestra la insignia. Algunos usuarios-agentes pueden tomar un número, como "4000" y reescribirla como “99+”. Si saturas la insignia por tu cuenta (por ejemplo, configúrala en “99”) luego el símbolo "+" no aparecerán. No importa el número real, solo tienes que llamar setAppBadge(unreadCount) y permitir que el usuario-agente realice las tareas mostrarlo en consecuencia.

Si bien la API de App Badging en Chrome requiere una app instalada, no debes Realiza llamadas a la API de Badging según el estado de instalación. Simplemente llama al API cuando existe, ya que otros navegadores pueden mostrar la insignia en otros lugares. Si funciona, funciona. De lo contrario, simplemente no lo hace.

Configurar y quitar la insignia en segundo plano de un service worker

También puedes establecer la insignia de la app en segundo plano con el service worker. Puedes hacer lo siguiente: 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 para sondear periódicamente el servidor, que podría usarse para obtener un estado actualizado y llama 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 puede ejecutar código JavaScript incluso cuando no se está ejecutando ninguna página en primer plano. Por lo tanto, un envío de servidor podría actualizar la insignia llamando a navigator.setAppBadge().

Sin embargo, la mayoría de los navegadores, incluido Chrome, requieren que se envíe una notificación se muestra cada vez que se recibe un mensaje push. Esto está bien para algunos usos (por ejemplo, mostrar una notificación cuando se actualiza insignia), pero imposibilita actualizar sutilmente la insignia sin mostrar una notificación.

Además, los usuarios deben otorgar permiso de notificación a su sitio para que pueda: recibir mensajes de envío.

Combinación de ambos

Aunque 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 del API, que muestra una notificación y actualiza la insignia. Y menor prioridad información se entrega mediante la actualización de la insignia, ya sea cuando la página está abierta, o a través de 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

¿Existe algún elemento en la API que no funcione como esperabas? O son ¿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 la implementación diferente de la especificación?

  • Informa un error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedes seguir instrucciones simples de reproducción y establecer los Componentes en UI>Browser>WebAppInstalls Glitch funciona muy bien para para compartir reproducciones rápidas y fáciles.

Demuestra compatibilidad con la API

¿Piensas usar la API de App Badging en tu sitio? Tu apoyo público ayuda a El equipo de Chrome priorizará funciones y mostrará a otros proveedores de navegadores la importancia es respaldarlos.

Vínculos útiles

Foto hero de Prateek Katyal activado Eliminar salpicaduras