La API de chrome.notifications te permite crear notificaciones mediante plantillas y mostrarlas a los usuarios en la bandeja del sistema del usuario:
Cómo se ven
Hay cuatro variantes diferentes de notificaciones enriquecidas: básicas, con imágenes, de lista y de progreso. Todas las notificaciones incluyen un título, un mensaje, un ícono pequeño que se muestra a su izquierda y un campo contextMessage, que se muestra como un tercer campo de texto con una fuente de color más claro.
Una notificación básica:
Las notificaciones de lista muestran cualquier cantidad de elementos de lista:
Las notificaciones de imagen 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 en ella hasta que el usuario las descarte. La bandeja del sistema lleva un recuento de todas las notificaciones nuevas. Una vez que el usuario ve las notificaciones en la bandeja del sistema, el recuento se restablece a cero.
Se puede asignar una prioridad a las notificaciones de 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 predeterminada es 0. Las prioridades mayores que 0 se muestran para una duración cada vez mayor y se pueden mostrar más notificaciones de prioridad alta en la bandeja del sistema.
El parámetro de configuración priority no afecta el orden de las notificaciones en macOS.
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 extensión 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 con el parámetro options:
await chrome.notifications.create(id, options);
El notifications.NotificationOptions debe incluir un notifications.TemplateType, que define los detalles de las notificaciones disponibles y cómo se muestran.
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 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 basic:
var opt = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon"
}
Usa una imagen
El tipo de plantilla image también incluye un imageUrl, que es un vínculo a una imagen de la que se obtiene una vista previa en la notificación. Ten en cuenta que las imágenes no se muestran a los usuarios en macOS.
var opt = {
type: "image",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Cómo crear una notificación de lista
La plantilla list muestra items en formato de lista. Ten en cuenta que solo se muestra el primer elemento a los usuarios en macOS.
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."}]
}```
### Create progress notification {: #progress }
The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.
```js
var opt = {
type: "progress",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
progress: 42
}
Detecta eventos y responde 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 el service worker para que las notificaciones puedan aparecer incluso cuando no se esté ejecutando la extensión.