Hasta ahora, hemos visto las opciones que alteran la apariencia visual de una notificación. Existen y también opciones que alteran el comportamiento de las notificaciones.
De forma predeterminada, si se llama a showNotification()
con solo opciones visuales, se mostrará lo siguiente:
comportamientos:
- Hacer clic en la notificación no tiene ningún efecto.
- Cada notificación nueva se muestra una tras otra. El navegador no contraerá los notificaciones de ninguna manera.
- La plataforma puede reproducir un sonido o hacer vibrar el dispositivo del usuario (según la plataforma).
- En algunas plataformas, la notificación desaparecerá después de un período breve, mientras que en otras mostrará la notificación, a menos que el usuario interactúe con ella. (Por ejemplo, compara tus notificaciones en Android y computadoras de escritorio).
En esta sección, vamos a ver cómo podemos alterar estos comportamientos predeterminados usando opciones. solos. Son relativamente fáciles de implementar y aprovechar.
Evento de clic de notificación
Cuando un usuario hace clic en una notificación, el comportamiento predeterminado es que no suceda nada. No incluso cerrar o quitar la notificación.
La práctica común para un clic en una notificación es que se cierre y realice alguna otra lógica (es decir, abrir una ventana o realizar alguna llamada a la API a la aplicación).
Para lograrlo, debes agregar un objeto de escucha de eventos 'notificationclick'
a nuestro service worker. Esta
se llamará cada vez que se haga clic en una notificación.
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
Como puedes ver en este ejemplo, a la notificación en la que se hizo clic se puede acceder como
event.notification
Desde allí, puedes acceder a las propiedades y los métodos de la notificación. En este
En este caso, debes llamar a su método close()
y realizar trabajo adicional.
Acciones
Las acciones te permiten crear otro nivel de interacción con los usuarios en lugar de hacer clic en el notificación.
Botones
En la sección anterior, viste cómo definir los botones de acción cuando se llama a showNotification()
:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
Si el usuario hace clic en un botón de acción, verifica el valor de event.action
en noticationclick
.
para indicar en qué botón de acción se hizo clic.
event.action
contendrá el valor action
establecido en las opciones. En el ejemplo anterior,
Los valores de event.action
serían uno de los siguientes: 'coffee-action'
, 'doughnut-action'
,
'gramophone-action'
o 'atom-action'
.
De este modo, detectaríamos clics en notificaciones o clics en acciones como los siguientes:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
Respuestas intercaladas
Además, en la sección anterior, viste cómo agregar una respuesta intercalada a la notificación:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
event.reply
contendrá el valor que escribió el usuario en el campo de entrada:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
Etiqueta
La opción tag
es, en esencia, un ID de cadena que “grupos” todas las notificaciones en conjunto, lo que brinda una
para determinar cómo se muestran
varias notificaciones al usuario. Esto es más fácil de explicar
con un ejemplo.
Mostremos una notificación y le asignemos una etiqueta de 'message-group-1'
. Mostraríamos el
con este código:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
que mostrará nuestra primera notificación.
Mostremos una segunda notificación con una nueva etiqueta de 'message-group-2'
, como se muestra a continuación:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
Se mostrará una segunda notificación al usuario.
Ahora mostremos una tercera notificación, pero reutilicemos la primera etiqueta de 'message-group-1'
. Hacer esto
cerrará la primera notificación y la reemplazará por la nueva.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Ahora tenemos dos notificaciones, a pesar de que se llamó a showNotification()
tres veces.
La opción tag
es simplemente una forma de agrupar los mensajes para que las notificaciones antiguas que se
que se muestra actualmente se cerrarán si tienen la misma etiqueta que una notificación nueva.
Una sutileza sobre el uso de tag
es que cuando reemplace una notificación, lo hará sin sonido.
o vibración.
Aquí es donde entra en juego la opción renotify
.
Volver a notificar
Esto se aplica en gran medida a los dispositivos móviles al momento de escribir este documento. Si estableces esta opción, las notificaciones vibrarán y reproducirán un sonido del sistema.
Hay situaciones en las que podrías querer una notificación de reemplazo para notificar al usuario en lugar de
actualizar silenciosamente. Las aplicaciones de chat son un buen ejemplo. En este caso, debes configurar tag
y
renotify
a true
.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Silencio
Esta opción te permite mostrar una nueva notificación, pero evita el comportamiento predeterminado de la vibración. y encender la pantalla del dispositivo.
Esto es ideal si tus notificaciones no requieren atención inmediata del usuario.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Requiere interacción
Chrome para computadoras mostrará notificaciones durante un período determinado antes de ocultarlas. Chrome activado Android no tiene este comportamiento. Las notificaciones se muestran hasta que el usuario interactúa con ellas.
Para forzar que una notificación permanezca visible hasta que el usuario interactúe con ella, agrega requireInteraction
de 12 a 1 con la nueva opción de compresión. Se mostrará la notificación hasta que el usuario la descarte o haga clic en ella.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Usa esta opción con consideración. Mostrar una notificación y forzar al usuario a detener lo que lo que están haciendo para descartar la notificación.
En la próxima sección, veremos algunos de los patrones comunes que se usan en la Web para Administrar notificaciones y realizar acciones como abrir páginas cuando se hace clic en una notificación
Próximos pasos
- Descripción general de las notificaciones push web
- Cómo funciona el envío
- Cómo suscribir a un usuario
- UX de permisos
- Envía mensajes con bibliotecas push web
- Protocolo de envío web
- Maneja eventos de envío
- Cómo mostrar una notificación
- Comportamiento de las notificaciones
- Patrones de notificación comunes
- Preguntas frecuentes sobre las notificaciones push
- Problemas comunes e informar errores