Cada vez más páginas web piden permiso para mostrar notificaciones como la que se muestra a continuación, que se muestran fuera de la página a nivel del sistema. Esta es una guía para saber como permitir las notificaciones del sistema con Angular.
Es muy sencillo mostrar las notificaciones del sistema Angular sin la necesidad de recurrir a bibliotecas externas, solo tenemos que crear un servicio que nos permita crear una notificación desde el título, contenido, icono de notificación, etc., desde cualquier lugar de nuestra aplicación.
Para esto utilizamos la API de notificación en el servicio: https:/developer.mozilla.org/en-US/docs/Web/API/notification donde, aparte de las opciones anteriores, podemos indicar lo que sucede cuando el usuario hace clic en la notificación, si queremos que se oculte después de un tiempo o qué hacer si el mensaje no se puede mostrar debido a un error (también hay eventos para cuando se muestra o cierra la notificación):
Para mostrar las notificaciones debemos solicitar el permiso de los usuarios, podemos hacerlo al abrir la página o justo antes de intentar mostrar la primera notificación como se muestra en el ejemplo, el servicio solicita permiso si el usuario aún no lo ha otorgado y solo entonces se crea la notificación:
Firefox:
Edge:
Una vez que se concede el permiso, ahora podemos crear notificaciones, varios navegadores web como Chrome muestran un máximo de tres simultáneamente.
