Cómo implementar Notificaciones Push GCM/FCM en una aplicación móvil con Ionic Framework

La tecnología Push es una forma de comunicación en la que un servidor envía un mensaje a un cliente. Lo que caracteriza esta tecnología es que es siempre el servidor el que inicia esta comunicación y se destaca por su inmediatez, ya que no hace falta estar ejecutando la aplicación para que nos llegue. Aunque la tengamos cerrada o en segundo plano.

Por definición, para que el servidor envíe el mensaje al usuario, éste se habrá tenido que suscribir previamente, para que el servidor conozca a donde hay que enviar esa notificación push, es decir, en algún momento hay que solicitar que sea generado un identificador y almacenarlo para poder enviar la notificación push al usuario, en Android es el Registration ID y en iOS el Device Token. Con ese identificador desde el servidor se comunica con Apple y Google y son estos quienes se comunican directamente con el móvil (Google por GCM/FCM y Apple por APNS).

Este tutorial tiene como objetivo explicar cómo implementar las notificaciones push GCM/FCM en una aplicación Ionic. A continuación se van a describir los pasos necesarios para la creación de un proyecto FCM.

Configurar Firebase Cloud Messaging (FCM)

Firebase Cloud Messaging (FCM) es la nueva versión del Google Cloud Messaging (GCM), se hereda la infraestructura GCM, además de nuevas características.

Para enviar las notificaciones push vamos a tener que comunicar con FCM y para eso a continuación vamos a describir cómo obtener un Server Key y un Sender ID generado por FCM necesario para realizar esa comunicación.

Primero que nada debemos crear un proyecto FCM y para eso vamos a Firebase Console y hacemos clic en Create New Project (o agregar Firebase a un proyecto google existente).

Una vez creado tu proyecto vamos a Project settings:

y hacemos clic en Cloud Messaging:

Al crear el proyecto se ha generado una Server Key y un Sender ID que se deben guardar que lo vamos a usar más tarde.

Proyecto Ionic

Para la implementación de las notificaciones push en nuestro proyecto Ionic hemos usado el plugin phonegap-plugin-push (pero existen otros plugins de cordova en que su implementación es similar).

Al compilar para Android deberás asegurarte de que tienes instalado los siguientes pre-requisitos a través del Administrador de Android SDK:

·         Android Support Library la versión 23 o posterior

·         Android Support Repository la versión 20 o posterior

·         Google Play Services la versión 27 o posterior

·         Google Repository la versión 22 o posterior

Para agregar el plugin phonegap-plugin-push a nuestro proyecto abrimos el terminal y dentro de la carpeta del proyecto Ionic ejecutamos el siguiente comando (usar el Sender ID que se ha generado al crear el proyecto FCM): 

>ionic plugin add phonegap-plugin-push --variable SENDER_ID="Sender ID"

Ejemplo implementado en app.js:

.run(function($ionicPlatform){
$ionicPlatform.ready(function() {
var push = PushNotification.init({
android: {
senderID: "Sender ID”
},

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

push.on('registration', function(data) {
console.log("regID:" + data.registrationId);
alert("regID:" + data.registrationId);
});

push.on('notification', function(data) {
console.log("title:" + data.title + " Message:" + data.message);
alert("title:" + data.title + " Message:" + data.message);

// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
});

push.on('error', function(e) {
console.log(e.message);
});

});

});

Con todo esto realizado ahora se puede generar el apk. Para eso en el terminal se escriben los siguientes comandos:

>ionic platform add android
>ionic build android     (o “ionic run android” para instalar directamente en tu móvil)

Al abrir la app en tu móvil deberás ver un alerta con el Registration ID y vamos guardar este ID que lo vamos a usar más tarde (es más fácil copiarlo conectando tu móvil y abrir el navegador Chrome y acceder a la consola, se abre con “chrome://inspect”).

Enviar Notificaciones Push

Hay varias maneras de enviar las notificaciones push, en este tutorial vamos a usar un ejemplo rápido para probar que se reciben las notificaciones push en la app que hemos instalado. Para eso vamos a usar la extensíon de Chrome Advanced Rest Client para hacer una petición a FCM para que este envie la notificacion a la app instalada anteriormente (se puede hacer la peticion que vamos a usar de ejemplo de igual modo usando cualquier servidor).

En el Advanced Rest Client vamos hacer una peticion HTTP POST a la URL https://fcm.googleapis.com/fcm/send en que en la cabecera se añaden los campos Authorization con la Server Key y un Content-Type de tipo application/json y enviando el payload de ejemplo que se muestra a continuacion.

Ejemplo del payload de una notificacione push:

{

    "registration_ids": ["Registration ID"],

    "data": {

          "title": "Large Icon",

          "message": "Loaded from assets folder",

          "image": "www/image/logo.png"

    }

}

Nota: Se pueden ver otros ejemplos en https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md

Advanced Rest Client:

Notificación push recibida en el móvil:

Autor: Tiago Coelho