Push Notifications
Qiscus Chat SDK receives push notifications through the Qiscus Chat SDK protocol and Firebase Cloud Messaging (FCM). It depends on usage and other conditions. Default notification is sent by Qiscus Chat SDK protocol. To enable your application to receive FCM push notifications, some setups must be performed in both the Firebase Developer Console and the Qiscus Dashboard.
You can do the following steps to setup push notifications:
- Setup Flutter Firebase Library
- Get FCM Secret Key in Firebase Console
- Setup FCM Server key in the Qiscus Chat SDK Dashboard
- Register your FCM token in the Qiscus Chat SDK
- Handle incoming Message from Push Notification
Step 1: Setup Flutter Firebase Library
We recommend to use firebase_messaging library, this library is easy to setup. You only need to follow their guide on how to setup from this link.
Step 2: Get FCM Secret Key in Firebase Console
You can get FCM Secret Key by following these steps:
- Go to Firebase Console
- Click your projects to see the overview your project
- On the top of left panel, click the gear icon on Project Overview menu. From the drop-down menu, click Project Settings.
- Click the Cloud Messaging tab under Settings. On the Project Credentials, find and copy your Server Key.
Step 3: Setup FCM Server Key in The Qiscus Dashboard
You can set FCM Secret Key by following these steps:
- Go to your Qiscus Chat Dashboard,
- Select the App ID
- Click Settings to add or delete FCM Secret Key,
- In the FCM Secret Keys section, click +Add to add your FCM Secret Key,
- Paste FCM Secret Key value and click Save changes
One App Id can only be associated with one FCM Project, make sure the FCM secret keys are from the same FCM Project, If you already put multiple FCM server keys but they are different FCM project, then our system deletes the related device token and the effect you will not receive FCM notification.
Step 4: Register Your FCM Token to Qiscus Chat SDK
- To enable FCM in ChatConfig, you need to register FCM token to notify Qiscus Chat SDK, for example:
// Get firebase token firstvar token = await firebase.getToken()// And then register firebase token into Qiscus Chat SDK serverqiscus.registerDeviceToken(token: token).then((_) { // Handle when firebase token registered to qiscus chat sdk}).catchError((Object error) { // Error registering firebase token to qiscus chat sdk})- You need to make sure every time open the app, the FCM token always needs to be registered in Qiscus Chat SDK. To retrieve the current FCM token, you can see below code:
Make sure always to register FCM token when open the app
Step 5: Handle Incoming Message From Push Notification
After registering your FCM token, you will get data from FCM Qiscus Chat SDK, you can handle by providing callback when configuring firebase instance, for example:
firebase.configure( onMessage: (Map<String, dynamic> data) { // Handle incoming message from firebase }, onBackgroundMessage: (Map<String, dynamic> data) { // Handle incoming message from firebase when the application are in background }, onResume: (Map<String, dynamic> data) { // Handle when user tapping on notification // we recommend to call another method instead of // handling it inside this callback, because any // error inside this callback are not thrown handleOnResumeCallback(data); },);void handleOnResumeCallback(Map<String, dynamic> data) async { var payload = jsonDecode(json['data']['payload']) as Map<String, dynamic>; // Get roomId from the provided payload and current // authenticated user var roomId = payload['room_id'] as int; var account = qiscus.currentUser; // Get room data of the provided message data from firebase var data = await qiscus.getChatRoomWithMessages$(roomId: roomId); // Navigate user to chat page Navigator.push( context, MaterialPageRoute( builder: (context) => ChatPage( qiscus: qiscus, account: account, room: data.room, ), ), );}Remove Notification
Once you logout or do not want to receive push notification, you can remove firebase token in Qiscus Chat SDK by using removeDeviceTokenmethod, for example:
qiscus.removeDeviceToken( token: token,).then((_) { // Firebase token successfully removed}).catchError((Object error) { // Handle error here});Notification Payload
Here complete payload of Qiscus Push Notifications. You can define Push Notification from Qiscus Chat SDK which has qiscus_sdk key within Firebase Cloud Messaging response.
{ "payload": { "comment_before_id": 1234565, // message before id (long) "comment_before_id_str": "1234565", // message before id (string) "email": "polo@mail.com", // sender's user id (string) "extras": {}, // message extras (json) "id": 1234566, // message id (long) "id_str": "1234566", // message id (string) "is_public_channel": false, // whether is channel or not" "message": "Hi", // message (string) "payload": {}, // message payload (json) "room_avatar": "https://www.froala.com/assets/blog/pages/post41_2.png", // chat room avatar (string) "room_id": 12345, // chat room id (long) "room_id_str": "12345", // chat room id (string) "room_name": "polo@mail.com", // chat room name (string) "room_options": "{}", // chat room extras (json) "room_type": "single", // chat room type, e.g single (1-on-1), group, (string) "status": "sent", // message status (string) "timestamp": "2019-09-25T12:23:43Z", // message timestamp (string) "type": "text", // message type (text, file_attachment, custom) "unique_temp_id": "android_1569414179567g8j3kbe51fc5970fab0c30f7", // message unique id (string) "unix_nano_timestamp": 1569414223720735000, // message nano timestamp (string) "unix_timestamp": 1569414223, // message unix timestamp (string) "user_avatar": "https://www.froala.com/assets/blog/pages/post41_2.png", // sender's avatar (string) "username": "polo" // sender's username (string) }, "qiscus_room_id": 1235, // chat room id (long) "qiscus_sdk": "post_comment" // event notification e.g "post_comment", "delete_message", "clear_room"}