/ SDKs / JavaScript
SDKs
Chat SDKs JavaScript v4
Chat SDKs JavaScript
Chat SDKs
JavaScript
Version 4

Set up push notifications

Copy link

To notify users of events that take place on a client app, you should first set up notifications. The following steps in this page are written on the assumption that you have already registered the certificates and credentials of FCM and APNs to the Sendbird server via your dashboard or through Platform API requests.

Note: Push notifications are only available in group channels.


Step 1: Install libraries and configure FCM and APNs

Copy link

The @react-native-firebase/app library is an easy-to-use FCM library for simple integration. You can configure FCM for your React Native project by following the instructions in the Notifications page from the React Native Firebase documentation.

$ npm install @react-native-firebase/app @react-native-firebase/messaging

Note: Because the Google Cloud Messaging (GCM) server and client APIs are deprecated and removed as of April 11, 2019, we recommend that you use FCM and develop push notifications with the @react-native-firebase/app library for your project.

To receive push notifications on iOS devices, you can integrate APNs by installing the @react-native-community/push-notification-ios library. For more details, see the Install section of the library's documentation.

$ npm install @react-native-community/push-notification-ios

Step 2: Register tokens for FCM and APNs to the Sendbird server

Copy link

Note: A user can have up to 20 FCM registration tokens and 20 APNs device tokens each. The oldest token will be deleted before a new token is added for a user who already has 20 registration or device tokens. Only the 20 newest tokens will be maintained for users who already have more than 20 of each token type.

The FCM server requires an FCM registration token and an APNs device token for client app instances when targeting a particular device to send a push notification. The Chat SDK provides an interface to register and unregister two types of tokens to the Sendbird server. The tokens are used to communicate with the FCM server. The following is an example of the registration in our React Native sample.

JavaScriptTypeScript
import messaging from '@react-native-firebase/messaging';

if (Platform.OS === 'ios') {
    const token = await messaging().getAPNSToken();
    await sb.registerAPNSPushTokenForCurrentUser(token);
} else {
    const token = await messaging().getToken();
    await sb.registerFCMPushTokenForCurrentUser(token);
}

Step 3: Receive notification messages

Copy link

Once the token is registered, Android client apps receive notification messages via FCM, and iOS client apps via APNs.

While APNs requires no further configuration in receiving these messages, FCM requires the client app instance to receive and handle FCM notification messages. Instructions on the Receiving Messages section show you how to receive FCM messages based on the state (foreground, background, or quit) of the client app.

The sample code below shows how to receive and handle FCM messages while the client app is in the background or quit state and display them using local notifications.

Note: For Android 8.0 (API level 26) and higher, all notifications must be assigned to a notification channel, so you should provide a Notification instance with the required data such as the ID of a notification channel.

JavaScriptTypeScript
import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidImportance } from '@notifee/react-native';

messaging().setBackgroundMessageHandler(async (message) => {
    const isSendbirdNotification = Boolean(message.data.sendbird);
    if(!isSendbirdNotification) return;

    const text = message.data.message;
    const payload = JSON.parse(message.data.sendbird);

    // The following is required for compatibility with Android 8.0 (API level 26)
    // and higher. Refer to Notifee's reference page for more information.
    const channelId = await notifee.createChannel({
        id: 'NOTIFICATION_CHANNEL_ID',
        name: 'NOTIFICATION_CHANNEL_NAME',
        importance: AndroidImportance.HIGH
    });

    await notifee.displayNotification({
        id: message.messageId,
        title: 'New message has arrived!',
        subtitle: `Number of unread messages: ${payload.unread_message_count}`,
        body: payload.message,
        data: payload,
        android: {
            channelId,
            smallIcon: NOTIFICATION_ICON_RESOURCE_ID,
            importance: AndroidImportance.HIGH,
        },
        ios: {
            foregroundPresentationOptions: {
                alert: true,
                badge: true,
                sound: true,
            },
        },
    });
})

The sample code below shows how to handle local notifications in Android and iOS. Refer to the event sections of the Notifee and push-notification-ios libraries to learn more.

JavaScriptTypeScript
import Notifee, { EventType } from '@notifee/react-native';
import PushNotificationIOS from '@react-native-community/push-notification-ios';

// Handle data from '@react-native-community/push-notification-ios'.
const onNotificationIOS = (notification) => {
    const data = notification?.getData();
    if (data && data.userInteraction === 1 && Boolean(data.sendbird)) {
        // Navigate to channel.
        // const channelUrl = data.sendbird.channel.channel_url;
    }
}

// Handle data from '@notifee/react-native'.
const onNotificationAndroid = async (event) => {
    if(event.type === EventType.PRESS && Boolean(event.detail.notification?.data?.sendbird)) {
        // Navigate to channel.
        // const channelUrl = event.detail.notification.data.sendbird.channel.channel_url;
    }
}

const App = () => {
    useEffect(() => {
        PushNotificationIOS.getInitialNotification().then(onNotificationIOS);
        PushNotificationIOS.addEventListener('localNotification', onNotificationIOS);
    const unsubscribe = Notifee.onForegroundEvent(onNotificationAndroid);
        return () => {
            PushNotificationIOS.removeEventListener('localNotification');
            unsubscribe();
        }
    },[])

    // ...

}

Notifee.onBackgroundEvent(onNotificationAndroid)

The data object above, which is parsed from an FCM data message, contains a set of key-value items shown in the below JSON format. The data object has a full set of information about the push notification. For example, the value of the message key means a received text message. As for the channel_unread_count, the attribute can be added into or removed from the payload in Settings > Application > Push notifications on Sendbird Dashboard.

{
    "category": "messaging:offline_notification",
    "type": string,                         // Message type: MESG, FILE, or ADMM.
    "message": string,                          // User input message.
    "custom_type": string,                  // Custom message type.
    "message_id": long,                      // Message ID.
    "created_at": long,                      // The time that the message was created in a 13-digit, Unix milliseconds format.
    "app_id": string,                            // Application's unique ID.
    "unread_message_count": int,        // Total number of new messages unread by the user.
    "channel": {
        "channel_url": string,          // Group channel URL.
    "name": string,                      // Group channel name.
    "custom_type": string,           // Custom Group channel type.
    "channel_unread_count": int // Total number of unread new messages from the specific channel.
    },
    "channel_type": string,             // The value of channel_type is set by the system. The messaging indicates a distinct group channel while 'group_messaging' indicates a private group channel and chat indicates all other cases.
    "sender": {
        "id": string,                            // Sender's unique ID.
    "name": string,                      // Sender's nickname.
    "profile_url": string,           // Sender's profile image URL.
    "require_auth_for_profile_image": false,
    "metadata": {}
    },
    "recipient": {
        "id": string,                            // Recipient's unique ID.
    "name": string                          // Recipient's nickname.
    },
    "files": [],                            // An array of data regarding the file message, such as filename.
    "translations": {},                      // The items of locale:translation.
    "push_title": string,           // Title of a notification message that can be customized in the Sendbird Dashboard with or without variables.
    "push_sound": string,           // The location of a sound file for notifications.
    "audience_type": string,                // The type of audiences for notifications.
    "mentioned_users": {
        "user_id": string,              // The ID of a mentioned user.
    "nickname": string,         // The nickname of a mentioned user.
    "profile_url": string,      // Mentioned user's profile image URL.
    "require_auth_for_profile_image": false
    },
}