Configuring push notifications (React Native)

Configuring Firebase

Google Firebase Cloud Messaging is necessary to handle push notifications sent from Synerise.

1. Follow the instructions in this article.
2. Integrate the Firebase project with Synerise. See this article.

Setting up - iOS

Requirements

Configure handling Push Notifications in your application. See Apple Notifications.

Firebase Cloud Messaging

1. Import RNNotifications.h

   SwiftObjective-C

      import react-native-synerise-sdk
      

      #import <react-native-synerise-sdk/RNNotifications.h>
      

2. Extend the Firebase Messaging Delegate so our SDK can receive the Firebase token that is required to deliver push notifications from Synerise.

   SwiftObjective-C

      func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
      	FirebaseApp.configure()
      	Messaging.messaging().delegate = self
   
      	if #available(iOS 10, *) {
      		UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound]) { (granted, error) in
   
      		}
      	} else {
      		let settings = UIUserNotificationSettings(types: [.alert, .badge, .sound], categories: nil)
      		application.registerUserNotificationSettings(settings)
      	}
   
      	application.registerForRemoteNotifications()
      }
   
      // MARK: - MessagingDelegate
   
      func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String) {
      	RNNotifications.didChangeRegistrationToken(fcmToken)
      }
      

      - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
      	[FIRApp configure];
      	[FIRMessaging messaging].delegate = self;
   
      	if (@available(iOS 10, *)) {
      		[UNUserNotificationCenter currentNotificationCenter].delegate = self;
      		UNAuthorizationOptions authOptions = (UNAuthorizationOptionAlert | UNAuthorizationOptionSound | UNAuthorizationOptionBadge);
      		[[UNUserNotificationCenter currentNotificationCenter] requestAuthorizationWithOptions:authOptions completionHandler:^(BOOL granted, NSError *error) {
   
      		}];
      	} else {
      		UIUserNotificationType allNotificationTypes = (UIUserNotificationTypeSound | UIUserNotificationTypeAlert | UIUserNotificationTypeBadge);
      		UIUserNotificationSettings *settings = [UIUserNotificationSettings settingsForTypes:allNotificationTypes categories:nil];
   
      		[[UIApplication sharedApplication] registerUserNotificationSettings:settings];
      	}
   
      	[[UIApplication sharedApplication] registerForRemoteNotifications];
      }
   
      #pragma mark - FIRMessagingDelegate
   
      - (void)messaging:(FIRMessaging *)messaging didReceiveRegistrationToken:(NSString *)fcmToken {
         [RNNotifications didChangeRegistrationToken:fcmToken];
      }
      

   Important: Make sure that the Firebase token is always up-to-date. When it changes, use RNNotifications.didChangeRegistrationToken(registrationToken:) again.

Receiving push notifications

The following code shows how to receive push notifications in the AppDelegate.h and pass these to the React Native part of the application:

// iOS 9
// Push Notifications
// Silent Push Notifications

func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
  RNNotifications.didReceiveNotification(userInfo)
  completionHandler(.noData)
}

func application(_ application: UIApplication, handleActionWithIdentifier identifier: String?, forRemoteNotification userInfo: [AnyHashable : Any], completionHandler: @escaping () -> Void) {
  RNNotifications.didReceiveNotification(userInfo, actionIdentifier:identifier)
  completionHandler()
}

// iOS 10 and above
// Push Notifications

// MARK: - UNUserNotificationCenterDelegate

@available(iOS 10.0, *)
func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
  RNNotifications.didReceiveNotification(response.notification.request.content.userInfo, actionIdentifier:response.actionIdentifier)
  completionHandler()
}

@available(iOS 10.0, *)
func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
  RNNotifications.didReceiveNotification(notification.request.content.userInfo)
  completionHandler(UNNotificationPresentationOptions.init(rawValue: 0))
}

// iOS 9
// Push Notifications
// Silent Push Notifications

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
  [RNNotifications didReceiveNotification:userInfo];
  completionHandler(UIBackgroundFetchResultNoData);
}

