Notificaciones push con Ionic Framework

  • por Francisco Vallés

La notificaciones push son una característica esencial de muchas aplicaciones móviles, y nos permiten estar al tanto de los eventos que ocurren en nuestra aplicación de una manera práctica. Ejemplos populares son Facebook o Whatsapp, en donde estas notificaciones son fundamentales para interactuar con otras personas a través de la aplicación. A continuación crearemos una aplicación móvil de ejemplo con Ionic Framework, en donde añadiremos la funcionalidad de notificaciones push mediante el uso de Firebase.

Primero que nada, hay que asegurarse de tener instalado Node.js. Luego, instalaremos Ionic con el siguiente comando en el terminal:

npm install -g cordova ionic

Así de simple, ya tenemos lo que necesitamos para crear una aplicación. Llamaremos a esta aplicación NotificationTest y la crearemos:

ionic start notification_test blank

¡Listo!. Ahora instalaremos la extensión de Firebase Cloud Messaging (FCM) escribiendo lo siguiente en el terminal:

ionic plugin add cordova-plugin-fcm

Una vez instalado, ingresamos en nuestro proyecto a www/js/app.js y agregamos lo siguiente:

$ionicPlatform.ready(function() {
    if (window.cordova) {
      //FCMPlugin.getToken( successCallback(token), errorCallback(err) );
      //Keep in mind the function will return null if the token has not been established yet.
      FCMPlugin.getToken(
        function(token){
          alert(token);
          console.log(token);
        },
        function(err){
          console.log('error retrieving token: ' + err);
        }
      );
      //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
      //Here you define your application behaviour based on the notification data.
      FCMPlugin.onNotification(
        function(data){
          if(data.wasTapped){
            //Notification was received on device tray and tapped by the user.
            alert( JSON.stringify(data) );
          }else{
            //Notification was received in foreground. Maybe the user needs to be notified.
            alert( JSON.stringify(data) );
          }
        },
        function(msg){
          console.log('onNotification callback successfully registered: ' + msg);
        },
        function(err){
          console.log('Error registering onNotification callback: ' + err);
        }
      );
    }

...

El siguiente paso, es configurar las distintas plataformas.

Android

Ingresaremos a la consola de Firebase y crearemos un nuevo proyecto. Una vez hecho esto, haremos clic en Añade Firebase a tu aplicación de Android. Aquí colocamos como nombre del paquete, el texto que aparece en el atributo id de la etiqueta widget en el archivo config.xml presente en la carpeta de nuestra aplicación. En este caso sería "com.ionicframework.notificationtest548125".

<widget id="com.ionicframework.notificationtest548125" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Una vez añadida la aplicación, se descargará un archivo google-services.json. Volvemos al terminal, a la carpeta en donde creamos el proyecto, y añadimos la plataforma android:

ionic platform add android

Al hacer esto, se creará la carpeta platforms en la base de nuestro proyecto. Ingresamos a platforms/android y agregamos el archivo google-services.json recién descargado.

Para probarla, necesitamos instalarla en un dispositivo con Android que tenga activada la depuración USB en las opciones de desarrollador. Asumiendo que los SDK de Android están instalados, conectamos el dispositivo al computador con el cable usb y ejecutamos la siguiente línea:

ionic run android

     

Una vez instalada, al abrirla vemos como aparece un mensaje de alerta con una serie de caracteres. Este es el token que utilizaremos para enviar la notificación de prueba. Para esto, ingresamos nuevamente a la consola de Firebase y en el menú lateral, hacemos clic en Notifications. Hacemos clic en el botón Envía tu primer mensaje y luego escribimos algún mensaje en el campo Texto del mensaje. Seleccionamos Un único dispositivo e ingresamos el token que aparece como alerta al abrir la aplicación. Nos aseguramos de que la aplicación en el dispositivo esté minimizada y hacemos click en el botón Enviar mensaje.

Como podemos ver en las imagen, la notificación push llega sin problemas al dispositivo.

iOS

Ingresamos nuevamente a la consola de Firebase, entramos en nuestro proyecto NotificationTest, hacemos clic en Añadir otra aplicación y luego en iOS. En el campo ID del conjunto de iOS colocamos, al igual que en el caso de Android, "com.ionicframework.notificationtest548125" y añadimos la aplicación. Una vez hecho esto, se descargará un archivo GoogleService-Info.plist.

En el terminal, añadimos la plataforma:

ionic platform add ios

Ingresamos a platforms/ios y agregamos el archivo GoogleService-Info.plist recién descargado.

En un Mac, ingresamos a XCode y abrimos el proyecto. Dentro de la pestaña Capabilities, verificamos que las Push Notifications estén activadas (ON). Luego, conectamos nuestro dispositivo e instalamos la aplicación.

Para que funcione, necesitamos un paso extra a Android, el cual es generar los certificados de desarrollo y producción. Como esta es una prueba, solo generaremos el de desarrollo. 

Abrimos Keychain Access y el en menú, elegimos Certificate Assistant/Request a Certificate from a Certificate Authority. Ingresamos nuestro correo electrónico, el nombre del proyecto (NotificationTest) y elegimos la opción de guardar en el disco.

Ingresamos a la consola de Apple, luego a Certificates, Indentifiers & Profiles/App IDs y creamos una aplicación con el botón +. Como nombre colocamos NotificationTest, como ID  "com.ionicframework.notificationtest548125" y habilitamos las notificaciones push.

Una vez creada, la seleccionamos y hacemos clic en editar. En la sección Push Notifications, generamos el certificado de desarrollo mediante el uso del certificado creado anteriormente. Ingresamos al Keychain Access/Certificates, seleccionamos el certificado de desarrollo y su llave privada, hacemos clic derecho y elegimos la opción de exportar los 2 ítems. Lo guardamos como un archivo .p12 y nos dirigimos a la consola de Firebase. Allí, entramos a la configuración del proyecto, en la pestaña Mensajería en la nube y subimos el certificado de desarrollo en la opción correspondiente.

Con todo esto, estamos listos para probar nuevamente las notificaciones. Envíamos un mensaje de la misma manera que en android y comprobamos que todo funciona correctamente.

Así de fácil es implementar notificaciones push en una aplicación con Ionic Framework. La aplicación de prueba usada está en Github como referencia.

Fuentes:

Imagen principal