Push Notification

This document describes usages for push notification of Channel React Native SDK.

iOS

This section describes how to support push notification on iOS.

Step 1. Setting up APNs credentials

APNs Credentials settings are the same as iOS native settings. Set by referring to Set up APNs credential of iOS.

Step 2. Setting up React native

Make sure you have installed facebook’s PushNotificationiOS. If it is not installed, refer to the react-native-push-notification repository to install it and proceed with the following procedure.

1. Request permission

Requests permission for the using push notification.

import PushNotificationIOS from "@react-native-community/push-notification-ios";

PushNotificationIOS.requestPermissions();

2. Register token

Acquire the device token. And notify the Channel that the PushToken has changed.

import PushNotificationIOS from "@react-native-community/push-notification-ios";
import { ChannelIO } from 'react-native-channel-plugin';

PushNotificationIOS.addEventListener('register', (token) => {
  ChannelIO.initPushToken(token);
});

3. Handle push notification

Notifies to Channel that the user has received a push notification.

import PushNotificationIOS from "@react-native-community/push-notification-ios";
import { ChannelIO } from 'react-native-channel-plugin';

PushNotificationIOS.addEventListener('notification', (notification) => {
  ChannelIO.isChannelPushNotification(notification.getData()).then((result) => {
    if (result) {
      ChannelIO.receivePushNotification(notification.getData()).then((_) => {
        notification.finish(PushNotificationIOS.FetchResult.NoData);  
      })
    } else {
      //other push logics goes here
      notification.finish(PushNotificationIOS.FetchResult.NoData); 
    }
  })
});

4. Open ChannelIO chat

If you want to open the message when entering the app through push notification, add the example below to the componentDidMount() method of App.js.

import { ChannelIO } from 'react-native-channel-plugin';

componentDidMount() {
    ChannelIO.hasStoredPushNotification().then((result) => {
    if (result) {
      ChannelIO.openStoredPushNotification()
    }
  })
}

Step 3. Handle push notifications on iOS

In order to handle push notification, Add the following guides to your iOS project.

The below guide follows React-native-official-guide.

1. AppDelegate.h

Adopts UNUserNotificationCenter. For example:

#import <UserNotifications/UNUserNotificationCenter.h>

...
  
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>
  
...

2. AppDelegate.m

Modify the AppDelegate implementation by referring to the following.

#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
  [ChannelIO initialize:application]
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;
 
 ....
}

//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);
}

// Required to register for notifications
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
 [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
}
// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}

The example below handles ChannelIO push notifications when the app is in the background or terminated. Add it to AppDelegate.m.

- (void)userNotificationCenter:(UNUserNotificationCenter *)center 
  didReceiveNotificationResponse:(UNNotificationResponse *)response  
  withCompletionHandler:(void (^)(void))completionHandler {
  NSDictionary *userInfo = response.notification.request.content.userInfo;
    if ([ChannelIO isChannelPushNotification:userInfo]) {
        [ChannelIO receivePushNotification:userInfo completion: nil];
        [ChannelIO storePushNotification: userInfo];
    }
    completionHandler();
}

Step 4. Add Notification Extension

This Extension helps you appropriately respond to the Channel.io remote push notification, even when the app is background or terminated.

Channel.io recommends adding this Extension. If you do not add this, both follow-up texting and remote notification may arrive. Setting it up in your project through iOS Notification Extension document.

Android

This section describes how to support system push notification on Android.

📘

To use system push notification in Android API level 33(Tiramisu) or above, you need POST_NOTIFICATIONS permission.

Channel Android SDK does not request permission. Your application should request it manually. See Android official documentation regarding notification.

Step 1. Create a Firebase project

  1. Configure Android project with Firebase setup guide.
  2. Download the google-service.json file and place it in the root directory of the app scope module.

Step 2. Integrate Firebase with Channel Desk

  1. Go to Project Overview > Project Settings which can be found in the sidebar on the left.
  2. Navigate to the Cloud Messaging tab. Copy the Server key from the Cloud Messaging API (Legacy) section.
1033
  1. Go to Channel Settings > Security and Development > Mobile SDK Push > Android.
1253
  1. Paste the Server key copied in Step 2.

Step 3. Integrate Firebase with SDK

Follow one of the two sections based on whether your project has Firebase imported.

If your project was not using Firebase

If your project was not using Firebase, simply add dependency on plugin-android-fcm to your app-level build.gradle. The module will register Firebase Service automatically and process Firebase messages so that you have no more work to do.

dependencies {
    implementation 'io.channel:plugin-android-fcm:$[version]'
}

If your project was already using Firebase

You should forward some information to the SDK to process push notifications using ChannelIO.receivePushNotification().

import firebase from 'react-native-firebase';
import { ChannelIO } from 'react-native-channel-plugin';

componentDidMount() {
  this.onRefreshListener = firebase.messaging().onTokenRefresh(fcmToken => {
     ChannelIO.initPushToken(fcmToken);
  });
}

componentWillUnmount() {
  this.onRefreshListener();
}

Then let SDK know when a Firebase message arrives.

import type { RemoteMessage } from 'react-native-firebase';
import { ChannelIO } from 'react-native-channel-plugin';

componentDidMount() {
  this.mListener = firebase.messaging().onMessage((message: RemoteMessage) => {
    ChannelIO.isChannelPushNotification(message.data)).then((result) => {
      if (result) {
        ChannelIO.receivePushNotification(message.data).then((_) => { })
      } else {
        // TODO : Your FCM code
      }
    }
  });
}

componentWillUnmount() {
  this.mListener();
}

To navigate user to the chat when they clicked a push notification add the following lines to the last line of componentDidMount in App.js.

import { ChannelIO } from 'react-native-channel-plugin';

componentDidMount() {
    ChannelIO.hasStoredPushNotification().then((result) => {
    if (result) {
      ChannelIO.openStoredPushNotification()
    }
  })
}

What’s Next

Push notification settings for iOS