HTML 5 Notifications – Como deixar sua aplicação muito mais interativa (gmail notifications like)

Mais uma vez me deparei com situações do dia-dia e poucas soluções. Afim de implementar uma forma de alertar os usuários de um web chat interno no ambiente de trabalho, necessitava de algo que pudesse ser fácilmente identificado como uma nova mensagem vinda do chat. Então, de cara, pensei em implementar uma solução sonora para aquelas pessoas que não estariam no browser naquele momento, mas estavam com um head-phone ou algo do tipo. Solução pronta, mas segue uma outra questão: “E quem não está com som ligado?”

Partindo desta pergunta, me pus a pesquisar sobre alternativas viáveis. Foi então que em mais uma conversa muito produtiva com meu amigo @wilkerlucio, chegamos a conclusão que utilizando HTML 5 Notifications, teríamos uma abordagem ao usuário bem mais direta. De primeira nos deparamos com uma informação que esta funcionalidade não é nem um pouco cross-browser, o que me fez ficar só um pouco desmotivado diante da poderosa arma que eu tinha em mãos.

Embora seja bem restrita ao Webkit, li em algum lugar que o firefox estaria disposto a implementar num release futuro esta funcionalidade. Quem não está entendendo muito bem, pode se lembrar do Gmail, que agora te avisa quando alguém fala com você, mesmo que você não esteja vendo o e-mail naquela hora. Ah, também você pode encontrar mais sobre o assunto procurando sobre HTML 5 Desktop Notifications.

Sem mais delongas, vamos ao que interessa:

Onde posso usar html 5 notifications?

Como você já deve ter visto, o Gmail achou uma interessante função para utilizar, mas você também pode pensar em criar novas funcionalidades para:

• Checar atualizações de tweets
• Integrar com seu sistema de gerenciamento de projetos/tarefas
• Ser notificado quando falarem algo sobre você no facebook

Realmente dá pra fazer muita coisa. Mas, como? Vamos ver agora:

Verificando se o navegador suporta a Notifications API

Embora seja algo muito restrito a Webkit, você não terá problemas de erros de JavaScript, por que a verificação se dá de uma forma não obstrutiva:

// Verificando suporte a tecnologia
if (window.webkitNotifications) {
  console.log('Seu browser suporta Notifications');
}
else {
  console.log('Seu browser não suporta Notifications =(');
}

Estrutura de uma notificação

Uma notificação como você pode ver na imagem acima, é composta por um título (title), um corpo de texto (body), e uma imagem representativa. Ao criá-la, você deve especificar esses atributos para que seja visualizada corretamente.

Solicitando permissão ao usuário para ativar notificações

Embora seja um recurso muito útil, ele pode ser usado pelo lado negro da força, como praticamente qualquer coisa do mundo, por este motivo, que para você puder utilizar notificações em sua aplicação, o usuário precisa ACEITAR as notificações para o seu domínio e ainda tem mais: A ação de permissão deve ser solicitada pela ação do usuário, ou seja, você terá que fazer o próprio usuário pedir permissão, e não chegar ativando de sua escolha. Mas como pedir autorização?

Pedindo autorização ao usuário

Explicando bem resumidamente, nós teremos um botão onde o usuário clicará para que seja pedido a autorização das notifications, explanada no código JavaScript logo após o html.

Detalhe, logicamente os exemplos são dependentes em parte da biblioteca jQuery, ok? Segue:

// Html
<input type="button" id="click-me" />

// Js
var Notifications = {
	requestPermission: function(callback) {
		window.webkitNotifications.requestPermission(callback);
	}
};

$(function() {
	$('#click-me').click(function() {
		Notifications.requestPermission(function() {
			alert('Permissão concedida');
		})
	});
});

Então, como já dito, quando o usuário CLICAR no botão, será executada a solicitação de notifications. Então, como já sabemos verificar se o browser possui suporte e já sabemos como solicitar a permissão ao usuário, o que falta? Enviarmos a notificação! Mas antes, só lembrando que é necessário verificar se a permissão já está dada pelo usuário. Segue abaixo o código único de como criar uma notificação e verificando antes se a permissão foi concedida:

