Notificaciones Push en React Native

Para poder añadir a nuestra aplicación de react native las funciones de Notificaciones Push deberemos tener una cuenta de desarrollador de Apple con una licencia de 99 euros, no será suficiente con la versión gratuita que si bien nos permite probar nuestras aplicaciones en dispositivos físicos no nos ofrece determinadas funciones.

Este tutorial lo haré a partir de una instalación de una nueva aplicación de React Native

react-native init notificacionPush

Antes de empezar abriremos el archivo xcodeproj

notificacionPush/ios/pushNotifications.xcodeproj

Instalación de PushNotificationIOS

Escogemos nuestro usuario de desarrollador.

En la opción signing nos aparece un desplegable para seleccionar nuestro equipo

Vamos a la pestaña Capabilities y de la lista de todas las funciones que podemos añadir a nuestra aplicación escogemos la de Notificaciones Push.

Clicando en la pestaña off se activará las notificaciones push.

Una vez activadas las notificaciones en la aplicación crearemos los certificados desde el panel de desarrolladores de apple

https://developer.apple.com/account/ios/certificate

En certificados clica en All y en el icono + que hay en la parte superior derecha.

Nos preguntará que tipo de certificado necesitamos y escogeremos el de Apple Push Notification service SSL (Sandbox & Production)

En la siguiente página nos aparecerá un desplegable en el que deberemos escoger la aplicación que queremos usar con las Notificaciones Push.

Clicamos en continuar y nos aparecerán los pasos a seguir para crear el archivo CSR, para ello abriremos el Acceso de Llaveros en nuestro mac e iremos a Assistente de Certificados > Solicitar un certificado de una autoridad de certificación

Rellenamos el formulario que aparece a continuación dejando en blanco la Dirección de Correo de la CA y marcando la solicitud se guarda en el disco

Clicas en continuar y se creará el certificado, es importante guardarlo en un lugar seguro porque lo necesitaremos a continuación. Volviendo a la web de desarrolladores de apple nos aparece la opción de subir el archivo CSR que acabamos de generar, lo subimos y clicamos en Continuar y ya habremos terminado.

Para verificar que todo funciona correctamente clicaremos en App Ids de bajo de Identificadores y veremos que aparece la aplicación que hemos creado, clicamos en ella y se desplegará todas las funciones que tiene activadas y si todo ha ido correctamente Push Notifications estará activa.

En la aplicación de React Native que hemos creado previamente la volvemos a abrir en Xcode si la hemos cerrado y tendremos que añadir una serie de archivos.

Para empezar iremos a nuestro Proyecto de React Native y añadiremos a Xcode el archivo RCTPushNotification.xcodeproj.

node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj

En Link Binary With Libraries añadiremos el archivo libRCTPushNotification.a, que se encuentra dentro de RTCPushNotification.xcodeproj en Xcode.

Ahora deberemos añadir la ruta de PushNotificationIOS a Header Search Paths y marcarlo como recursivo

$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS

Y ya para terminar iremos al archivo AppDelegate.m y arriba del todo añadiremos el siguiente import:

#import “RCTPushNotificationManager.h”

Y dentro AppDelegate.m pega el codigo del gist que hay a continuación justo antes de @end del final.

https://gist.github.com/mariodev12/bb0cb8f911531d437fd87bc038ffc94a

Notificaciones Push desde un servidor

Para poder enviar las notificaciones push desde un servidor será necesario seguir la primera parte del tutorial y una vez tengamos el archivo .cer instalado en nuestro mac deberemos conseguir otro archivo, el .p12.

Abrimos el Acceso a llaveros y nos vamos a la categoría Certificados.

Veremos los certificados de nuestra aplicación que hemos creado anteriormente, haremos botón derecho encima del certificado que pone Apple Development IOS Push Services y haremos click en Exportar. Antes de guardar hay que tener en cuenta que se ha de exportar a .p12 y le pondremos el nombre de Key.

Metermos el archivo .cer y .p12 en una misma carpeta renombrando el .cer a cert.cer.

Una vez tenemos los dos juntos, iremos al terminal y en la carpeta donde se encuentran esos dos archivos ejecutaremos 2 comandos.

openssl pkcs12 -in key.p12 -out cert.pem -nodes -clcerts

Este creará un archivo cert.pem en la misma carpeta donde nos encontramos.

openssl pkcs12 -in key.p12 -out key.pem -nodes

Y este creará un archivo key.pem

Y a partir de aquí crearemos un servidor con NodeJS que recibirá estos archivos y el identificador de nuestro dispositivo y enviará notificaciones.

Github link próximamente

Utilización de PushNotificationIOS

Para usar las notificaciones en nuestra aplicación instalaremos el componente react-native-push-notification

https://github.com/zo0r/react-native-push-notification

Una vez instalado nos permitirá crear todo tipo de funciones.

  1. Notificaciones programadas
  2. Notificaciones locales
  3. Cancelar notificaciones
  4. Cancelar todas las notificaciones

En el doc del componente hay ejemplos para ponerlo en practica en nuestras aplicaciones.

Ejemplo de Notificaciones Push