Sigo trabajando con React Native desarrollando una aplicación de la que os espero hablar muy muy pronto pero mientras tanto hoy me gustaría hablaros de cómo he introducido las notificaciones push para la versión iOS. Espero que os sirva de ayuda ya que es una guía con los pasos que he seguido hasta tenerlas funcionando. ¡Comencemos!

Introducción

Lo primero de todo es entender los actores principales que intervienen en el proceso de lanzar una notificación push y que podéis ver en el siguiente esquema:

Como podéis ver aparecen 4 elementos:

• El proveedor de notificaciones, es decir, nuestro backend.
• El APN’s, es decir, Apple Plush Notification Services, es decir, el servicio del que provee Apple a los desarrolladores para enviar notificaciones a los dispositivos.
• El dispositivo iOS asociado
• Y nuestra flamante aplicación encargada de recibir las notificaciones.

Para que todo este “chiringuito” funcione son necesarios los siguientes pasos:

• La aplicación solicita permiso al usuario para enviarle notificaciones
• Si los obtiene, la aplicación queda suscrita a las notificaciones push enviadas desde los APN’s y recibe un unique device token de cara a que podamos identificar ese dispositivo en nuestro backend para enviarle notificaciones.

El proceso es algo similar a esto:

Paso 1. Aplicación móvil

Lo primero de todo será instalar la librería: React Native Push Notification :

Sí, también emplear el paquete PushNotificationIOS de React Native que ya viene listo para ser usado pero esta librería nos da la opción de mandar también notificaciones locales de forma bastante sencilla y es algo que en mi caso necesito.

Eso sí, es importante que si habéis creado vuestra aplicación con Expo la hayáis ejected para que todo funcione correctamente.

Volviendo a la librería, ésta es bastante sencilla de configurar para iOS, de hecho está basada en la de PushNotificationIOS , por lo que necesitaremos instalarla también:

1. Abriremos XCode y en la carpeta Libraries añadiremos la librería node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproject

2. Iremos a las Build Phases de nuestro target y en la sección Link Binary with libraries añadiremos la librería estática libRCTPushNotification

3. En nuestro archivo AppDelegate.m añadiremos al comienzo lo siguiente:

#import <React/RCTPushNotificationManager.h>

Y a continuación del método didFinishLaunchingWithOptions el siguiente código en ObjectiveC que nos permitirá recibir notificaciones push y responder a ellas:

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings {[RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];}// Required for the register event.- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {[RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];}// Required for the notification event. You must call the completion handler after handling the remote notification.- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfofetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {[RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];}// Required for the registrationError event.- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {[RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];}// Required for the localNotification event.- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {[RCTPushNotificationManager didReceiveLocalNotification:notification];}//Called when a notification is delivered to a foreground app.-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler {completionHandler(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge);}

4. Habilitaremos las notificaciones push y sus correspondientes entitlements en la sección Capabilities :

5. Y finalmente añadiremos (por fin) un poco de código a nuestra aplicación en React Native que nos permita manejar las notificaciones desde javascript.

import { PushNotificationIOS } from ‘react-native’;import PushNotification from ‘react-native-push-notification’;export default onRegister =>  PushNotification.configure({    onRegister: token => onRegister(token),    onNotification: notification => {      notification.finish(PushNotificationIOS.FetchResult.NoData);   },   permissions: {     alert: true,     badge: true,     sound: true   },   popInitialNotification: true,   requestPermissions: true});// in some place...initNotifications();

Esto lo que hace es crear una función que podemos importar donde queramos y, al ejecutarla, habilitará la parte javascript de gestión de notificaciones. Los métodos principales son:

• onRegister , que se invoca cuando el usuario acepta recibir notificaciones y nos devuelve el token del dispositivo para que lo pasemos al backend
• onNotification , que nos permite realizar las acciones que queramos al recibir una notificación.

El resto de opciones de configuración las podéis leer en la librería que os indicaba así como la posibilidad de comenzar a enviar notificaciones locales desde el momento en que ejecutéis initNotifications :

