undefined

Push Notifications

Push Notifications provide a way to deliver some information to users while they are not using your app actively. The following use cases can be covered additionally with push notifications:

  • send a chat message when a recipient is offline (a push notification will be initiated automatically in this case)
  • make a video call with offline opponents (need to send a push notification manually)

Configuration

In order to start work with push notifications you need to configure it.

First of all we need to install react-native-push-notification lib. Just follow the 'Installation' guide in the lib's README and then do the rest manual setup steps.

Then follow the platform specific steps.

iOS

  • First of all you need to generate Apple push certificate (p12 file) and upload it to ConnectyCube dashboard. Here is a guide on how to do it https://developers.connectycube.com/ios/how-to-create-apns-certificate

  • Then you need to open Xcode project of your React Native app and enable Push Notifications capabilities. Open Xcode, choose your project file, Signing & Capabilities tab and then add a Push Notifications capability. Also - tick a 'Remote notifications' checkbox in Background Modes section.

    Setup Xcode capabilities

Android

In order to start working with push notifications functionality you need to configure it.

  1. Create and configure your Firebase project and obtain the Server key. If you have any difficulties with Firebase project registration, follow our guide.

    To find your FCM server key go to your Firebase console >> Cloud Messaging section: Find your FCM server key

  2. Copy your FCM server key to your Dashboard >> Your App >> Push Notifications >> Certificates & API keys, select the environment for which you are adding the key and hit Save key. Use the same key for development and production zones. Add your FCM server key to your Dashboard

  3. Copy Sender ID value from your Firebase console. It will be required on a following step, when init 'react-native-push-notification' lib:

    Find your Sender ID

  4. If you have not added Firebase to your project previously, follow this guide to Connect Firebase SDK.

Init react-native-push-notification lib

Next step is to initialize the react-native-push-notification lib. The following code does the initialization. Do not forget to provide your senderID here from the above step:

const PushNotification = require("react-native-push-notification");

...

init() {
  PushNotification.configure({
    // (optional) Called when Token is generated (iOS and Android)
    onRegister: function(token) {
      console.log("TOKEN:", token);

      const deviceToken = token.token;
    },

    // (required) Called when a remote or local notification is opened or received
    onNotification: function(notification) {
      console.log("NOTIFICATION:", notification);

      // process the notification

      // required on iOS only (see fetchCompletionHandler docs: https://github.com/react-native-community/react-native-push-notification-ios)
      notification.finish(PushNotificationIOS.FetchResult.NoData);
    },

    // ANDROID ONLY: GCM or FCM Sender ID (product_number) (optional - not required for local notifications, but is need to receive remote push notifications)
    senderID: "YOUR GCM (OR FCM) SENDER ID",

    // IOS ONLY (optional): default: all - Permissions to register.
    permissions: {
      alert: true,
      badge: true,
      sound: true
    },

    // Should the initial notification be popped automatically
    // default: true
    popInitialNotification: true,

    /**
     * (optional) default: true
     * - Specified if permissions (ios) and token (android and ios) will requested or not,
     * - if not, you must call PushNotificationsHandler.requestPermissions() later
     */
    requestPermissions: true
  });
}

Subscribe to push notifications

In order to start receiving push notifications you need to subscribe your current device as follows:

import ConnectyCube from "react-native-connectycube";

...

onRegister: function(token) {
  console.log("TOKEN:", token);

  const deviceToken = register.token;

  this.subcribeToPushNotification(deviceToken);
}

...    

subcribeToPushNotification(deviceToken) {
  const DeviceInfo = require('react-native-device-info').default

  const params = {
    // for iOS VoIP it should be 'apns_voip'
    notification_channel: Platform.OS === 'ios' ? 'apns' : 'gcm',
    device: {
      platform: Platform.OS,
      udid: DeviceInfo.getUniqueID()
    },
    push_token: {
      environment: __DEV__ ? 'development' : 'production',
      client_identification_sequence: deviceToken,
      bundle_identifier: "com.your.app.package.id"
    }
  }

  // JS SDK v2
  ConnectyCube.pushnotifications.subscriptions.create(params)
    .then(result => {})
    .catch(error => {});

  // JS SDK v1
  /*
  ConnectyCube.pushnotifications.subscriptions.create(
    params,
    (error, result) => {}
  );
  */
}

