Offline Push

Agora Chat supports the integration of Google Firebase Cloud Messaging (FCM). This enables Flutter developers to use an offline push notification service. The service features low latency, high delivery, high concurrency, and no violation of the users' personal data.

Understand the tech

Assume that User A sends a message to User B, but User B goes offline before receiving it. The Agora Chat server pushes a notification to the device of User B via FCM and temporarily stores this message. Once User B comes back online, the Agora Chat SDK pulls the message from the server and pushes the message to User B using persistent connections.

Prerequisites

Before proceeding, ensure that you meet the following requirements:

• You have initialized the Agora Chat SDK. For details, see Get Started with Flutter.
• You understand the call frequency limit of the Agora Chat APIs supported by different pricing plans as described in Limitations.
• You have activated the advanced features for push in Agora Console. Advanced features allow you to set the push notification mode, do-not-disturb mode, and custom push template.
  You must contact support@agora.io to disable the advanced features for push as this operation will delete all the relevant configurations.

Integrate FCM with Agora Chat

This section guides you through how to integrate FCM with Agora Chat.

1. Create a Flutter project in Firebase

1. Log in to Firebase console, and click Add project.

2. In the Create a project page, enter a project name, and click Create project.

   You can toggle off Enable Google Analytics for this project if this option is not needed.

3. After the project is ready, click Continue to redirect to the project page, and click the Flutter icon and follow the Firebase CLI to setting your project.

4. In the Project settings page, perform the following operations:

   • For Android apps, find the Android apps in Your apps, and set your Android app according to See SDK instructions.
   • For iOS apps, find the Apple apps in Your apps, and set your Apple app according to See SDK instructions.

5. In the project page, click the project you have created.

6. In the Project settings page, select the Cloud Messaging tab, and locate the Server key and Sender ID.

2. Upload FCM certificate to Agora Console

1. Log in to Agora Console, and click Project Management in the left navigation bar.

2. On the Project Management page, locate the project that has Chat enabled and click Config.

3. On the project edit page, click Config next to Chat.

4. On the project config page, select Features > Push Certificate and click Add Push Certificate.

5. In the pop-up window, select the GOOGLE tab, and configure the following fields:

   • Certificate Name: Fill in the Sender ID.
   • Push Key: Fill in the Server Key.

3. Enable FCM in Agora Chat

1. Initialize and enable FCM in the Agora Chat SDK.

    ChatOptions options = ChatOptions(
            // Replace <#Your AppKey#> with your app key.
            appKey: "<#Your AppKey#>",
            autoLogin: false,
    );
    // Replace <#Your FCM sender id#> with your FCM Sender ID.
    options.enableFCM("<#Your FCM sender id#>");
    options.enableAPNs("<#Your FCM sender id#>");
    await ChatClient.getInstance.init(options);
    ...
    Firebase.initializeApp();
    await Firebase.initializeApp(
            options: DefaultFirebaseOptions.currentPlatform,
    );
    FirebaseMessaging.onMessageOpenedApp.listen((message) {
            debugPrint("message : $message");
    });

2. Pass the device token of FCM to the Agora Chat SDK.

    final fcmToken = await FirebaseMessaging.instance.getToken();
    if (fcmToken != null) {
    try {
        if (Platform.isIOS) {
        await ChatClient.getInstance.pushManager.updateAPNsDeviceToken(
            fcmToken,
        );
        } else if (Platform.isAndroid) {
        await ChatClient.getInstance.pushManager.updateFCMPushToken(
            fcmToken,
        );
        }
    } on ChatError catch (e) {
        debugPrint("bind fcm token error: ${e.code}, desc: ${e.description}");
    }
    }

3. Listen for device token generation.

   Rewrite the onTokenRefresh callback. Once a device token is generated, this callback passes the new device token to the Agora Chat SDK at the earliest opportunity.

    FirebaseMessaging.instance.onTokenRefresh.listen((newToken) async {
    try {
        if (Platform.isIOS) {
        await ChatClient.getInstance.pushManager.updateAPNsDeviceToken(
            newToken,
        );
        } else if (Platform.isAndroid) {
        await ChatClient.getInstance.pushManager.updateFCMPushToken(
            newToken,
        );
        }
    } on ChatError catch (e) {
        debugPrint("bind fcm token error: ${e.code}, desc: ${e.description}");
    }
    });

Set up push notifications

To optimize user experience when dealing with an influx of push notifications, Agora Chat provides fine-grained options for the push notification and do-not-disturb (DND) modes at both the app and conversation levels, as shown in the following table:

Push notification mode

The setting of the push notification mode at the conversation level takes precedence over that at the app level, and those conversations that do not have specific settings for the push notification mode inherit the app setting by default.

For example, assume that the push notification mode of the app is set to MENTION_ONLY, while that of the specified conversation is set to ALL. You receive all the push notifications from this conversation, while you only receive the push notifications for mentioned messages from all the other conversations.

Do-not-disturb mode

