English한국어
English

Push Notification

Suggest Edits

iOS

Step 1. Setting up APNs credentials

APNs Credentials settings are identical to iOS native sttings. 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 to use push notification.

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

PushNotificationIOS.requestPermissions();

2. Register token

Acquire the device token. And notify the Channel Talk 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 Channel Talk 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 Channel Talk 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

To handle push notifications, Add the following guides to your iOS project.

The below guide below follows the 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 Channel Talk 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 respond appropriately to the Channel Talk remote push notification, even when the app is background or terminated.

Channel Talk recommends that you add 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 Talk 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 Talk 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.

  1. Go to Channel Settings > Security and Development > Mobile SDK Push > Android.

  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()
    }
  })
}

Updated 10 months ago

What’s Next

Push notification settings for iOS