Um recurso que está sendo utilizado principalmente em sites de notícias e redes sociais é a Notifications API que é bastante fácil de utilizar. Vamos logo para o exemplo: 

function init(){
    setInterval(notificar , 60 * 1000  );
}
 
 
function notificar(){
    if(window.Notification) {
        if (Notification.permission === 'default') {
            Notification.requestPermission();                       
        }else if( Notification.permission == 'granted'){
            var data = new Date();
            var noti = new Notification("Titulo da notificação",{
                body :  "Mensagem da notificação em  "+data,
                tag : data // tag única não duplicar notificação
            });
 
            noti.onshow = function (){
                var saida = document.getElementById("saida");
                saida.innerHTML += "Mostrando notificação : "+data+"<br>"
            }
 
            noti.onclick = function (){
                var saida = document.getElementById("saida");
                saida.innerHTML += "Foi clicado na notificação: "+data+"<br>"
                window.focus();
            }
 
            noti.onclose = function (){
                var saida = document.getElementById("saida");
                saida.innerHTML += "A notificação foi fechada: "+data+"<br>"
            }
 
            noti.onerror = function (){
                var saida = document.getElementById("saida");
                saida.innerHTML += "Deu Ruim - ERRO: "+data+"<br>"
            }
        }else if( Notification.permission == 'denied' ){
            var saida = document.getElementById("saida");
            saida.innerHTML = "Usuário não deu permissão<br>"
        }
    }   
}

Veja o Exemplo

Na linha 2 simplesmente configuramos um intervalo(a cada minuto) para nossas notificações sejam lançadas pelo método notificar. Colocamos em um intervalo para exemplo, mas ela seria lançada por algum evento em sua página.

Na linha 7 verificamos se o recurso de Notification está presente no navegador.

Na linha 8 verificamos a permissão, lembrando que o recurso de notificação deve ser liberado pelo usuário, e esta informação está no atributo Notification.permission , se seu valor for “default“ isto quer dizer que o usuário ainda não autorizou ou negou a utilização de notificações para sua página, sendo necessário executar um comando para pedir autorização, fizemos isto na linha 9. Se o valor for “granted“ o usuários já liberou, se for “denied“ ele negou.

Se o usuário autorizou o uso de notificações, criamos na linha 12 um objeto Notification passando dois parâmetros, um titulo e um objeto com as propriedades body que será o texto da mensagem que irá ser mostrada para o usuário, o outro atributo é a tag um identificador string para a notificação não ser exibida duplicada.

Este objeto de notificação “note“ possui eventos que podemos utilizar atribuindo nossas próprias functions

  • onshow: É chamado quando a notificação é mostrada.
  • onclick: É chamado quando o usuário clica na janela de notificação, como pode ser visto no exemplo na linha 25, podemos chamar método window.focus() para selecionar a aba que gerou a notificação.
  • onclose: É chamado quando o usuário fecha a janela de notificação.
  • onerror: Quando ocorre um erro na notificação e ela não pode ser mostrada.