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

¿Buscando querer avisar a tus usaurios de una nueva noticia u oferta dentro de tu aplicación mediante Notificaciones Push? O, quizás ya saber sómo se hace esto, pero no tienes del todo claro cómo funciona alguna función, valga la redundancia, o campo de clase ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender, de una manera sencilla y práctica, a enviar notificaciones push a los clientes de tu aplicación.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

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í.

Y ahora si comenzamos. Let´s go!

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 Notificaciones Push en Ionic

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.

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.

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.

Algo más que quizás te interesa

Mejorar de manera periódica nuestro logo, a través de test a/b por ejemplo, es una estrategia que va a aumentar las descargas de tu app y los ingresos que esta genera para ti. Esto es así, no hay más detrás.

Bien, pues para poder hacer este trabajo más fácil y cómo, hemos hecho esta herramienta para ti, para que puedas evaluar, optimizar y mejorar los logos de tus aplicaciones y que puedas espiar los de la competencia. No te espoileo más, entra en el enlace.

Sin nada más que agregar, espero haberte ayudado y me despido ya. Nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!