Push Notification
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
- Configure Android project with Firebase setup guide.
- 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
- Go to Project Overview > Project Settings which can be found in the sidebar on the left.
- Navigate to the Cloud Messaging tab. Copy the Server key from the Cloud Messaging API (Legacy) section.
- Go to Channel Settings > Security and Development > Mobile SDK Push > Android.
- 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
Push notification settings for iOS