- (void)application:(UIApplication *)application handleActionWithIdentifier:(nullable NSString *)identifier forRemoteNotification:(NSDictionary *)userInfo completionHandler:(void(^)())completionHandler {
  [RNNotifications didReceiveNotification:userInfo actionIdentifier:identifier];
  completionHandler();
}

// iOS 10 and above
// Push Notifications

#pragma mark - UNUserNotificationCenterDelegate

- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler NS_AVAILABLE_IOS(10) {
  [RNotifications didReceiveNotification:response.notification.request.content.userInfo actionIdentifier:response.actionIdentifier];
  completionHandler();
}

- (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler NS_AVAILABLE_IOS(10) {
  [RNNotifications didReceiveNotification:notification.request.content.userInfo];
  completionHandler(UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionBadge | UNNotificationPresentationOptionSound);
}

Setting up - Android

Requirements

After configuring Firebase, add the google-services.json file to your project/android/app catalog.

Firebase Cloud Messaging

1. Add the google-services dependency to your project’s build.gradle file.

     dependencies {
             ...
             classpath 'com.google.gms:google-services:4.3.3'
             ...
         }
     

2. Configure the application’s build.gradle as follows:

     dependencies {
         implementation fileTree(dir: "libs", include: ["*.jar"])
         implementation "com.facebook.react:react-native:+"  // From node_modules
   
         // FCM
         implementation 'com.google.firebase:firebase-messaging:20.0.1'
         implementation "com.google.android.gms:play-services-base:17.1.0"
         implementation "com.google.firebase:firebase-core:17.2.1"
         implementation 'com.google.firebase:firebase-analytics:17.2.1'
             ...
         }
     

3. Make sure that at the end of the application gradle file, you add plugin: ‘com.google.gms.google-services’

4. In your MainApplication class, include setPushListener to listen for the changes of the Firebase token.

   JavaKotlin

   @Override
     public void onCreate() {
       super.onCreate();
       SoLoader.init(this, /* native exopackage */ false);
       getReactNativeHost().getReactInstanceManager().createReactContextInBackground();
   
       RNNotifications.setPushListener(new OnRegisterPushListener() {
   
         @Override
         public void onRegisterPushRequired() {
           FirebaseInstanceId.getInstance().getInstanceId().addOnSuccessListener(instanceIdResult -> {
             String refreshedToken = instanceIdResult.getToken();
             Log.d(TAG, "Refreshed token: " + refreshedToken);
   
             RNNotifications.setRegistrationToken(refreshedToken);
           });
         }
       });
     }
   

      fun onCreate() {
         super.onCreate()
         SoLoader.init(this, /* native exopackage */ false)
         getReactNativeHost().getReactInstanceManager().createReactContextInBackground()
         RNNotifications.setPushListener(object:OnRegisterPushListener() {
            fun onRegisterPushRequired() {
               FirebaseInstanceId.getInstance().getInstanceId().addOnSuccessListener({ instanceIdResult->
                  val refreshedToken = instanceIdResult.getToken()
                  Log.d(TAG, "Refreshed token: " + refreshedToken)
                  RNNotifications.setRegistrationToken(refreshedToken)
          })
       }
     })
   }
   

Receiving push notifications

In order to handle Synerise push notifications, you must pass the incoming push payload to the Synerise SDK.

1. Create a class extending FirebaseMessagingService:
   JavaKotlin

   public class MyFirebaseMessagingService extends FirebaseMessagingService {
   
       private static final String TAG = MyFirebaseMessagingService.class.getSimpleName();
   
       @Override
       public void onMessageReceived(@NonNull RemoteMessage remoteMessage) {
           super.onMessageReceived(remoteMessage);
           Map<String, String> data = remoteMessage.getData();
           RNNotifications.onNotificationReceive(data);
       }
   
       @Override
       public void onNewToken(String refreshedToken) {
           super.onNewToken(refreshedToken);
   
           Log.d(TAG, "Refreshed token: " + refreshedToken);
   
           if (refreshedToken != null) {
               RNNotifications.setRegistrationToken(refreshedToken);
           }
       }
   }
     

     class MyFirebaseMessagingService:FirebaseMessagingService() {
   
     fun onMessageReceived(@NonNull remoteMessage:RemoteMessage) {
       super.onMessageReceived(remoteMessage)
       val data = remoteMessage.getData()
       RNNotifications.onNotificationReceive(data)
     }
   
     fun onNewToken(refreshedToken:String) {
       super.onNewToken(refreshedToken)
       Log.d(TAG, "Refreshed token: " + refreshedToken)
       if (refreshedToken != null)
       {
         RNNotifications.setRegistrationToken(refreshedToken)
       }
     }
   }
     

2. To enable banners, handle the intent when the app starts. You can do it in your MainActivity by calling RNNotifications.onNotificationReceive in your onCreate and onNewIntent.
   JavaKotlin

   @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           RNNotifications.onNotificationReceive(getIntent().getExtras());
       }
   
       @Override
       public void onNewIntent(Intent intent) {
           super.onNewIntent(intent);
           RNNotifications.onNotificationReceive(intent.getExtras());
       }
     

   protected fun onCreate(savedInstanceState:Bundle) {
     super.onCreate(savedInstanceState)
     RNNotifications.onNotificationReceive(getIntent().getExtras())
   }
   fun onNewIntent(intent:Intent) {
     super.onNewIntent(intent)
     RNNotifications.onNotificationReceive(intent.getExtras())
   }
     