PushNotification.localNotificationSchedule({title: 'title',message: 'message',playSound: true,date: new Date(Date.now() + 5 * 1000)});

Con esto ya tendríamos configurada la parte de nuestra aplicación. Vamos ahora a por el servidor.

Paso 2. Servidor

Lo primero de todo será tener una cuenta de desarrollador activa en iTunes Connect (obvio…) y:

App Id en el portal de desarrolladores

El primer paso será asegurarnos de que tenemos un App ID configurado en y asociado al bundle de nuestra aplicación: https://developer.apple.com/account/ios/identifier/bundle/create

Importante. Aseguraos de poner correctamente el Bundle ID de vuestra aplicación para que luego no haya problemas. Es decir, tiene que coincidir el que pongáis en XCode en la sección Targets con el que rellenéis aquí.

Nota. Muy probablemente XCode ya lo haya creado por vosotros así que por si acaso mirad la lista de identificadores por si vuestro bundle ya aparece ahí.

Hecho, esto, accederemos al App Id de nuestra aplicación y pulsaremos en Edit para terminar de configurar notificaciones push .

A continuación descenderemos hasta la sección de notificaciones push y crearemos un certificado para desarrollo. Cuando pasemos la aplicación a producción realizaremos el mismo proceso pero obteniendo un Production SSL Certificate .

Esto nos pedirá crear un Certificate Signing Request para poder continuar:

Hecho esto, completaremos el siguiente paso y descargaremos el certiciado, el cual instalaremos en nuestro llavero.

Generación de las claves de autenticación en los APN’s

Con el fin de poder enviar notificaciones push por medio de los APN’s será necesario contar con una clave de autenticación que obtendremos también desde el portal de desarrollo de Apple: https://developer.apple.com/account/ios/authkey/

Para crear la clave pulsaremos el botón + e introduciremos el nombre de nuestra aplicación así como dejaremos marcada la opción: Apple Push Notifications Service. Esto generará un archivo .p8 contiendo la clave de autorización que descargaremos en la carpeta de nuestro proyecto.

Además, necesitaremos guardar la Key Id que necesitaremos para enviar las notificaciones push en el siguiente paso.

Finalmente, también es necesario el Team Id de vuestra cuenta.

Es decir, llegados a este punto dispondremos de:

• Un archivo p8 con el certificado para enviar notificaciones push a travésc de los APN’s
• Un Key Id asociado al certificado anterior
• Nuestro Team Id

Enviando notificaciones push

Ahora ya viene la parte interesante. Como backend para el proyecto estoy usando Symfony, por lo que os dejo el código que he empleado para enviar notificaciones por medio de un comando sencillo.

No obstante, si estáis usando node para vuestro proyecto podéis tirar de este repositorio:

https://github.com/ProductCrafters/react-native-ios-push-notifications-example

que contiene un archivo pushServer.js que al ejecutarlo de este modo:

node pushServer.js keyId teamId token appId message

enviará la notificación a vuestro dispositivo ( token se corresponde con el token obtenido en el método onRegister de la librería PushNotifications )

Ahora, si estáis como yo trabajando con Symfony os dejo el servicio:

Importante. Este servicio usa Curl con HTTP2 habilitado para enviar la petición (y así no tener que generar un archivo .pem a partir del archivo p8 . Si vuestro servidor no tiene esa versión de CURL con HTTP2 podéis instalarla siguiendo estos pasos:

sudo apt-get -y install build-essential nghttp2 libnghttp2-dev libssl-dev
wget https://curl.haxx.se/download/curl-7.63.0.tar.gz
tar xzf curl-7.63.0.tar.gz
cd curl-7.63.0
./configure --with-nghttp2 --prefix=/usr/local --with-ssl
make && sudo make install
sudo ldconfig

Y con eso ya podríamos enviar notificaciones a nuestros dispositivos llamando al servicio:

$sendIOSPushNotification(‘token’,‘título’,‘subtítulo’,‘mensaje’);

Espero que os haya servido y cualquier duda la podéis dejar en los comentarios!

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter: