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 flutter_apns lib from pub.dev repository. Just follow the 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

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

Init firebase_messaging plugin

Next step is to initialize the firebase_messaging plugin.

Add dependency

Add this to your package's pubspec.yaml file:

dependencies:
    ...
    firebase_core: ^0.5.1
    firebase_messaging: ^8.0.0-dev.5
    ...

Install it

You can install packages from the command line:

flutter pub get

Add classpath for goggle services plugin

Add classpath to your build.gradle file by path android/build.gradle

buildscript {
    ...
    }

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

Apply Google Services plugin

Add at bottom of android/app/build.gradle next line:

apply plugin: 'com.google.gms.google-services'

Add required files from Firebase development console

  • add google-services.json to Android project;
  • add GoogleService-Info.plist to iOS project;

Add imports

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

Init and configure plugin in your app

...

void init() {
    Firebase.initializeApp();
    FirebaseMessaging firebaseMessaging = FirebaseMessaging.instance;

    // request permissions for showing notification in iOS
    firebaseMessaging.requestPermission(alert: true, badge: true, sound: true);

    // add listener for foreground push notifications
    FirebaseMessaging.onMessage.listen((remoteMessage) {
        log('[onMessage] message: $remoteMessage');
        showNotification(remoteMessage);
    });

    // set listener for push notifications, which will be received when app in background or killed
    FirebaseMessaging.onBackgroundMessage(onBackgroundMessage);
}

Subscribe

In order to start receiving push notifications you need to subscribe your current device. First of all you have to get token:

FirebaseMessaging firebaseMessaging = FirebaseMessaging.instance;
String token;
if (Platform.isAndroid) {
    token = await firebaseMessaging.getToken();
} else if (Platform.isIOS) {
    token = await firebaseMessaging.getAPNSToken();
}

if (!isEmpty(token)) {
    subscribe(token);
}

firebaseMessaging.onTokenRefresh.listen((newToken) {
    subscribe(newToken);
});

Then you can subscribe for push notifications using token:

subscribe(String token) async {
    log('[subscribe] token: $token');

    bool isProduction = bool.fromEnvironment('dart.vm.product');

    CreateSubscriptionParameters parameters = CreateSubscriptionParameters();
    parameters.environment =
        isProduction ? CubeEnvironment.PRODUCTION : CubeEnvironment.DEVELOPMENT;

    if (Platform.isAndroid) {
      parameters.channel = NotificationsChannels.GCM;
      parameters.platform = CubePlatform.ANDROID;
      parameters.bundleIdentifier = "com.connectycube.flutter.chat_sample";
    } else if (Platform.isIOS) {
      parameters.channel = NotificationsChannels.APNS;
      parameters.platform = CubePlatform.IOS;
      parameters.bundleIdentifier = "com.connectycube.flutter.chatSample";
    }

    String deviceId = await DeviceId.getID;
    parameters.udid = deviceId;
    parameters.pushToken = token;

    createSubscription(parameters.getRequestParameters())
        .then((cubeSubscription) {})
        .catchError((error) {});
}

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:

bool isProduction = bool.fromEnvironment('dart.vm.product');

CreateEventParams params = CreateEventParams();
params.parameters = {
  'message': "Some message in push", // 'message' field is required
  'custom_parameter1': "custom parameter value 1",
  'custom_parameter2': "custom parameter value 2",
  'ios_voip': 1 // to send VoIP push notification to iOS
  //more standard parameters you can found by link https://developers.connectycube.com/server/push_notifications?id=universal-push-notifications 
};

params.notificationType = NotificationType.PUSH;
params.environment = isProduction ? CubeEnvironment.PRODUCTION : CubeEnvironment.DEVELOPMENT;
params.usersIds = [88707, 88708];

createEvent(params.getEventForRequest())
  .then((cubeEvent) {})
  .catchError((error) {});

Receive push notifications

Depending on a devices state, incoming messages are handled differently. They will receive in one of registered callbacks which you set during initialisation plugin according to documentation.

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    log('[onMessage] message: $message', TAG);
    showNotification(message);
});

FirebaseMessaging.onBackgroundMessage(onBackgroundMessage);

Future<void> onBackgroundMessage(RemoteMessage message) {
  log('[onBackgroundMessage] message: $message');
  showNotification(message);
  return Future.value();
}

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

Unsubscribe

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

getSubscriptions()
  .then((subscriptionsList) {
    int subscriptionIdToDelete = subscriptionsList[0].id; // or other subscription's id
    return deleteSubscription(subscriptionIdToDelete);
  })
  .then((voidResult) {})
  .catchError((error) {});

CallKit and VoIP push notifications

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

For iOS you can do it with for example flutter_call_kit. This will also require to integrate Flutter VoIP Push Notification or another lib for VoIP Push Notification.

For Android we don't have ready to use CallKit libs for Flutter, but you can realise it by himself using callback onBackgroundMessage and showing own call screen from it.

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://pub.dev/packages/flutter_voip_push_notification#usage
  • then when token is retrieved, you need to subscribe to voip pushes by passing a NotificationsChannels.APNS_VOIP channel to CreateSubscriptionParameters 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.