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
