Skip to content

Commit f52d713

Browse files
haoxiuwenhaoxiuwen
authored
Merge pull request #1505 from haoxiuwen/doc-v2
Modify Offline Push Integration for Flutter
2 parents 77c4e03 + c8e8274 commit f52d713

File tree

1 file changed

+265
-0
lines changed

1 file changed

+265
-0
lines changed

‎docs/agora_chat/offline_push/flutter/Integrate_offline_push_flutter.md‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
# Integrate offline push
2+
3+
Follow this guide to integrate and test push notifications in your environment.
4+
5+
## Prerequisites
6+
7+
Before proceeding, ensure that you meet the following requirements:
8+
9+
- You have initialized the Chat SDK. For details, see [SDK quickstart](https://docs.agora.io/en/agora-chat/get-started/get-started-sdk).
10+
- You understand the call frequency limit of the Chat APIs supported by different pricing plans as described in [Limitations](https://docs.agora.io/en/agora-chat/develop/reference/limitations).
11+
12+
## Integrate FCM push
13+
14+
This section guides you through how to integrate FCM with Chat.
15+
16+
1. Create a project in Firebase console.
17+
2. Add a Flutter app on Firebase console.
18+
3. Upload the FCM certificate to Agora Console.
19+
4. Upload the APNs certificate to Agora Console.
20+
5. Integrate FCM to the client.
21+
22+
### 1. Create a project in Firebase console
23+
24+
1. Log in to the [Firebase console](https://console.firebase.google.com/) and click **Create a new Firebase project**.
25+
26+
2. On the **Create a project** page, enter a project name, and click **Create project**.
27+
28+
Note: You can toggle off **Join the Google Developer Program to enrich your developer journey with access to Al
29+
assistance, learning resources, profile badges, and more!** if this option is not needed.
30+
31+
3. On the **AI assistance for your Firebase project** page, click **Continue**。
32+
33+
Note: You can toggle off **Enable Gemini in Firebase** if this option is not needed.
34+
35+
4. On the **Google Analytics for your Firebase project** page, click **Continue**.
36+
37+
Note: You can toggle off **Enable Google Analytics for this project** if this option is not needed.
38+
39+
### 2. Add a Flutter App on Firebase console
40+
41+
1. Upon project creation, click the setting icon to the right of **Project Overview** in the left navigation bar and select **Project settings**.
42+
43+
2. Select the **General** tab and click the Flutter icon in the **Your apps** section.
44+
45+
3. Go through the steps shown on the **Add Firebase to your Flutter app** page.
46+
a. Prepare your workspace: install the Firebase CLI and Flutter SDK.
47+
b. Install and run the FlutterFire CLI: Upon this operation, configuration files, like `lib/firebase_options.dart和google-services.json`, are automatically added to your Flutter project.
48+
c. Initialize Firebase and add plugins. For where to add the code, see the [SDK integration] section (https://docs.agora.io/en/agora-chat/develop/offline-push/integrate-test?platform=flutter#sdk-integration).
49+
50+
### 3. Upload the FCM certificate to Agora Console
51+
52+
1. Check the sender ID on Firebase Console.
53+
54+
You can find the sender ID on the **Project settings > Cloud Messaging** page of the Firebase Console. Make sure to fill in the certificate name as the sender ID when uploading the FCM certificate to the Agora Console.
55+
56+
![Query the sender ID](https://docs.agora.io/en/assets/images/push_fcm_senderid-f9bc4941d3765be43a565cf8febbf967.png)
57+
58+
2. Generate and upload the private key on the Firebase Console.
59+
60+
Click **Generate new private key** on the **Project settings > Service accounts** page of the Firebase Console to generate the `.json` file and upload it to Agora Console when uploading the FCM certificate to the Agora Console.
61+
62+
![Generate new private key](https://docs.agora.io/en/assets/images/push_fcm_private_key-ab57005d4451ce829530280a773a62c1.png)
63+
64+
3. [Upload the FCM certificate to Agora Console](https://docs.agora.io/en/agora-chat/develop/offline-push/integrate-test?platform=flutter#2-upload-fcm-certificate-to-).
65+
66+
### 4. Upload the APNS certificate to Agora Console
67+
68+
Take the following steps to create APNs certificates and upload to Agora Console:
69+
70+
1. Create a push certificate on the Apple Developer Platform.
71+
2. Create an App ID.
72+
3. Create push notification certificates.
73+
4. Generate the push certificate.
74+
5. Generate the Provisioning Profile file.
75+
6. Upload the APNs certificate in the Agora Console.
76+
77+
For details, see the [APNs push integration document](https://docs.agora.io/en/agora-chat/develop/offline-push/integrate-test?platform=ios#integrate-apns-push) of the iOS platform.
78+
79+
### 5. Integrate FCM on the client
80+
81+
Take the following steps to integrate FCM on the client.
82+
83+
1. Install `firebase_core`: Execute `flutter pub add firebase_core` in the project root directory.
84+
2. Install `firebase_messaging`: Execute `flutter pub add firebase_messaging` in the project root directory.
85+
86+
**For Android**
87+
88+
In your Flutter project's `android/build.gradle.kts` file, check the `google-services` version and make sure it is 4.3.15 or above.
89+
90+
```dart
91+
buildscript {
92+
repositories {
93+
google()
94+
mavenCentral()
95+
}
96+
dependencies {
97+
// START: FlutterFire Configuration
98+
classpath("com.google.gms:google-services:4.3.15")
99+
// END: FlutterFire Configuration
100+
}
101+
}
102+
```
103+
104+
Note the following:
105+
106+
As `firebase_messaging` requires the minimal version of Flutter SDK no less than 23, you need to set `minSdk = 23` if an issue with minSdk is reported during Android compilation.
107+
108+
**For iOS**
109+
110+
Before your app can start receiving messages, enable push notifications and background modes in your Xcode project.
111+
112+
1. Open the Xcode project workspace (`ios/Runner.xcworkspace`).
113+
114+
2. [Enable push notifications](https://help.apple.com/xcode/mac/current/#/devdfd3d04a1).
115+
116+
On the **Signing & Capabilities** page, click **+ Capability** and select **Push Notifications**.
117+
118+
3. Enable background fetching and remote notifications [background execution modes](https://developer.apple.com/documentation/xcode/configuring-background-execution-modes).
119+
120+
On the **Signing & Capabilities** page, click **+ Capability** and select **Background Modes** and then **Background fetch** and **Remote notifications**.
121+
122+
4. Set the minimal deployment version to 15 or above.
123+
124+
On the **General** page, set **Minimum Deployments** to 15 or above.
125+
126+
**SDK integration**
127+
128+
1. Import Firebase-related packages.
129+
130+
```dart
131+
//...
132+
import 'dart:io';
133+
import 'package:firebase_messaging/firebase_messaging.dart';
134+
import 'package:firebase_core/firebase_core.dart';
135+
import 'firebase_options.dart';
136+
//...
137+
```
138+
139+
2. Initialize Firebase and Chat SDK options:
140+
141+
```dart
142+
@override
143+
void initState() {
144+
//...
145+
setupFireBaseAndChat();
146+
//...
147+
}
148+
149+
void setupFireBaseAndChat() async {
150+
// Initialize Firebase
151+
WidgetsFlutterBinding.ensureInitialized();
152+
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
153+
154+
// Configure Agora Chat
155+
const String appKey = "Your Appkey"; // Replace with your app key.
156+
ChatOptions options = ChatOptions(
157+
appKey: appKey,
158+
autoLogin: false,
159+
);
160+
161+
// Enable push in Agora Chat
162+
if (Platform.isAndroid) {
163+
options.enableFCM("Your FCM sender id"); // Replace with your FCM Sender ID
164+
165+
} else if (Platform.isIOS) {
166+
options.enableAPNs("Your APNs certificate name"); // Replace with your APNs certificate
167+
}
168+
169+
// Initialize Agora Chat
170+
await ChatClient.getInstance.init(options);
171+
// Notify the SDK that the UI is ready. After the following method is executed, callbacks within ChatRoomEventHandler and ChatGroupEventHandler can be triggered.
172+
await ChatClient.getInstance.startCallback();
173+
}
174+
```
175+
176+
Note the following:
177+
178+
Make sure that `enableFCM` has the same value as **Certificate Name** on the FCM certificate page on Agora Console and `enableAPNs` has the identical value as **Certificate Name** on the APNs certificate page on Agora Console.
179+
180+
![push_fcm_add_certificate](https://docs.agora.io/en/assets/images/push_fcm_add_certificate-3b9434237425f9c98660e785b2f09098.png)
181+
182+
![push_apns_add_certificate](https://docs.agora.io/en/assets/images/push_apns_add_certificate-47c94a44ae5cc8e9933f1f55aac54270.png)
183+
184+
3. Pass the FCM or APNs device token to the server.
185+
186+
When the app is initialized, the FCM SDK generates a unique registration token for the client app on the user's device. Since FCM or APNs uses this token to determine which device to send the push message to, the Agora server needs to obtain the client app's registration token before sending the notification request to FCM or APNs. FCM or APNs then verifies the registration token and sends the notification message to the device.
187+
188+
Note that operations as indicated in the following code segment can be performed only after your login to Agora Chat.
189+
190+
```dart
191+
// Request push permission
192+
await FirebaseMessaging.instance.requestPermission();
193+
194+
// Get the token and upload it to Chat server
195+
String? pushToken;
196+
197+
// Get device Token for Android
198+
if (Platform.isAndroid) {
199+
pushToken = await FirebaseMessaging.instance.getToken();
200+
// Update FCM device token
201+
if (pushToken != null) {
202+
debugPrint('fcm token: $pushToken');
203+
await ChatClient.getInstance.pushManager.updateFCMPushToken(
204+
pushToken,
205+
);
206+
} else {
207+
debugPrint('fcm token is null');
208+
}
209+
210+
// Get device Token for iOS
211+
} else if (Platform.isIOS) {
212+
pushToken = await FirebaseMessaging.instance.getAPNSToken();
213+
// Update APNs device token
214+
if (pushToken != null) {
215+
debugPrint('apns token: $pushToken');
216+
await ChatClient.getInstance.pushManager.updateAPNsDeviceToken(
217+
pushToken,
218+
);
219+
} else {
220+
debugPrint('apns token is null');
221+
}
222+
}
223+
```
224+
225+
## Test FCM push
226+
227+
After integrating and enabling FCM, you can test whether the push feature is successfully integrated.
228+
229+
For more reliable testing, use a physical device.
230+
231+
### Test push notifications
232+
233+
1. Log in to the app on your device and confirm that the device token is successfully bound.
234+
235+
You can check the log or call [RESTful API for getting user details](https://docs.agora.io/en/agora-chat/restful-api/user-system-registration#querying-a-user) to confirm whether the device token is successfully bound. If successful, there will be a `pushInfo` field under the `entities` field, and `pushInfo` will have relevant information such as `device_Id`, `device_token`, `notifier_name`, and others.
236+
237+
2. Enable app notification bar permissions.
238+
239+
3. Kill the application process.
240+
241+
4. Send a test message in the [Agora Console](https://console.agora.io/v2).
242+
243+
Select **Operation Management** > **User** in the left navigation bar. On the **Users** page, select **Send Admin Message** in the **Action** column for the corresponding user ID. In the dialog box that pops up, select the message type, enter the message content, and then click **Send** .
244+
245+
Note the following:
246+
247+
In the **Push Certificate** page, in the **Action** column of each certificate, click **More** and **Test** will appear. This is to directly call the third-party interface to push. The message sending test in the **Users** page first calls the Chat message sending interface and then the third-party interface when the conditions are met (that is, the user is offline, the push certificate is valid and bound to the device token).
248+
249+
5. Check your device to see if it has received the push notification.
250+
251+
### Troubleshooting
252+
253+
In case of issues, take the following steps:
254+
255+
1. Check whether FCM push is correctly integrated or enabled:
256+
257+
Select **Operation Management** > **User** in the left navigation bar. On the **User Management** page, select **Push Certificate** in the **Action** column for the corresponding user ID. In the pop-up box, check whether the certificate name and device token are displayed correctly.
258+
259+
2. Check whether the correct FCM certificate is uploaded in the [Agora Console](https://console.agora.io/v2).
260+
261+
3. Check whether the message is pushed in the chat room. The chat room does not support offline message push.
262+
263+
4. Check if the device supports GMS.
264+
265+
5. Check whether online-only delivery is enabled (`deliverOnlineOnly` = `true`). Messages set to be delivered only when the receiver is online will not be pushed.

0 commit comments

Comments
 (0)