For both the app and all the conversations in the app, the setting of the DND mode takes precedence over the setting of the push notification mode.

For example, assume that a DND time period is specified at the app level and the push notification mode of the specified conversation is set to ALL. The DND mode takes effect regardless of the setting of the push notification mode, that is, you do not receive any push notifications during the specified DND time period.

Alternatively, assume that a DND time period is specified for a conversation, while the app does not have any DND settings and its push notification mode is set to ALL. You do not receive any push notifications from this conversation during the specified DND time period, while the push of all the other conversations remains the same.

Set the push notifications of an app

You can call setSilentModeForAll to set the push notifications at the app level, and specify the ChatSilentModeParam field to set the push notification mode and DND mode, as shown in the following code sample:

try {
  // Sets the push notification mode to `MENTION_ONLY` for an app.
  var param = ChatSilentModeParam.remindType(
    ChatPushRemindType.MENTION_ONLY,
  );
  await ChatClient.getInstance.pushManager.setSilentModeForAll(
    param: param,
  );

  // Sets the DND duration to 15 minutes.
  var param = ChatSilentModeParam.silentDuration(15);
  await ChatClient.getInstance.pushManager.setSilentModeForAll(
    param: param,
  );

  // Sets the DND time frame as from 8:30 to 15:00.
  var param = ChatSilentModeParam.silentModeInterval(
    startTime: ChatSilentModeTime(hour: 8, minute: 30),
    endTime: ChatSilentModeTime(hour: 15, minute: 0),
  );
  await ChatClient.getInstance.pushManager.setSilentModeForAll(
    param: param,
  );

} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Retrieve the push notification setting of an app

You can call getSilentModeForAll to retrieve the push notification settings at the app level, as shown in the following code sample:

try {
  ChatSilentModeResult result =
      await ChatClient.getInstance.pushManager.fetchSilentModeForAll();
  // Retrieves the setting of the push notification mode at the app level.
  ChatPushRemindType? remindType = result.remindType;
  // Retrieves the Unix timestamp when the DND duration of an app expires.
  int? timestamp = result.expireTimestamp;
  // Retrieves the start time specified in the DND time frame at the app level.
  ChatSilentModeTime? startTime = result.startTime;
  startTime?.hour; // The start hour of the DND time frame.
  startTime?.minute; // The start minute of the DND time frame.
  // Retrieves the end time specified in the DND time frame at the app level.
  ChatSilentModeTime? endTime = result.endTime;
  endTime?.hour; // The end hour of the DND time frame.
  endTime?.minute; // The end minute of the DND time frame.
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Set the push notifications of a conversation

You can call setConversationSilentMode and specify the conversationId and ConversationType fields to set the push notifications for the conversation, as shown in the following code sample:

// Sets the push notification mode to `MENTION_ONLY` for a conversation.
var param = ChatSilentModeParam.remindType(
  ChatPushRemindType.MENTION_ONLY,
);
// Sets the DND duration to 15 minutes.
var param = ChatSilentModeParam.silentDuration(15);

try {
  // Sets the push notifications at the conversation level.
  await ChatClient.getInstance.pushManager.setConversationSilentMode(
    conversationId: conversationId,
    type: conversationType,
    param: param,
  );
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Retrieve the push notification setting of a conversation

You can call fetchConversationSilentMode to retrieve the push notification settings of the specified conversation, as shown in the following code sample:

try {
  ChatSilentModeResult result = await ChatClient.getInstance.pushManager
      .fetchConversationSilentMode(
    conversationId: conversationId,
    type: conversationType,
  );
  // Retrieves the setting of the push notification mode for the specified conversation.
  ChatPushRemindType? remindType = result.remindType;
  // Retrieves the Unix timestamp when the DND duration of a conversation expires.
  int? timestamp = result.expireTimestamp;
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Retrieve the push notification settings of multiple conversations

You can call fetchSilentModeForConversations to retrieve the push notification settings of multiple conversations, as shown in the following code sample:

try {
  Map<String, ChatSilentModeResult> result = await ChatClient
      .getInstance.pushManager
      .fetchSilentModeForConversations(conversationList);
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Clear the push notification mode of a conversation

You can call removeConversationSilentMode to clear the push notification mode of the specified conversation. Once the specific setting of a conversation is cleared, this conversation inherits the app setting by default.

The following code sample shows how to clear the push notification mode of a conversation:

try {
  await ChatClient.getInstance.pushManager.removeConversationSilentMode(
    conversationId: conversationId,
    type: conversationType,
  );
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Set up display attributes

Set the display attributes of push notifications

You can call updatePushNickname to set the nickname displayed in your push notifications, as shown in the following code sample:

try {
  ChatClient.getInstance.pushManager.updatePushNickname("pushNickname");
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

You can also call updatePushDisplayStyle to set the display style of push notifications, as shown in the following code sample:

try {
  ChatClient.getInstance.pushManager.updatePushDisplayStyle(
    // `Simple` indicates that only the text "You have a new message" is displayed.
    // To display the message content, replace `Simple` with `Summary`.
    DisplayStyle.Simple,
  );
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Retrieve the display attributes of push notifications

You can call fetchPushConfigsFromServer to retrieve the display attributes in push notifications, as shown in the following code sample:

try {
  ChatPushConfigs configs = await ChatClient.getInstance.pushManager.fetchPushConfigsFromServer();
  // Retrieves the display style of push notifications.
  DisplayStyle displayStyle = configs.displayStyle;
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Set up push translations

If a user enables the automatic translation feature and sends a message, the SDK sends both the original message and the translated message.

Push notifications work in tandem with the translation feature. As a receiver, you can set the preferred language of push notifications that you are willing to receive when you are offline. If the language of the translated message meets your setting, the translated message displays in push notifications; otherwise, the original message displays instead.

The following code sample shows how to set and retrieve the preferred language of push notifications:

// Sets the preferred language of push notifications.
try {
  ChatClient.getInstance.pushManager.setPreferredNotificationLanguage("en");
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

// Retrieves the preferred language of push notifications.
try {
  String? languageCode = await ChatClient.getInstance.pushManager.fetchPreferredNotificationLanguage();
} on ChatError catch (e) {
  debugPrint("error: ${e.code}, ${e.description}");
}

Set up push templates

Agora Chat allows users to use ready-made templates for push notifications.

You can create and provide push templates for users by referring to the following steps:

1. Log in to Agora Console, and click Project Management in the left navigation bar.

2. On the Project Management page, locate the project that has Chat enable and click Config.

3. On the project edit page, click Config next to Chat.

4. On the project config page, select Features > Push Template and click Add Push Template, and configure the fields in the pop-up window, as shown in the following figure:
   

Once the template creation is complete in Agora Console, users can choose this push template as their default layout when sending a message, as shown in the following code sample:

// This code sample takes a TXT message as an example. You can use the same approach to set IMAGE messages and FILE messages.
ChatMessage msg = ChatMessage.createTxtSendMessage(
  targetId: "targetId",
  content: "message content",
);
// Sets the push template created in Agora Console as their default layout.
msg.attributes = {
  // Adds the push template to the message.
  "em_push_template": {
    // Sets the template name.
    "name": "test7",
    // Sets the template title by specifying the variable.
    "title_args": ["value1"],
    // Sets the template content by specifying the variable.
    "content_args": ["value1"],
  }
};
// Sets the message callback.
msg.setMessageStatusCallBack(MessageStatusCallBack());
// Sends the message.
ChatClient.getInstance.chatManager.sendMessage(msg);

What's next

This section includes more versatile push notification features that you can use to implement additional functions if needed.

If the ready-made templates do not meet your requirements, Agora Chat also enables you to customize your push notifications.

Custom fields

The following code sample shows how to add an extension field in push notifications:

// This code sample takes a TXT message as an example. You can use the same approach to set IMAGE messages and FILE messages.
ChatMessage msg = ChatMessage.createTxtSendMessage(
  targetId: "targetId",
  content: "message content",
);
// Adds the extension object.
msg.attributes = {
  "em_apns_ext": {
    "test1": "test 01",
  }
};
// Sets the message callback.
msg.setMessageStatusCallBack(MessageStatusCallBack());
// Sends the message.
ChatClient.getInstance.chatManager.sendMessage(msg);

The following example shows a RemoteMessage object received by the remote user:

{
  "message":{
    "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "data":{
      "alert" : "message content",
      "test1" : "test 01"
    }
  }
}

Custom displays

The following code sample shows how to customize the display style in push notifications:

// This code sample takes a TXT message as an example. You can use the same approach to set IMAGE messages and FILE messages.
ChatMessage msg = ChatMessage.createTxtSendMessage(
  targetId: "targetId",
  content: "message content",
);
// Adds the extension object.
msg.attributes = {
  "em_apns_ext": {
    "em_push_title": "custom push title",
    "em_push_content": "custom push content",
  }
};
// Sets the message callback.
msg.setMessageStatusCallBack(MessageStatusCallBack());
// Sends the message.
ChatClient.getInstance.chatManager.sendMessage(msg);

The following example shows a RemoteMessage object received by the remote user:

{
  "message":{
    "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "data":{
      "alert" : "push content",
      "push_title" : "custom push title",
      "push_content" : "custom push content"
    }
  }
}

Force push notifications

Once you force a push notification to a user, the user receives the message regardless of their settings on the push nosh notification and DND modes.

The following code sample shows how to force a push notification:

// This code sample takes a TXT message as an example. You can use the same approach to set IMAGE messages and FILE messages.
ChatMessage msg = ChatMessage.createTxtSendMessage(
  targetId: "targetId",
  content: "message content",
);
// Adds the extension object.
msg.attributes = {
  "em_force_notification": true
};
// Sets the message callback.
msg.setMessageStatusCallBack(MessageStatusCallBack());
// Sends the message.
ChatClient.getInstance.chatManager.sendMessage(msg);