Handling Synerise push notifications

The following code shows how to handle push notifications in the React Native part of the application:

Synerise.Notifications.setListener({
  onRegistrationToken: function(token) {
    Synerise.Notifications.registerForNotifications(token, true, function() {
      console.log("Synerise Push Registration is succeed");
    }, function(error) {
      console.log(error.message);
    });
  },
  onRegistrationRequired: function() {
    let registrationToken = getLastPushRegistrationToken();

    Synerise.Notifications.registerForNotifications(registrationToken, true, function() {
      console.log("Synerise Push Registration is succeed");
    }, function(error) {
      console.log(error.message);
    });
  },
  onNotification: function(payload, actionIdentifier) {
    if (Synerise.Notifications.isSyneriseNotification(payload)) {
      Synerise.Notifications.handleNotification(payload, actionIdentifier);
    }
  },
});

Configuring notification encryption

To enable encrypted push notifications, you must change the configuration of your workspace. See Google Firebase.
In the mobile application, you must set encryption to true in the notifications settings.

Synerise.Initializer()
  .withClientApiKey('XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX')
  .withBaseUrl(null)
  .withDebugModeEnabled(true)
  .withCrashHandlingEnabled(true)
  .withSettings({
    notifications: {
      enabled: true,
      encryption: true,
    },
    sdk: {
      minTokenRefreshInterval: 5000,
      enabled: true,
    },
    injector: {
      automatic: true,
    },
  })
  .init()

The SDK performs the decryption as a part of the Synerise.Notifications.handleNotification method.

If you use only the Synerise issuer in push notifications, no more actions are required.

If you need a custom integration of encrypted push notifications, implement the following solution:

Synerise.onReady(function() {
  Synerise.Notifications.setListener({
    onRegistrationToken: function(token) {
      Synerise.Notifications.registerForNotifications(
        token,
        true,
        function() {
          console.log('success')
        },
        function(error) {
          console.log(error.message)
        }
      )
    },
    onNotification: function(payload, actionIdentifier) {
      let isNotificationEncrypted = Synerise.Notifications.isNotificationEncrypted(payload)
      var normalizedPayload
      if (isNotificationEncrypted) {
        normalizedPayload = Synerise.Notifications.decryptNotification(payload)
      } else {
        normalizedPayload = payload
      }
      Synerise.Notifications.handleNotification(normalizedPayload, actionIdentifier)
    },
  })
})