La API de notificaciones enriquecidas te permite crear notificaciones usando plantillas y mostrar estas para los usuarios en la bandeja del sistema del usuario:
Aspecto
Existen cuatro variantes de notificaciones enriquecidas: básicas, con imágenes, de lista y de progreso. Todo las notificaciones incluyen un título, un mensaje y un pequeño ícono que se muestra a la izquierda 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 los descarta. La bandeja del sistema lleva un recuento de todas las notificaciones nuevas. Cuando el usuario ve notificaciones en la bandeja del sistema, el recuento se restablece a cero.
Se puede asignar una prioridad de -2 a 2 a las notificaciones. Prioridades < 0 se muestran en ChromeOS centro de notificaciones y generar un error en otras plataformas. La prioridad predeterminada es 0. Prioridades > 0 se muestran para un aumento de la duración, y se pueden aplicar más notificaciones de prioridad alta que se muestra 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 desarrollarlas
Para usar esta API, llama al método notifications.create y pasa los detalles de la notificación mediante
El parámetro options:
chrome.notifications.create(id, options, creationCallback);
Las notifications.NotificationOptions deben incluir un notifications.TemplateType, que define los detalles de las notificaciones disponibles y cómo se muestran.
Crear 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 pequeño ícono que se muestra a la izquierda de
el mensaje de notificación.
Este es un ejemplo de una plantilla basic:
var opt = { type: "basic", title: "Primary Title", message: "Primary message to display", iconUrl: "url_to_small_icon" }
Crea una notificación de imagen
El tipo de plantilla image también incluye un imageUrl, que es un vínculo a una imagen de la que se puede obtener una vista previa.
en 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 Política de Seguridad del Contenido estricta, estas URLs deben dirigir a un usuario local o usa un BLOB o la URL de datos. Usa una relación de aspecto de 3:2 para tu imagen. De lo contrario, se verá un borde negro. enmarca la imagen.
Crea una notificación de lista
La plantilla list muestra items en un 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."}] }
Notificación de progreso de creación
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
}
Escucha eventos y responde a ellos
Todas las notificaciones pueden incluir objetos de escucha y controladores de eventos que respondan a las acciones del usuario (consulta chrome.events). Por ejemplo, puedes escribir un controlador de eventos que responda a un notifications.onButtonClicked.
Receptor 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 del evento para que las notificaciones pueden aparecer incluso cuando la aplicación o extensión no se esté ejecutando.