Send push notifications

You can manually initiate a push notification to user/users on any event in your application. To do so you need to form a push notification parameters (payload) and set the push recipients:

const payload = JSON.stringify({
  message: "Alice is calling you",
  ios_badge: 1,
  // ios_voip: 1
});

const pushParameters = {
  notification_type: "push",
  user: { ids: [21, 12] }, // recipients.
  environment:  __DEV__ ? 'development' : 'production',
  message: ConnectyCube.pushnotifications.base64Encode(payload)
};

// JS SDK v2
ConnectyCube.pushnotifications.events.create(pushParameters)
  .then(result => {})
  .catch(error => {});

// JS SDK v1
/*
ConnectyCube.pushnotifications.events.create(
  pushParameters,
  (error, result) => {}
);
*/

Please refer Universal Push Notifications standard parameters section on how to form the payload.

Receive push notifications

When any notification is opened or received the callback onNotification is called passing an object with the notification data:

// (required) Called when a remote or local notification is opened or received
onNotification: function(notification) {
  console.log("NOTIFICATION:", notification);

  // process the notification

  // required on iOS only (see fetchCompletionHandler docs: https://github.com/react-native-community/react-native-push-notification-ios)
  notification.finish(PushNotificationIOS.FetchResult.NoData);
},

Notification object example:

{
    foreground: false, // BOOLEAN: If the notification was received in foreground or not
    userInteraction: false, // BOOLEAN: If the notification was opened by the user from the notification area or not
    message: 'My Notification Message', // STRING: The notification message
    data: {}, // OBJECT: The push data
}

Here you can add an appropriate logic in your app. The things can be one of the following:

Unsubscribe from push notifications

In order to unsubscribe and stop receiving push notifications you need to list your current subscriptions and then choose those to be deleted:

const deleteSubscription = subscriptions => {
  let subscriptionIdToDelete;

  subscriptions.forEach(sbs => {
    if (sbs.subscription.device.platform === Platform.OS
      && sbs.subscription.device.udid === DeviceInfo.getUniqueID()) {
        subscriptionIdToDelete = sbs.subscription.id;
      }
  });

  // JS SDK v2
  if (subscriptionIdToDelete) {
    ConnectyCube.pushnotifications.subscriptions.delete(subscriptionIdToDelete);
  }

  // JS SDK v1
  /*
  if (subscriptionIdToDelete) {
    ConnectyCube.pushnotifications.subscriptions.delete(
      subscriptionId,
      error => {}
    );
  }
  */
};

// JS SDK v2
ConnectyCube.pushnotifications.subscriptions.list()
  .then(deleteSubscription)
  .catch(error => {});

// JS SDK v1
/*
ConnectyCube.pushnotifications.subscriptions.list((error, subscriptions) => {
  if (!error) {
    deleteSubscription();
  }
});
*/

CallKit and VoIP push notifications

In a case you need to show a native calling interface - you need to integrate a CallKit functionality via CallKeep lib.

For iOS, this will also require to integrate VoIP push notifications along with CallKeep.

ConnectyCube supports iOS VoIP push notifications via same API described above:

  • for VoIP pushes it requires to generate a separated VoIP device token. Please see how to get it https://github.com/react-native-webrtc/react-native-voip-push-notification#usage
  • then when token is retrieved, you need to subscribe to voip pushes by passing a notification_channel: apns_voip channel in a subscription request
  • then when you want to send a voip push notification, use ios_voip: 1 parameter in a push payload in a create event request.

react-native-firebase lib

In a case you use a react-native-firebase lib for push notifications integration - please refer a GitHub issue for any potential drawnbacks https://github.com/ConnectyCube/connectycube-reactnative-samples/issues/31