Local notification no Android - Agendando notificações a partir do celular do usuário Artigo
Este artigo foi publicado a 5 anos, 3 meses, 2 semanas, 6 dias atrás.
Muita gente me consulta sobre como fazer para o aplicativo Android mostrar aquelas notificações no estilo que WhatsApp, Facebook e muitos outros aplicativos e jogos fazem. Vamos ver se consigo ajudar!
Em primeiro lugar você precisa entender que existem dois tipos diferentes de notificação, Local Notification e Push Notification.
Local Notification parte do próprio celular, sem intervensão externa. Imagine que você criou um jogo e que em 8 horas uma determinada quantidade de ouro será liberada para o jogador, ou que você tem um compromisso agendado para daqui a 2 dias. Você não precisa que um aviso seja enviado do seu servidor, o próprio aplicativo pode agendar isso.
Já com Push Notification a coisa toda vem do servidor (provavelmente com um painel de administração), quando você instala e abre o aplicativo pela primeira vez um código de registro único é criado e (pode ser) enviado para um servidor definido por você. Com este código o servidor pode enviar para o celular as notificações que precisar, por exemplo, de uma promoção, recurso ou conteúdo novo que está disponível.
O push notification depende de internet para que o aviso chegue (por exemplo as mensagens do WhatsApp), já o local notification não. Por outro lado com o push notification você tem a vantagem de enviar o texto que quiser para o usuário, enquanto que com o local notification você precisa deixar isso pré-definido e com gatilhos já preparados para agendar a notificação.
Não quero deixar aqui uma informação errada de que você precisa escolher entre ambos, digo, se você decidir que sua aplicação vai usar o push notification, você também pode deixar "gatilhos" para local notification prontos, nada impede. Mas neste artigo só vou falar do local notification, o push fica pra outro dia.
Instalando o plugin local-notification
ionic start LocalNotification blank
cd LocalNotification
O body do index.html vai ficar assim:
<ion-content ng-controller="localNotificationCtrl">
<h3>Agendar</h3>
<a href="" ng-click="notifyOneHour()" class="button">Agendar daqui 1 hora</a>
<a href="" ng-click="notifyTenSeconds()" class="button">Agendar daqui 10 segundos</a>
<h3>Verificar</h3>
<a href="" ng-click="isScheduled(1)" class="button">Notificação de 1 hora</a>
<a href="" ng-click="isScheduled(2)" class="button">Notificação de 10 segundos</a>
Nenhuma novidade aqui, então vamos agendar as notificações.
Agendando uma notificação local
Neste exemplo vou criar 2 notificações, uma para daqui a 10 segundos e outra para daqui uma hora (paciência, rsrs).
Você vai precisar injetar o 'ngCordova' no módulo atual, no meu exemplo ficou assim:
Fiz isso na linha 6 em www/js/app.js, a primeira linha com código do arquivo, aonde eu declaro o módulo do Angular.
E vou criar um controller no final do arquivo (app.js):
.controller('localNotificationCtrl', function($scope, $cordovaLocalNotification){
$scope.notifyOneHour = function() {
var hour = now.setMinutes(now.getMinutes() + 60);
date: hour,
message: "Agendado a 1 hora!",
title: "Teste Artigo no WebDevBr"
console.log("Notificação agendada");
$scope.notifyTenSeconds = function() {
var seconds = now.setSeconds(now.getSeconds() + 10);
date: seconds,
message: "Agendado a 10 segundos!",
O controller tem dois métodos no escopo, o notifyOneHour() e o notifyTenSeconds(), ambos com um código parecido, as diferenças são na configuração de tempo e texto da mensagem da notificação, vamos entender:
var now = new Date(); //cria um objeto JavaScript de data, documentação: http://www.w3schools.com/js/js_dates.asp
var hour = now.setMinutes(now.getMinutes() + 60); //adiciona 60 minutos ao objeto
id: "1", //informo um id único para a notificação
date: hour, //aqui meu objeto de data que criei antes
message: "Agendado a 1 hora!", //mensagem da notificação
title: "Teste Artigo no WebDevBr" //título da notificação
console.log("Notificação agendada"); //executa alguma ação caso a notificação seja agendada com sucesso
Um detalhe bacana sobre o add() do $cordovaLocalNotification é que ele retorna um promisse, então você pode usar o then(success(), error()) como faria com $http.
Verificando um agendamento
Você também pode verificar se uma notificação já foi agendada usando o isScheduled():
$scope.isScheduled = function(id) {
$cordovaLocalNotification.isScheduled(id).then(function(isScheduled) {
alert("Notification "+id+" Scheduled: " + isScheduled);
Neste caso, vamos enviar um id (o mesmo informado no add) para verificar se esta notificação já está agendada ou não, no exemplo acima um alerta vai aparecer informando true (agendada) ou false (não agendada).
Você ainda pode fazer mais com local notifications, mas já sabe o essencial e já pode adicionar gatilhos para disparos automáticos de notificações no celular e que serão exibidos mesmo que o aplicativo esteja fechado naquele momento. Uma ótima maneira de engajar o usuário e fazer ele voltar a aplicação.