Push Notification no Android - Enviando notificações do seu servidor Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 1 ano, 5 meses, 2 semanas, 4 dias atrás.

A algumas semanas eu escrevi um artigo sobre local notifications aqui no WebDevBr, e prometi que traria sobre push notification também, pois bem, promessa cumprida.

Para quem não leu o artigo passado, notifications são aquelas notificações que você recebe no celular quando alguma coisa acontece ou quando tem alguma promoção naquele joguinho que atrapalha sua vida de tão divertido. Por exemplo, quando você me manda uma mensagem via WhatsApp (quando ele não está bloqueado pela justiça) um alerta é disparado e fica lá no topo do celular, avisando que você tem mensagens, essa é uma notificação.

Existem dois tipos de notificações, as que são agendadas pela sua aplicação e as que são enviadas pelo servidor, o primeiro caso é chamado de local notification e o segundo são as push notifications.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

Local notifications são ideais para você setar alertas com base em "gatilhos" que você definiu no seu aplicativo, por exemplo, para lembrar o usuário que ele deve ler um artigo que o interessou ou para avisar que determinada tarefa (a construção de uma casinha no seu jogo, por exemplo) chegou ao fim, elas partem do aplicativo, por isso o nome "local".

Push notifications partem do servidor e são ideais para alertas diversos e que não estão "pré-engatilhados" na sua aplicação, por exemplo, você tem uma loja virtual com um sistema de troca de status do pedido e envia um email sempre que este é alterado e informa que o pagamento foi concluido, que o produto foi enviado e qual o código de rastreamento, não da pra saber quando isso vai acontecer exatamente, com push notifications você pode incluir também um alerta no celular da pessoa e configurar a aplicação para tomar uma ação com base nas informações enviadas pela notificação, por exemplo, ao enviar o código de rastreio dos Correios você pode abrir uma página para mostrar aonde o produto está de acordo com o site dos correios.

Claro que estes são exemplos e a realidade vai muito além disso, Vamos por as mãos na massa.

Conseguindo permissões para o Push Notifications

Neste ponto você vai precisar de um aplicativo no Google Play configurado, mesmo que seja apenas um rascunho.

Criando uma conta no Google Cloud Messaging (GCM)

Vamos precisar configurar o serviço no Google e integrar com o aplicativo no Google Play, o processo é simples e rápido, mas um pouco burocrático como você vai ver.

Primeramente acesse o site (https://developers.google.com/mobile/add) e clique o botão Pick a platform e escolha Android App.

Na tela que se segue você deve ver dois campos, App Name e Android Package name.

O App name nada tem haver com o aplicativo no Google Play, então de um nome para criar ou escolha na lista, caso você já tenha.

O Android Package name é o aplicativo que você quer enviar a notificação, para conseguir isso é simples, vá ao seu config.xml (fica na raiz do projeto) e localize logo no começo (segunda linha, provavelmente) o seguinte:

<widget id="com.ionicframework.pushnotifications242424" /**restante da linha**

Você vai copiar este id (com.ionicframework.pushnotifications242424 no exemplo acima) e colar no campo Android Package name.

Escolha o pais e clique em Choose ad configure services.

O serviço a escolher é o Cloud Messaging (ele que envia a notificação).

Neste ponto o site vai te fornece duas informações, Server API key e Sender Id, guarde as duas, vamos usar muito isso.

Integrando com o Google Play

Para integrar o app faça o seguinte:

  1. Faça login no Console do desenvolvedor do Google Play.
  2. Selecione um app.
  3. No menu à esquerda, clique em Serviços e APIs.
  4. Clique no botão Vincular um código de remetente.
  5. Digite sua chave da GCM API ou o token de login do cliente do C2DM.
  6. Clique em Vincular.

Este passo-a-passo a cima foi retirado daqui: (https://support.google.com/googleplay/android-developer/answer/2663268?hl=pt-BR).

Instalando o plugin push-notification

Para garantir que este projeto seja o mais compatível possível com a maior quantidade de projetos possíveis eu vou criar um novo app usando template blank.

ionic start PushNotification blank
cd PushNotification
ionic platform add android

Note que eu já inclui uma plataforma, isso é importante!

Em seguida vamos instalar o plugin:

ionic plugin add phonegap-plugin-push --variable SENDER_ID="XXXXXXX"

Não esqueça de configurar o SENDER_ID trocando o XXXXXXX pelo valor que pegamos no passo anterior.

E por fim o ng-cordova:

bower install ngCordova -s

O -s é para adicionar ao arquivo bower.json, não é obrigatório, mas eu sempre registre o que uso.

E por fim atualize o index.html (dentro de www) com o ng-cordova.js, ele precisa ficar antes do arquivo que vai fazer as notificações, aqui vou colocar acima do app.js:

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

O ngCordova é o cara que vai integrar o plugin de notificações do Cordova com o AngularJs que o Ionic usa.

Por fim, dentro do seu app.js (www/js/app.js) adicione o seguinte (certifique-se de estar dentro de $ionicPlatform.ready(function() {/*aqui*/}):

// Configura a notificação, altere o senderID
var push = PushNotification.init({
  "android": {"senderID": "XXXXXX", icon : "icon"},
  "ios": {"alert": "true", "badge": "true", "sound": "true"},
  "windows": {}
});

// veja a explicação seguir
push.on('registration', function(data) {
   console.log(data.registrationId);
});

// O que fazer quando clicar em uma 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));
});

// erro caso não possa registrar (veja a explicação seguir)
push.on('error', function(e) {
  alert('registration error: ' + e.message);
});

