¡Notificaciones Push Ionic! de 0 a 100 Úsalas como un pro

¡Notificaciones Push Ionic! de 0 a 100 Úsalas como un pro
5 (100%) 2 votes

[draw_button_botton]
Como era de esperar, y no podía faltar, las notificaciones push son uno de los servicios más potentes que podemos usar para lo comunicación directa con el cliente desde nuestra aplicación. Es más, es uno de los métodos más potentes para generar engagement alrededor nuestro software y en este tuto vamos a ver como las podemos implementar y utilizar correctamente.

Notificaciones Push en Ionic

¡Yepaaaa! Muy buenas majo lector / guapa lectora. ¿Qué tal va evolucionando la semana? ¡Ya es viernes! Con lo que eso significa 🙂 Muchos pensaréis que barcos y pu…. Pero no, hay que aprovechar los fines de semana para currar en lo que no puedes currar entre semana, por lo menos en mi caso, y seguro que en el tuyo también. Y si no es así, mírate este vídeo:

Bueno, pues a lo que interesa. Vamos a ver cómo podemos usar este fantástico sistema en nuestras apps.

Nota: Antes de continuar me gustaría aclarar, que este es un tutorial para enviar notificaciones desde nuestro panel de Firebase. Más adelante en el curso realizaremos un tutorial para configurar un servidor hecho en PHP (hago una pequeña introducción al final del post) para enviar notificaciones desde este en conjunto del api de Firebase Clod Messaging. Cuando este tutorial esté terminado lo pondré aquí.

 

Primero, obtener las claves del api para FCM (Firebase Cloud Messaging)

Para poder empezar a usar el sistema de notificaciones Push mediante Firebase (Si estás utilizando OneSignal lo veremos en otro tuto) tenemos que darnos de alta en el sistema. En primer lugar, dirígete a este enlace: https://console.firebase.google.com/. Tendrás que acceder con tu cuenta de Google.

Una vez que ya estés dentro tendremos que realizar un par de cosllas. Pero veamos estos pasos en vídeo, que mola más.

 

Instalar Native Push Ionic

Como hacemos cada vez que tenemos que utilizar un componente que no está en el core system, tenemos que instalarlo. Para ello vamos a realizar las siguientes acciones.

$ ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=XXXXXXXXX
$ npm install --save @ionic-native/push

 

La primera línea agregará el código necesario (plugin) para poder comunicarnos desde el código TS con la plataforma nativa del sistema. Por otro lado, el comando “–variable” es para incluir una configuración adicional al sistema.  Y en este caso en concreto vamos a agregar donde están las Xs la id de firebase que hemos obtenido haciendo los pasos que hemos visto en el vídeo.

La segunda instalará el código TS que utilizaremos para poder trabajar con el componente.

En segundo lugar, tenemos que importar el componente en el app-module. Que quedaría de la siguiente manera:

 

providers: [
   Push,
   ...
]

 

Pues ya lo tenemos todo listo para comenzar a usar las notificaciones push en ionic, sigamos.

Configuración de Ionic Push

Ahora, con todo ya instalado, nos vamos a dirigir a nuestro componente principal “app-componente” y vamos a realizar la configuración necesaria.

Pero antes de nada veamos el código necesario.

 

import { Push, PushObject, PushOptions } from '@ionic-native/push';

constructor(private push: Push) { }

...


// comprobamos los permisos
this.push.hasPermission()
  .then((res: any) => {

    if (res.isEnabled) {
      console.log('We have permission to send push notifications');
    } else {
      console.log('We do not have permission to send push notifications');
    }

  });

// inicializamos la configuración para android y ios
const options: PushOptions = {
   android: {
       senderID: 'SENDER_ID'
   },
   ios: {
       senderID: 'SENDER_ID'//si no lo pones, se generará un token para APNS
       alert: 'true',
       badge: true,
       sound: 'false'
   },
   windows: {}
};

const pushObject: PushObject = this.push.init(options);

pushObject.on('notification').subscribe((notification: any) => {
  //aquí recibimos las notificaciones de firebase
});

pushObject.on('registration').subscribe((registration: any) => {
    const registrationId = registration.registrationId;
    //registrationId lo debes guardar en mysql o similar para reutilizar
});

pushObject.on('error').subscribe(error => {
    console.error('Error with Push plugin', error)
});

Bien, tenemos que importar las dependencias Push, PushObject y PushOptions del módulo “@ionic-native/push”

Después, es nuestra clase principal, tenemos que inyectar las dependencias de notificaciones Push como hemos visto en el código.

Lo siguiente que tenemos que hacer es pedir permisos para poder enviar notificaciones. Para ello vamos a llamar a la función “hashPermission” del componente “push”. Se trata de una promesa y hay que controlarla con la función “then”. Lógicamente, como todo, tendremos que controlar que es lo que hacemos si la respuesta es correcta o no. Ahí ya lo tienes a TU elección. ¡Yeahhhhh! Que empiece la fiesta.

Configurar ionic para multiplataforma

Para continuar, planteando la app multiplataforma, vamos a configurar las PushOptions como puedes ver en el código. Tendremos que asígnale el SENDER_ID que hemos generado en la parte superior del artículo.

Nota: Como puedes ver, hay diferencias entre plataformas, mucho ojo a esto ¿vale? es importante. En este caso, en iOS hay que configurar cosillas adicionales como pueden ser; Si queremos que suene, que muestre el badge con la notificación y el sonido.

Posteriormente, creamos el objeto pushObject llamando a la función “init” y le pasamos las opciones que hemos creado en el párrafo anterior.

