O que é uma notificação push

 

Você já deve estar acostumado com as notificações do whatsapp quando alguem te manda uma mensagem, ou então com as notificações de comentários e curtidas em suas fotos do facebook. Estas são notificações push em smartphones, uma maneira que os aplicativos tem de chamar a atenção do usuário para engaja-lo ou lembra-lo de algo.

 

android-l-notifications.jpgwahts.jpg

 

Como funciona técnicamente

 

Primeiramente devemos entender como funciona o fluxo de uma notificação push.

 

Notification Life Cycle.png

 

  1. Primeiramente o dispositivo deve se registrar em um serviço de notificação push, que para android é o Google Cloud Messaging (GCM) e para IOS é o Apple Push Notification (APN).(...) Continue lendo.

  2. Com o registro do dispositivo, o mesmo recebe um ID que é utilizado posteriormente para direcionar a notificação para ele.

  3. Este registro deve ser armazenado pelo servidor de aplicação que deseja fazer as notificações.

  4. Quando o servidor de aplicação desejar fazer uma notificação push, por exemplo o whatsapp quiser notificar que você recebeu uma mensagem, ele manda uma mensagem push com o seu id para o serviço de notificação push (GCM ou APN).

  5. Se o id informado for correto e não tiver nenhum problema maior, o serviço envia a notificação push para o dispositivo.

 

Implementação para android

 

Utilizei o framework Ionic para implementar um exemplo deste recurso.

Primeiramente segui o tutorial de como cadastrar minha aplicação para poder usar o GCM.

Para satisfazer os passos 2 e 3 citados acima utilizei o plugin de notificações push do Phonegap.

Para satisfazer os passos 4 e 5 utilizei o módulo node-gcm para disparar notificações push a partir de um servidor.


 

Colocando em prática

 

Antes de qualquer passo abaixo deve-se ter o nodejs.org instalado. Com ele instalado deve-se instalar tambem o bower:

 



npm i bower -g

 

Agora devemos instalar o ionic:

 



npm install -g ionic

 

Depois vamos utilizar uma aplicação pronta de exemplo do próprio ionic:

 



ionic start push-tutorial tabs
cd push-tutorial

 

Agora vamos importar o plugin do phonegap no nosso projeto ionic:

 


ionic plugin add  phonegap-plugin-push

 

Agora devemos adicoinar a plataforma android no projeto:

 



ionic platforms add android

 

Para ver se está tudo ok até agora use o comando que irá emular nosso app no browser:

 



ionic serve --lab

 

Deve aparecer algo deste tipo:

8bETm0T.png

 

Nota: Os passos em diante dependem de um emulador ou de um celular android. No meu caso irei utilizar um celular e utilizar o comando run para instalar o app, no caso de um emulador se utiliza o comando emulate.

 

Agora vamos ao código do app.

 

Dentro de app.js devemos inserir o seguinte código

Note que no campo senderID devemos substituir NUMERO_PROJETO pelo número do projeto criado no GCM.

2015-09-25 14_47_45-Página inicial - aspiraway.png


 

   // Nesta linha estamos instânciando e configurando o plugin que instalamos.
 
   var push = PushNotification.init({ "android": {"senderID": "NUMERO_PROJETO", icon : "icon"},

        "ios": {"alert": "true", "badge": "true", "sound": "true"}, "windows": {} } );



   /*

   Este é o evento que será chamado assim que o GCM responder a requisição

   com o id do dispositivo.

   É neste método que devendo mandar o id e armazenar em nosso servidor para enviarmos

   notificações posteriormente

   */

   push.on('registration', function(data) {

       console.log(data);

       alert(data.registrationId);

   });



    // Este é o evento no qual implementando o comportamento do nosso app

    // quando o usuário clicar na notificação

    push.on('notification', function(data) {

       alert('Notificação acionada, agora deve-se implementar a navegação no app de acordo com os dados: ' + JSON.stringify(data));

   });



   push.on('error', function(e) {

       alert('registration error: ' + e.message);

   });

 

Este código deve ficar dentro da callback ready como na imagem abaixo:

2015-09-25 14_49_42-C__desenvolvimento_push-tutorial_teste_www_js_app.js (teste, push-server) - Subl.png

 

A parte do aplicativo está feita, agora devemos implementar alguma aplicação para enviar as requisições para o GCM com nossas notificações.

 

Criei um projeto no GitHub que contem o app que acabamos de aprender e o servidor na pasta push-server. Faça o download desta pasta.

 

Entre na pasta por linha de comando e digite:

 


npm install

 

Depois para ligar o servidor:

 


npm start

 

O servidor irá ligar na porta 3000, para realizar a notificação push basta seguir esta documentação.

 

Utilizando postman deve-se obter uma resposta desta forma

 

HZMQ96z.png

 

E o resultado é:

 

Screenshot_2015-09-25-15-43-01.png