A Web Notifications é uma nova API para enviarmos notificações ao usuário fora do contexto de uma página web. Para quem usa Mac, imaginem que Web Notifications é o Growl para a web. Essa API ainda não está padronizada, mas já existe um grupo no W3C trabalhando nela e alguns navegadores que a suportam. O que significa que já podemos nos divertir um pouco.

OBS.: Todos os exemplos desse post foram testados na versão 6.0 do Safari para Mac. A versão 22.0.1229.8 dev do Chrome, que eu inicialmente usei como teste, estava dando crash ao pedir permissão para mostrarmos notificações na página atual.

Pedindo permissão

O primeiro passo é verificar se temos permissão para mostrar notificações no dominío atual. Podemos obter o status da nossa permissão através do método Notification.permissionLevel que nos retorna um dos seguintes valores:

• granted: Usuário já nos deu permissão para mostrar notificações no site atual;
• denied: Usuário negou a permissão para mostrar notificações;
• default: Usuário ainda não especificou se aprova notificações deste site.

Caso o status da permissão esteja como default, podemos então pedir permissão ao usuário através do método Notification.requestPermission. Este método dispara um dialog no navegador perguntando se o usuário permite o uso de notificações no domínio atual. Após o usuário permitir ou não, a função de callback é executada.

$('.pedir-permissao').click(function(event) {
    // testando se seu navegador suporta Web Notifications
    if (!window.Notification) {
        alert('Seu navegador não suporta Web Notifications')
        return
    }
    // usuário ainda não especificou se aprova notificações desse site
    // então pedimos permissão
    if (Notification.permissionLevel() === 'default') {
        Notification.requestPermission(function() {
            alert('Função de callback')
        })
    // já foi dada a permissão
    } else if (Notification.permissionLevel() === 'granted') {
        alert('Usuário já havia dado permissão')
    // usuário negou a permissão
    } else if (Notification.permissionLevel() === 'denied') {
        alert('Usuário negou permissão')
    }
}
})

Clique no botão abaixo e verifique o dialog que aparecerá pedindo permissão para o uso de notificações no site atual. E lembrem de conceder permissão para continuarmos visualizando outros exemplos mais avançados do post.

A imagem abaixo mostra o dialog de permissão do Safari 6.0 no Mac.

Caso queiram mudar a permissão de um site posteriormente, no Safari basta ir no menu Preferências → Notificações.

Enviando uma notificação

Agora que o usuário nos cedeu permissão, já podemos criar nossa primeira notificação. No código abaixo temos um exemplo básico de uma Web Notification.

var notificationBasica = new Notification('Título da Notificação')
notificationBasica.show()

Criamos um novo objeto do tipo Notification passando o título da notificação como argumento. Depois de criado, basta executar o método show para que a notificação seja enviada. O botão abaixo executa este exemplo.

O navegador deverá mostrar uma notificação parecida com a imagem abaixo

Caso estejam utilizando o OS X Mountain Lion, todas as notificações enviadas irão também para o Notification Center.

Parâmetros

O único paramêtro obrigatório de uma notificação é o título. Porém existem outros parâmetros opcionais que podem ser passados como um objeto. Objeto? Melhor um exemplo:

var notification = new Notification('Título da Notificação', {
    body: 'Body da Notifição',
    tag: 'novo e-mail',
    onshow: function(event) {
        console.log('evento onshow')
    },
    onclick: function(event) {
        alert('evento onclick')
    },
    onclose: function(event) {
        console.log('evento onclose')
    },
    onerror: function(event) {
        console.log('evento onerror')
    }
}
})
notification.show()

Esses são todos os parâmetros aceitos pelas notifications no Safari e Chrome no Mac:

• body: Mensagem mais detalhada sobre a notificação;
• tag: Identificador da notificação. Impede que o usuário receba várias notificações caso tenha várias abas com seu site aberto;
• onshow: Evento disparado quando a notificação é exibida;
• onclick: Evento disparado no click da notificação. Com ele podemos, por exemplo, mostrar o novo e-mail ao usuário no click da notificação;
• onclose: Evento disparado quando a notificação é ignorada ou fechada no Notification Center;
• onerror: Evento disparado caso a notificação não possa ser mostrada ao usuário. Disparado quando o nível de permissão está setado como default ou denied.

O botão abaixo dispara essa notificação com todos os parâmetros. Observe que, diferente das outras, se dispararmos várias dessas notificações apenas a última ficará visível no Notification Center. Isto devido ao atributo tag.

A especificação do W3C define mais alguns parâmetros além dos citados acima, mas eles não são suportados pelo Safari ou Chrome e talvez nunca serão. Para não deixar muito longo o post decidi não comentar sobre eles. Mas caso queiram se aprofundar na especificação existe um link nas referências.