Y ahora solo nos queda controlar los eventos que serán disparados cuando recibamos información. En este caso concreto se controlan con la función “on”.

Nota: Para todo aquel que no lo sepa, cuando hablamos de controlar en este punto significa que tenemos que crear el código pertinente que se ejecutará independientemente del momento. Vamos, un listener de toda la vida.

Tenemos on(“notification”), on(“registration”), on(“error”).

  • Notification: Se emite cuando nos entra una nueva notificación y contiene la información que ha entrado con la notificación.
  • Registration: Se emite si se ha registrado correctamente en el servidor de notificaciones y con él llega el token que tenemos que guardar. En este caso le hemos puesto registration. Aconsejo que miréis lo que viene dentro porque hay cosas interesantes.
  • Error: Se emite cuando ha sucedido un error y nos entra por parámetros una cadena con el error que se ha producido.

 

Pues listo, con todo esto realizado correctamente al pie de la letra tendremos las notificaciones listas para trabajar. Puedes probarlo desde Firebase enviándote una notificación desde el panel.

Ahora la multiplataforma

En el punto anterior hemos visto como configurar de manera independiente las opciones para cada una de las plataformas. Ahora vamos a ver un poco más de configuración sobre estas.

Este paso es muy sencillo. Lo hacemos como lo haríamos en cualquier otra aplicación que lleve código separado dependiente de la plataforma. Y la razón por la cual lo pongo aquí es por que dependiendo de esta tendremos que enviar determinados datos.

 

constructor(private platform: Platform) { 
   //hazlo tan complejo como necesites
   let devicePlatform = platform.is('android') ? 'android' : 'ios';
}

 

Aconsejo, siempre que sea posible, que se guarde la configuración la primera vez que se ejecute la aplicación. Así no tendremos que estar siempre ejecutando este código, solo lo necesario.

Ejemplo: Guardar los campos a enviar en caso de Android o iOS de las notificaciones y así rellenarnos con un for dentro de un servicio. ¿Lo entendéis? Ya haré un tuto sobre esto más adelante, no os preocupéis.

 

Acercamiento al envío de notificaciones push automáticas desde PHP

Para realizar un acercamiento, y tener algo funcional si queremos tirar por esta vertiente, os voy a enseñar el código PHP necesario para poder realizar una llamada al api de Firebase y enviar mensaje de manera automática.

Hablamos de mensajes de manera automática cuando, por ejemplo, te llega un notificación de WhatsApp por que otro usuario te ha enviado un mensaje.

<?php
$token = "DATABASE TOKEN OBJECT";
$not = "DATABASE OBJECT NOTIFICATION";
$data = null;
$headers = [
    'Authorization:key=Clave del servidor FCM',
    'Content-Type: application/json'
];
if($token->platform === 'ios') {
    $data = [
        'to' => $token->device_token,
        'notification' => [
            'body' 	=> $notification_request->message,
            'title'	=> $notification_request->title,
        ],
        "data" => [// aditional data for iOS
            "extra-key" => "extra-value,
        ],
        'notId' => $not->id,//unique id for each notification
    ];
} elseif ($token->platform === 'android') {
    $data = [
        'to' => $token->device_token,
        'data' => [
            'body' 	=> $notification_request->message,
            'title'	=> $notification_request->title,
        ]
    ];
}
$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, 'https://gcm-http.googleapis.com/gcm/send' );
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $data ) );
curl_setopt($ch, CURLOPT_FAILONERROR, TRUE);
$result = curl_exec($ch);
curl_close( $ch );

 

En principio, de alguna manera, tenemos que recuperar el token del usuario al que vamos a enviar la notificación y lo almacenaremos en $token->device_token;

Después, en el caso de iOS, necesitamos el id del objeto de notificación que lo enviamos desde nuestros dispositivos.

Y, para terminar, los datos que queremos enviar en conjunto con la notificación. Que de momento los vamos a almacenar en data.

Ahora vamos a configurar las cabeceras de la petición. Como puede ver en el código, en la cabecera autentificación tenemos que pasarle “key=<nuestro api key de firebase>”.

El Content-type (para quien no lo sepa, se trata del formato en el que vamos a enviar nuestros datos) lo tenemos que poner en application/json. Así le decimos a Firebase que el contenido que le enviamos está codificado en JSON.

Posteriormente evaluaremos si la plataforma desde la que lo enviamos en IOS o Android y rellenamos los datos de una manera o de otra.

Notificaciones push ionic y php

Y la parte final, el envío de la petición HTTP desde PHP a nuestro api de Firebase para que sea ella la que envíe el mensaje.

Simplemente hay que seguir esos pasos y listo, ya tenemos configurado el envío de notificaciones push automáticas. PIM PAM TRACKATRA, AHÍ ESTÁ, SOMOS LOS PUTOS AMOS ¿O NO?

Finalmente, fíjate en la clave to, es recomendable utilizarla cuando sólo enviamos a un sólo token, pero si necesitas enviar a múltiples tokens, entonces crea un array de tokens de Android y otro de iOS y cambia la clave to por registration_ids.

Buenos, compañero/a del metal, si has llegado hasta aquí es porque he realizado bien mi trabajo. De lo contrario abrías vomitado en el contenido y te hubieses ido de la web. Pero no ha sido así y te lo agradezco muchísimo.

Solo te pido una cosa a cambio. Pásate por este enlace. Se trata del círculo, una red de usuarios que estoy montando alrededor de esta disciplina. Me encantaría que pasases a formar parte de ella, te enviaré contenido imprescindible para programadores, ofertas, cursos y muchas cosas más que estoy preparando.

Un saludo y nos vemos en el próximo artículo.

Comparte esto en: