Push Notifications

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

• Offline messages. Send a chat message when a recipient is offline. In this case, a push notification will be sent automatically if the user is offline.
• Offline calls. Make a video/audio call with offline opponents. In this case, a push notification will be sent manually.
• Requests to contact list. Send requests to add a user to the contact list. In this case, a push notification will be sent manually).
• User tags. Send notifications to specific user groups defined by tags.

Learn more information from the Push Notifications section of our Key Concepts page.

Visit our Key Concepts page to get an overall understanding of the most important QuickBlox concepts.

Before you begin

1. Register a QuickBlox account. This is a matter of a few minutes and you will be able to use this account to build your apps.
2. Configure QuickBlox SDK for your app. Check out our Setup page for more details.
3. Create a user session to be able to use QuickBlox functionality. See our Authentication page to learn how to do it.

Configuration

To start working with push notifications, you need to install react-native-push-notification library. Follow the setup steps in the README file. After that, follow the platform-specific steps on this page.

📘

Use the 3.2.1 version of the react-native-push-notification library to be able to display push notifications.

iOS

Step1. Create APNS certificate and upload it to the Dashboard.

Each iOS application that uses Apple Push Notifications must have an APNS certificate. Upload the APNS certificate to QuickBlox Dashboard => Push Notifications => Settings => Apple Push Notification Service (APNS). To learn how to create APNS certificates and upload them to Dashboard, refer to our guide.

Step2. Open your project in Xcode and enable Push Notifications capabilities.

1. Open Xcode and choose your project file.
2. Choose the Signing & Capabilities tab.
3. Add a Push Notifications and Background Modes capabilities. To see these sections, you should be logged in to Xcode with your Apple ID that is enrolled in the Apple developer program.
4. Turn on a Push Notifications capability.
5. Turn on a Background modes capability. This section requires you to add specific app permissions.
6. Select a Remote notifications checkbox if you want to receive push notifications when the app goes to background mode.
7. Select a Voice over IP checkbox if you want your app to receive incoming Voice-over-IP (VoIP) push notifications and use them to display the system call interface to the user when the app is in the background mode.

Android

Step 1. Configure Firebase project and get API key and Sender ID.

First, you should create a Firebase account if you don't have it. Then you should configure your Firebase project. To learn how to configure a Firebase project and get API key and Sender ID, refer to our guide .

Step 2. Add Firebase to your project.

1. Prepare app dependencies. As part of enabling Firebase services in your Android application, you need to add the google-services plugin to your project android/build.gradle file.

dependencies {
  classpath 'com.google.gms:google-services:4.3.3'
  //...
}

Add Firebase dependency and include gms plugin in the bottom of your module android/app/build.gradle.

implementation "com.google.firebase:firebase-analytics:17.3.0"
//...
apply plugin: 'com.google.gms.google-services'

🚧

Make sure that apply plugin: 'com.google.gms.google-services' is at the end of the file to avoid compilation errors.

2. Put your google-services.json file for your package into android/app/ folder.

Initialize react-native-push-notification lib

Initialize the react-native-push-notification lib using the code snippet below.

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

// Must be outside of any component LifeCycle (such as `componentDidMount`).
PushNotification.configure({
  // (optional) Called when Token is generated (iOS and Android)
  onRegister: function (token) {
    console.log("TOKEN:", token);
  },

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

    // process the notification

    // (required) Called when a remote is received or opened, or local notification is opened
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },

  // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
  onAction: function (notification) {
    console.log("ACTION:", notification.action);
    console.log("NOTIFICATION:", notification);

    // process the action
  },

  // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
  onRegistrationError: function (err) {
    console.error(err.message, err);
  },

  // 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
   * - if you are not using remote notification or do not have Firebase installed, use this:
   *     requestPermissions: Platform.OS === 'ios'
   */
  requestPermissions: true,
});

Subscribe to push notifications

Subscribe to FCM or APNs service. Once the device is subscribed, the service delivers a notification to it.

For VoIP push notifications, specify push_channel: apns_voip channel.

import { Platform } from 'react-native'