O primeiro bloco configura o plugin, note que eu passei um parâmetro icon, ele configura o icone que deve aparecer, da pra trocar a cor do icone, som da notificação, se vai vibrar o celular ou não e algumas outras configurações legais, da uma olhada aqui pra mais informações.

O segundo bloco de código é referente ao momento do registro no Cloud Messaging. O campo data.registrationId é retornado elo GCM e é usado ao enviar uma notificação, ele é como o "email" do celular.

Minha dica é você armazenar o código para um futuro cadastro do usuário ou enviar para o servidor e guardar isso, talvez como um "pré-cadastro" do usuário, você só vai poder enviar uma notificação para este dispositivo se tiver este código, como eu uso o chrome:inspect para trabalhar vou pegar a saída no console do navegador desta vez.

O terceiro bloco é disparado quando o usuário tocar na notificação, como veremos mais a frente é possível personalizar este resultado (ou apenas ignorar isso e somente abrir o aplicativo, você que sabe).

E o quarto bloco é executado caso o registro do aplicativo não possa acontecer, também é opcional.

Enviando uma notificação

Para alegria geral da galera, as notificações são usadas com uma requisição POST para o Cloud Messaging, então qualquer coisa que você use que faz requisições HTTP (Postman, PHP, Javascript, Node, escrever o código em um papel e fazer um aviãozinho...) vai ser compatível, a requisição deve se parecer com:

POST /gcm/send HTTP/1.1
Host: android.googleapis.com
Authorization: key=Server_API_Key
Content-Type: application/json
Cache-Control: no-cache

{"to":"NUMERO_DE_REGISTRO_DO_APP","data":{"message":"Mensagem de teste de notifica\u00e7\u00e3o","title":"T\u00edtulo de teste","image":"www\/img\/icon\/imac-icon.png","soundname":"olha_a_mensagem","action":"Chama o Erik"}}

Se esse código acima não é problema pra você (e não deveria ser), apenas lembre-se de trocar o Server_API_Key pelo código que você guardou lá no painel do Google e o NUMERO_DE_REGISTRO_DO_APP pelo código enorme gerado pelo registro do celular (lembra do data.registrationId)

Se você não entendeu muito vou te dar uma força.

Você deve enviar uma requisição POST para a URL https://android.googleapis.com/gcm/send com dois cabeçalhos:

Authorization: key=Server_API_Key
Content-Type: application/json

Aonde ServerAPIKey é o código que você guardou lá do painel do Google.

O conteúdo deve ser um json no seguinte formato:

{
    "to":"NUMERO_DE_REGISTRO_DO_DISPOSITIVO",
    "data":{
        "message":"Mensagem de teste de notifica\u00e7\u00e3o",
        "title":"T\u00edtulo de teste",
        "image":"www\/img\/icon\/imac-icon.png",
        "soundname":"olha_a_mensagem",
        "action":"Chama o Erik"
    }
}

O campo to recebe o número de identificação do dispositivo que deve receber a mensagem, opicionalmente você pode trocar por um array de ids e alterar o nome para registration_ids:

{
    "registration_ids":["NUMERO_DE_REGISTRO_DO_DISPOSITIVO_1", "NUMERO_DE_REGISTRO_DO_DISPOSITIVO_2", "NUMERO_DE_REGISTRO_DO_DISPOSITIVO_3"],
    "data":{
        "message":"Mensagem de teste de notifica\u00e7\u00e3o",
        "title":"T\u00edtulo de teste",
        "image":"www\/img\/icon\/imac-icon.png",
        "soundname":"olha_a_mensagem",
        "action":"Chama o Erik"
    }
}

O campo data é o corpo da notificação, eu setei 5 campos para a notificação:

  • message: O texto da notificação
  • title: O título da notificação
  • image: O icone
  • soundname: O som da notificação
  • action: Este é um campo adicional que eu vou usar apenas para decidir o que fazer dentro do app (lembra do push.on('notification', function(data)?), ele não tem nenhum efeito na notificação ou seja, fui eu que coloquei ali.

Exemplo com PHP

Se você usa Composer ou autoloads compatíveis com PSR-4 você pode usar o Guzzle, é bem simples:

$serverApiKey = 'XXX';
$to = 'NUMERO_DE_REGISTRO_DO_DISPOSITIVO';
$subject = 'Título de teste';
$message = 'Mensagem de teste de notificação';

$messages = [
    'title' => $subject,
    'message' => $message,
    //os outros que você qusier
];

$headers = [ 
    'Authorization' => 'key=' . $serverApiKey,
    'Content-Type' => 'application/json',
];

//monta a estrutura do futuro json
$body = [
        'to' => $to,
        'data' => $messages,
];

//envia a requisição
$guzzle = new \GuzzleHttp\Client;
$request = $guzzle->post('https://android.googleapis.com/gcm/send',
[
    'headers' => $headers,
    'json' => $body,
]);

//mostra o retorno
$json = $request->getBody();
$data = json_decode($json);

Claro que iria preferir uma estrutura orientada a objetos com o Guzzle devidamente encapsulado e com uma interface, caso eu queisa ou precise usar outro recurso no futuro (cURL, por exemplo), mas enfim.

Outros exemplos

Se você quiser compartilhar seu próprio código de exemplo é só me procurar, eu coloco aqui, claro que eu mesmo quero enriquecer esta página no futuro.

Conclusão

Claro que eu não raspei nem a superficie de possibilidades, existem serviços inteiros baseados nesta ideia de push notifications, afinal de contas, quem não le as notificações do celular! Este é um excelente canal de divulgação e engajamento e você ou seu cliente com certeza vão se beneficiar.


Cursos relacionados


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!