Implementar notificaciones push en iOS con React Native

Integrar el servicio de notificaciones push de iOS en React Native

Image for post
Image for post

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:

Image for post
Image for post
Esquema notificaciones push en ios

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:

Image for post
Image for post
Desde: https://hackernoon.com/complete-guide-receive-push-notifications-in-react-native-ios-app-38b1ec5b1b15

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
Image for post
Image for post

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

Image for post
Image for post

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 :

Image for post
Image for post

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:

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

Image for post
Image for post
Image for post
Image for post

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 .

Image for post
Image for post

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 .

Image for post
Image for post

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

Image for post
Image for post

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

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/

Image for post
Image for post

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:

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store