La API de notificaciones enriquecidas te permite crear notificaciones con plantillas y mostrarlas a los usuarios en la bandeja del sistema:
Cómo se ven
Las notificaciones enriquecidas se presentan en cuatro formatos diferentes: básico, imagen, lista y progreso. Todas las notificaciones incluyen un título, un mensaje, un ícono pequeño que se muestra a la izquierda del mensaje de la notificación y un campo contextMessage, que se muestra como un tercer campo de texto con una fuente de color más claro.
Una imagen básica:
Las notificaciones de lista muestran cualquier cantidad de elementos de la lista:
Las notificaciones de imágenes incluyen una vista previa de la imagen:
Las notificaciones de progreso muestran una barra de progreso:
Cómo se comportan
En ChromeOS, las notificaciones aparecen en la bandeja del sistema del usuario y permanecen allí hasta que el usuario las descarta. La bandeja del sistema mantiene un recuento de todas las notificaciones nuevas. Una vez que los usuarios ven las notificaciones en la bandeja del sistema, el recuento se restablece a cero.
A las notificaciones se les puede asignar una prioridad entre -2 y 2. Las prioridades inferiores a 0 se muestran en el centro de notificaciones de ChromeOS y producen un error en otras plataformas. La prioridad 0 es la predeterminada. Las prioridades > 0 se muestran para duraciones cada vez mayores, y se pueden mostrar más notificaciones de prioridad alta en la bandeja del sistema.
Además de mostrar información, todos los tipos de notificaciones pueden incluir hasta dos elementos de acción. Cuando los usuarios hacen clic en un elemento de acción, tu app puede responder con la acción adecuada. Por ejemplo, cuando el usuario hace clic en "Responder", se abre la app de correo electrónico y el usuario puede completar la respuesta:
Cómo desarrollarlos
Para usar esta API, llama al método notifications.create y pasa los detalles de la notificación a través del parámetro options:
chrome.notifications.create(id, options, creationCallback);
El objeto notifications.NotificationOptions debe incluir un objeto notifications.TemplateType, que define los detalles de notificación disponibles y cómo se muestran esos detalles.
Cómo crear una notificación básica
Todos los tipos de plantillas (basic, image, list y progress) deben incluir una notificación title y message, así como un iconUrl, que es un vínculo a un ícono pequeño que se muestra a la izquierda del mensaje de notificación.
Este es un ejemplo de una plantilla de basic:
var opt = { type: "basic", title: "Primary Title", message: "Primary message to display", iconUrl: "url_to_small_icon" }
Crea una notificación con imagen
El tipo de plantilla image también incluye un imageUrl, que es un vínculo a una imagen que se muestra en la vista previa de la notificación:
var opt = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
En las apps de Chrome, debido a una estricta Política de seguridad del contenido, estas URLs deben apuntar a un recurso local o usar una URL de blob o de datos. Usa una relación de 3:2 para tu imagen. De lo contrario, se enmarcará con un borde negro.
Crea una notificación de lista
La plantilla list muestra items en formato de lista:
var opt = { type: "list", title: "Primary Title", message: "Primary message to display", iconUrl: "url_to_small_icon", items: [{ title: "Item1", message: "This is item 1."}, { title: "Item2", message: "This is item 2."}, { title: "Item3", message: "This is item 3."}] }
Crea una notificación de progreso
La plantilla progress muestra una barra de progreso en la que el progreso actual varía de 0 a 100:
var opt = {
type: "progress",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
progress: 42
}
Cómo detectar eventos y responder a ellos
Todas las notificaciones pueden incluir objetos de escucha y controladores de eventos que responden a las acciones del usuario (consulta chrome.events). Por ejemplo, puedes escribir un controlador de eventos para responder a un evento notifications.onButtonClicked.
Objeto de escucha de eventos:
chrome.notifications.onButtonClicked.addListener(replyBtnClick);
Controlador de eventos:
function replyBtnClick {
//Write function to respond to user action.
}
Considera incluir objetos de escucha y controladores de eventos en la página de eventos para que las notificaciones puedan aparecer incluso cuando la app o la extensión no se estén ejecutando.