Enviar notificaciones push en Ionic con APNS y PHP
Enviar notificaciones push en Ionic con APNS y PHP


En este tutorial vamos a ver un tema muy interesante en el desarrollo de aplicaciones móviles, el uso de Notificaciones push con Ionic 3.

Si no conoces el significado de Notificaciones push es sencillo, es lo que hace whatsapp cada vez que recibes un mensaje de alguien, eso que aparece arriba es una notificación push.

En Ionic 3 tenemos varias formas de trabajar con este tipo de notificaciones, por lo menos para el envío de las notificaciones, no así para la recepción, aquí tenemos el popular plugin phonegap push.

La complejidad del trabajo con las notificaciones push se basa sobre todo en el número de plataformas a las que tenemos que dar soporte, si sólo debemos trabajar con Android es genial, aquí realmente no hay complejidad, pero si además de Android debemos añadir iOS las cosas se ponen feas.

Existen numerosas plataformas que nos permiten hacer el envío de notificaciones push desde nuestro servidor para que ellas notifiquen al dispositivo o dispositivos en cuestión, así es, podemos enviar una o muchas notificaciones de una vez.

En nuestro caso vamos a ver un ejemplo básico con FCM, que no es más que Firebase Cloud Messaging, la plataforma de google la cual podemos utilizar de una forma muy sencilla.

Desde FCM podemos conseguir de una forma muy rápida dos variables completamente necesarias para empezar a trabajar, el SERVER TOKEN y el SENDERID, el primero nos servirá para poder comunicarnos desde nuestro servidor con Firebase, mientras el segundo nos servirá para crear tokens válidos desde nuestra aplicación, en este caso con Ionic 3, aunque para nosotros eso será transparente ya que los tokens los crea el plugin phonegap push.

Obtener las claves de Firebase

Para obtener las claves de firebase simplemente dirígete aquí y sigue los pasos del siguiente vídeo.



Una vez tengamos las claves simplemente deberemos crear nuestra aplicación con Ionic 3 e instalar los siguientes plugins.

Curso de Ionic 3

Sin versiones obsoletas

En cursosdesarrolloweb.es tienes un curso completo para aprender a trabajar con Ionic 3 utilizando las últimas versiones con ejemplos fáciles y útiles.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.

Instalar dependencias de Ionic 3 y Phonegap Push

Ejecuta los siguientes comandos para instalar todo lo necesario para manejar notificaciones push con Ionic 3.

Donde SENDER_ID es el id del remitente que se ve en el vídeo anterior.

En este momento ya lo tenemos todo instalado, así que vamos a crear una página donde vamos a realizar una pequeña configuración para poder crear el token de registro necesario para diferenciar nuestro dispositivo del resto.

Lo primero que debemos hacer es configurar el objeto options para generar los tokens de forma correcta entre otras cosas.

También es importante asegurar que tenemos permisos para poder recibir notificaciones, y no menos importante son los eventos notification y registration, el primero será llamado cada vez que recibamos una notificación y el segundo será donde recibamos el token que nos servirá para comunicarnos con este dispositivo más adelante.

Múltiples plataformas

Si vas a trabajar con múltiples plataformas entonces te recomiendo y mucho utilizar el objeto Platform de Ionic para obtener la plataforma del dispositivo y guardarlo más adelante en base de datos, ¿por qué?, simple, cuando trates de enviar notificaciones push desde tu backend tendrás que enviar la información con un determinado formato para cada plataforma.

Enviando notificaciones desde el servidor con Php

Ahora que ya tenemos todo preparado con Ionic 3 vamos a crear un pequeño trozo con Php para poder enviar notificaciones a FCM.

Lo más importante del código anterior es entender que si trabajamos con Android debemos enviar los datos en la clave data, en cambio, si trabajamos con iOS debemos utilizar la clave notification.

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.

Los datos anteriores siempre serán válidos trabajando con FCM, si por ejemplo quieres trabajar con APNS (Apple Push Notifications Service) deberás realizar la configuración de otra forma, necesitarás un certificado .pem y es algo más complejo, pero no demasiado ;).

De esta forma tan sencilla tenemos implementado de forma completa el trabajo con Notificaciones Push con Ionic 3 y Phonegap Push, espero que te haya resultado útil y te haya gustado.