Local notification no Android - Agendando notificações a partir do celular do usuário Artigo

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


Este artigo foi publicado a 11 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.

Gostou deste artigo?

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

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

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 LocalNotification blank
    cd LocalNotification
    ionic platform add android

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

Em seguida vamos instalar o plugin:

    ionic plugin add de.appplant.cordova.plugin.local-notification

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.

O body do index.html vai ficar assim:

    <body ng-app="starter">

        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <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>
                <hr>
                <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>
            </ion-content>
        </ion-pane>
    </body>

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:

    angular.module('starter', ['ionic', 'ngCordova'])

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 now = new Date();
            var hour = now.setMinutes(now.getMinutes() + 60);

            $cordovaLocalNotification.add({
                    id: "1",
                    date: hour,
                    message: "Agendado a 1 hora!",
                    title: "Teste Artigo no WebDevBr"
            }).then(function () {
                    console.log("Notificação agendada");
            });

        };

        $scope.notifyTenSeconds = function() {
            var now = new Date();
            var seconds = now.setSeconds(now.getSeconds() + 10);

            $cordovaLocalNotification.add({
                    id: "2",
                    date: seconds,
                    message: "Agendado a 10 segundos!",
                    title: "Teste Artigo no WebDevBr"
            }).then(function () {
                    console.log("Notificação agendada");
            });

        }
    })

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:

        $scope.notifyOneHour = function() {
            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

            $cordovaLocalNotification.add({
                    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
            }).then(function () {
                    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).

Conclusão

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.

Para conhecer mais sobre os recursos do local notifications, veja a documentação oficial.


Cursos relacionados


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