// Js
var Notifications = {
	requestPermission: function(callback) {
		window.webkitNotifications.requestPermission(callback);
	},

	showNotification: function(){
		// Verificando se a permissão já foi concedida
		 if (window.webkitNotifications.checkPermission() > 0) {
				// Se não houver, volta a pedir permissão
				Notifications.requestPermission(function() {
					Notifications.showNotification();
				});
		 }
		 else {
				// Se a permissão já foi concedida, cria a notificação e envia a mesma.
				var notification = window.webkitNotifications.createNotification("http://userserve-ak.last.fm/serve/64s/318711.jpg", "Olá!", "Esta é a mensagem");
				notification.show();
		 }
	}
};

Então é isso.. e tem mais

No final do post, eu coloquei alguns links úteis para saber mais sobre o assunto, espero que todos possam ficar por dentro e divulgar a ponto de perturbar as outras engines.. (assim eu espero, hehe). Então, só pra concluir, segue logo abaixo uma lib que resume tudo o que foi dito de uma forma muito fácil de ser utilizada.

Pequena lib para utilizar notifications API

Abaixo, segue uma pequena lib que resume muito do que já foi falado. Com ela vamos poder fazer o seguinte:

• Checar suporte
• Pedir permissão ao usuário
• Mostrar notificação

/**
 * HTML5 Notifications
 * - dependencies: jQuery only if you want to use callForPermission() and checkForPermission() methods.
 *
 * @djalmaaraujo
 * @wilkerlucio
 */
var Notifications = {
	apiAvailable: function() {
		if(window.webkitNotifications) {
			return true;
		} else {
			return false;
		}
	},

	isAuthorized: function() {
		if (!this.apiAvailable()) return false;

		return window.webkitNotifications.checkPermission() > 0 ? false : true;
	},

	authorize: function(callback) {
		var self = this;
		if (!this.apiAvailable()) return false;

		window.webkitNotifications.requestPermission(function() {
			if (self.isAuthorized()) {
				callback();
			}
		});
	},

	show: function(url, title, body) {
		if (!this.apiAvailable()) return false;

		var self = this;

		if (this.isAuthorized()) {
			var popup = window.webkitNotifications.createNotification(url, title, body);
			popup.show();
			setTimeout(function(){
				popup.cancel();
			}, 5000);
		} else {
			this.authorize(function() {
				//console.log(arguments);
				self.show(url, title, body);
			});
		}
	},

	checkForPermission: function() {
		if (!this.isAuthorized()) this.callForPermission();
	},

	callForPermission: function() {

		var authorizeBox = jQuery('<div />').addClass('notifications-authorize')
											.html('<p>Seu navegador possui suporte a notificações. Para solicitar uma permissão de notificação, clique no botão abaixo. Aperte "ALLOW" ou "PERMITIR" para a janela de notificação que irá aparecer. <input type="button" value="Ativar notificações" /></p>')

		jQuery('body').append(authorizeBox);

		jQuery('div.notifications-authorize input').click(function(){
			jQuery(this).remove();
			Notifications.authorize();
		});
	}
};

$(function() {
	Notifications.checkForPermission();
});

E como enviar uma notificação com a lib?

Você so precisa chamar o arquivo contendo este código, e esperar pelo pedido de notificação. Para criar uma solicitação com a lib, utilize:

Notifications.show("http://userserve-ak.last.fm/serve/64s/318711.jpg", "Olá!", "Esta é a mensagem");

Bem mais simples né? Mais dá uma lida antes de só usar.

Links interessantes sobre o assunto

Source/Código-fonte da LIB acima no github
Notifications API
Using the Notifications API

–

Espero ter demonstrado de uma forma legal a notifications API. Comentem sobre o assunto. Abraços

---

desktop notifications, html5, jquery, notifications, Notifications API, webkit