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

Introducción

Image for post
Image for post
Esquema notificaciones push en ios
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

Image for post
Image for post
Image for post
Image for post
#import <React/RCTPushNotificationManager.h>
- (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);}
Image for post
Image for post
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();
PushNotification.localNotificationSchedule({title: 'title',message: 'message',playSound: true,date: new Date(Date.now() + 5 * 1000)});

Paso 2. Servidor

App Id en el portal de desarrolladores

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

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

Image for post
Image for post

Enviando notificaciones push

node pushServer.js keyId teamId token appId message
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
$sendIOSPushNotification(‘token’,‘título’,‘subtítulo’,‘mensaje’);

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

Entre paseo y paseo con Simba desarrollo en Symfony y React

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