//...
onRegister: function(token) {
  // token obtained from APNS or FCM
  const config = Platform.OS === 'ios' ? {
    deviceToken: token,
    // to receive incoming call notification on iOS device(s) APNS_VOIP should be used
    pushChannel: QB.subscriptions.PUSH_CHANNEL.APNS_VOIP
  } : {
    deviceToken: token.token
  }

  QB.subscriptions
    .create(config)
    .then((subscriptions) => { /* subscription(s) created successfully */ })
    .catch(e => { /* handle error */ })
}
//...

The create() method accepts one argument of the object type that has the following fields:

🚧

The deviceToken is a device registration token generated by the APNS or GCM/FCM. The token can be unregistered by the APNS or GCM/FCM anytime. In this case, the device should be registered again and obtain a new token. When a new token is obtained, a new subscription should be created.

Send push notifications

You can initiate sending a push notification to a user(s) on any event in your application. To do so, you need to set push notification parameters, push recipients, notification type, sender ID, and type of the notification event. For VoIP push notifications, you need to set the ios_voip: 1 parameter.

const event = {
  notificationType: QB.events.NOTIFICATION_TYPE.PUSH,
  payload: {
    ios_voip: 1, // to send VoIP push notification (https://docs.quickblox.com/reference/push-notifications#push-notification-formats)
    message: "Your push notification message",
    // key: value
  },
  recipientsIds: [51,46], // users' IDs to deliver notification
  senderId: 45, // ID of the user who created the event
  type: QB.events.NOTIFICATION_EVENT_TYPE.ONE_SHOT,
};

QB.events
  .create(event)
  .then(function (data) {
    /* notification event(s) created successfully */
  })
  .catch(function (e) {
    /* handle error */
  });

The create() method accepts one argument of the object type that has the following fields:

🚧

You can send only FCM data messages to the Android app. QuickBlox doesn't support FCM notification messages.

To process FCM data messages on your app when the app is in the background, you need to handle them. If not handled, they will not pop on the screen even if the app has received such push notification. See FCM documentation to learn more about data messages.

🚧

How to set up the FCM console and plug into QuickBlox dash board please see How to enable Cloud Messaging API (Legacy) or HTTP v1 API

📘

You can send APNS VoIP notifications to the iOS app. However, if the iOS app is not subscribed to APNS VoIP notifications or the APNS VoIP certificate has expired, the regular APNS will be delivered instead of APNS VoIP.

Receive push notifications

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

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

  // process the notification

  // (required) Called when a remote is received or opened, or local notification is opened
  notification.finish(PushNotificationIOS.FetchResult.NoData);
},

Let’s review the notification object below:

{
    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
}

Unsubscribe from push notifications

You can unsubscribe from receiving push notification by passing a subscription ID.

const subscriptionsRemoveParams = { id: "your subscription Id" };

QB.subscriptions
  .remove(subscriptionsRemoveParams)
  .then(() => {
    /* removed successfully */
  })
  .catch(function (e) {
    /* handle error */
  });

CallKit and VoIP push notifications

If you need to display a native calling interface for incoming and outgoing calls, you should use CallKit on iOS. It lets you integrate your calling services with other call-related apps on the system. Use Apple CallKit guide to learn how to integrate a CallKit functionality.

For iOS, together with the CallKit, you also need to integrate VoIP push notifications.

QuickBlox supports iOS VoIP push notifications via the same API described above:

1. For VoIP pushes, you need to generate a separated VoIP device token. See how to get it here.
2. When the token is retrieved, you need to subscribe to VoIP push notifications by passing a push_channel: apns_voip in the subscription request.
3. To send a VoIP push notification, use ios_voip: 1 parameter in a push payload of the create event request.

Troubleshooting

A subscription is removed after a push is sent and the push isn't delivered

Cause: a device registration token is invalid.

📘

The device registration token is represented as deviceToken within the system. See this section to learn how to subscribe a device to push notifications.

Tip: check if the device registration is correct. The device registration token can be invalid due to a number of reasons:

1. Some other data is set instead of a correct device registration token. For example, a Firebase project ID, Firebase user token, etc.
2. The client app unregistered itself from GCM/FCM. This can happen if the user uninstalls the application or, on iOS, if the APNs Feedback Service reported the APNs token as invalid.
3. The registration token expired. For example, Google might decide to refresh registration tokens or the APNs token may have expired for iOS devices.
4. The client app was updated, but the new version is not configured to receive messages.

For all these cases, remove the invalid device registration token and stop using it to send messages. Then, obtain a new token and make sure to create a new subscription with a valid token.