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. Navigate to Project Overview > Project settings.
  1. Navigate to Cloud Messaging tab and click Manage Service Accounts.
  1. Prior to creating a service account, create a role. Navigate to Roles.
  1. Click CREATE ROLE.
  1. Fill in details and click ADD PERMISSIONS.
  1. Create a role with cloudmessaging.messages.create permission. You can find it by keyword using filter. Make sure you are typing keywords to "Enter property name or value" field NOT "Filter permissions by role."
  1. Navigate back to service accounts page and click CREATE SERVICE ACCOUNT.
  1. Fill in details and click CREATE AND CONTINUE.
  1. Click Select a role.
  1. Select a role created at step 6.
  1. Navigate to Manage keys for the service account.
  1. Create a key by ADD KEY > Create new key with JSON format.
  1. Upload the key file to Channel Desk at Channel Settings > Security and Development > Mobile SDK Push > Android

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 8 days ago

What’s Next

Push notification settings for iOS