שלח וקבל התראות עבור אפליקציית Flutter באמצעות Firebase Cloud Messaging

1. הקדמה

עדכון אחרון : 2022-04-04

מעבד קוד זה מנחה אותך בתהליך של פיתוח אפליקציה מרובת פלטפורמות עם Firebase Cloud Messaging (FCM) באמצעות Flutter. אתה תכתוב חלק אחד מהיישום של האפליקציה, ולאחר מכן תבנה ותפעיל אותה בצורה חלקה בשלוש פלטפורמות: אנדרואיד, iOS ואינטרנט. תלמד גם כיצד לשלב FCM ב-Flutter וכיצד לכתוב קוד כדי לקבל ולשלוח הודעות. לבסוף, מעבדת הקוד מציגה את תכונת הבלוקים הספציפיים לפלטפורמה של FCM HTTP v1 API, המאפשרת לשלוח הודעה אחת שיש לה התנהגויות שונות בפלטפורמות שונות.

תְנַאִי מוּקדָם

הבנה בסיסית של Flutter.

מה תלמד

• כיצד להגדיר וליצור אפליקציית Flutter.
• כיצד להוסיף תלות ב-FCM.
• כיצד לשלוח הודעות FCM בודדות לאפליקציה שלך.
• כיצד לשלוח הודעות בנושא FCM לאפליקציה שלך.

מה אתה צריך

• הגרסה היציבה האחרונה של Android Studio מוגדרת עם התוספים Dart ו-Flutter.

אתה יכול להפעיל את מעבדת הקוד באמצעות כל אחד מהמכשירים הבאים:

• מכשיר אנדרואיד פיזי המחובר למחשב שלך.
• אמולטור אנדרואיד (ראה הפעל אפליקציות באמולטור אנדרואיד ).
• דפדפן לבחירתך, כגון Chrome.

לחלופין, כדי להפעיל את מעבדת הקוד באמצעות פלטפורמת iOS, אתה צריך מכשיר iOS, חשבון Apple Developer ומכשיר macOS עם XCode מותקן.

2. הגדרת רפרוף

אם כבר הגדרת סביבת פיתוח של Flutter, דלג על סעיף זה.

כדי להגדיר סביבת פיתוח של Flutter, בצע את השלבים הבאים:

1. הורד והתקן את Flutter עבור מערכת ההפעלה שלך: התקן | רִפרוּף
2. ודא שהכלי Flutter נוסף לנתיב שלך.
3. הגדר את העורך שלך עבור Flutter כפי שמוצג בהגדרת עורך | Flutter הקפד להתקין את התוספים של Flutter ו-Dart עבור העורך שלך. עבור שאר ה-codelab, אתה תשתמש ב-Android Studio.
4. משורת הפקודה, הפעל את flutter doctor , אשר סורק את ההגדרות שלך ומפרט את כל התלות החסרה שיש לתקן. עקוב אחר ההוראות כדי לתקן תלות חסרות חשובות. שים לב שחלק מהתלות עשויות שלא להיות נחוצות. לדוגמה, אם אינך מתכוון לפתח עבור iOS, תלות חסרה ב-CocoaPods לא תהיה בעיית חסימה.
5. הפעל פקודה זו כדי ליצור את אפליקציית Flutter שלך בספריית fcmflutter flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter , ולאחר מכן שנה ספריות ל- fcmflutter .

הערה: פקודת flutter לוקחת את שם הדומיין של החברה בסדר הפוך עבור option --org ואת שם הפרויקט עבור option --project-name . שם הדומיין של החברה ושם הפרויקט משולבים כשם החבילה עבור אנדרואיד (מזהה החבילה עבור iOS), ומשמשים לזיהוי ייחודי של אפליקציה.

6. ב-Android Studio, עבור אל קובץ -> פתח , מצא את הנתיב של אפליקציית Flutter שלך ולאחר מכן לחץ על פתח כדי לפתוח את הפרויקט ב-Android Studio. קוד האפליקציה נמצא בקובץ lib/main.dart .

הערה: כדי להגדיר את הנתיב של Flutter SDK ב-Android Studio, פתח את Preferences -> Language & Framework -> Flutter ובחר בנתיב ההתקנה של Flutter בתור ה-SDK.

בסרגל הכלים של Android Studio, לחץ על החץ למטה כדי לבחור מכשיר אנדרואיד. אם בורר היעד ריק, התקן מכשירי אנדרואיד וירטואליים , או דפדפן Chrome או סימולטור iOS אם אתה מעדיף להפעיל את האפליקציה מדפדפן אינטרנט או מכשיר iOS. ייתכן שיהיה עליך להפעיל את המכשיר באופן ידני ולרענן את הרשימה כדי למצוא את מכשיר היעד.

לחץ על הפעל כדי להפעיל את האפליקציה.

מזל טוב! יצרת בהצלחה אפליקציית Flutter.

3. הגדרת Firebase ו- FlutterFire

כדי לפתח אפליקציה המשתלבת עם Firebase Cloud Messaging באמצעות Flutter, אתה צריך:

• פרויקט Firebase.
• Firebase CLI עובד.
• התקנה של FlutterFire.
• אפליקציה שהוגדרה ונוצרת עם flutterfire configure .

צור את פרויקט Firebase שלך

אם כבר יש לך פרויקט Firebase, תוכל לדלג על שלב זה.

1. אם יש לך חשבון Google, פתח את Firebase והיכנס עם חשבון Google שלך ​​ולאחר מכן לחץ על עבור למסוף .
2. ב-Firebase Console, לחץ על הוסף פרויקט . פעל לפי ההוראות כדי ליצור פרויקט. אל תסמן את הפעל את Google Analytics עבור פרויקט זה מכיוון שלא תשתמש בו בפרויקט זה.
3. לאחר יצירת הפרויקט, נווט אל הגדרות הפרויקט של הפרויקט על ידי לחיצה על סמל גלגל השיניים לצד סקירת פרויקט .

מזהה הפרויקט משמש לזיהוי ייחודי של הפרויקט, והוא עשוי להיות שונה משם הפרויקט . מזהה הפרויקט ישמש להגדרת FlutterFire מאוחר יותר.

מזל טוב! יצרת בהצלחה פרויקט Firebase.

הגדר את Firebase CLI

אם הגדרת Firebase CLI, תוכל לדלג על שלב זה.

עבור אל הפניה של Firebase CLI כדי להוריד ולהתקין את Firebase CLI. היכנס ל-Firebase עם חשבון Google שלך ​​עם הפקודה הבאה:

firebase login

הגדר את FlutterFire

1. התקן את הפלאגין FlutterFire באמצעות הפקודה: flutter pub add firebase_core
2. התקן את הפלאגין FCM: flutter pub add firebase_messaging
3. הגדר את FlutterFire CLI: dart pub global activate flutterfire_cli
4. הגדר את פרויקט Firebase ב-Flutter: flutterfire configure --project=fcm4flutter. השתמש במקשי החצים וברווח כדי לבחור את הפלטפורמות או הקש Enter כדי להשתמש בפלטפורמות ברירת המחדל.

Codelab זה משתמש בפלטפורמות ברירת המחדל (אנדרואיד, iOS ואינטרנט), אבל אתה יכול לבחור רק פלטפורמה אחת או שתיים. אם תתבקש להזין את מזהה החבילה של iOS, הזן com.flutter.fcm.fcmflutter או מזהה החבילה של iOS משלך בפורמט של [company domain name].[project name] . לאחר השלמת הפקודה, רענן את דף Firebase Console. אתה תראה שהוא יצר אפליקציות עבור הפלטפורמות שנבחרו במסגרת פרויקט Firebase.

פקודה זו יוצרת קובץ firebase_options.dart תחת ספריית lib , המכילה את כל האפשרויות הנדרשות לאתחול.

הגדר הודעות ענן עבור iOS

1. נווט אל דף המפתחים של Apple ולחץ על צור מפתח בכרטיסייה מפתחות .

2. הזן את השם של המפתח וסמן שירותי Apple Push Notifications (APNs) .
3. הורד את קובץ המפתח, בעל סיומת קובץ .p8 .
4. במסוף Firebase , נווט אל הגדרות הפרויקט של הפרויקט ובחר בכרטיסייה Cloud Messaging .

5. העלה את קובץ מפתח APNs עבור אפליקציית iOS בכרטיסייה Cloud Messaging . הזן את מזהה מפתח APNs מהכרטיסייה Cloud Messaging ואת מזהה הצוות, אותו ניתן למצוא במרכז החברות של Apple.

4. הכנת FCM

לפני שאפליקציה יכולה לקבל הודעות מ-FCM, היא צריכה:

• אתחול FlutterFire.
• בקש הרשאות הודעה.
• הירשם ב-FCM כדי לקבל אסימון רישום.

אִתחוּל

כדי לאתחל את השירות, החלף את הפונקציה הראשית ( lib/main.dart ) בקוד זה:

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 

flutterfire configure

import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

לאחר מכן הפעל את כלים -> Flutter -> Flutter Pub קבל ב-Android Studio כדי לטעון את החבילות שנוספו ב- Set up FlutterFire , והצג את הקוד עם ההגדרה המתאימה של Intellisense ב-Android Studio.

פעולה זו מאתחלת את FlutterFire עבור הפלטפורמה הנוכחית DefaultFirebaseOptions.currentPlatform , המיובאת מהקובץ firebase_options.dart שנוצר. שימו לב כי initializeApp היא פונקציה אסינכרונית, ומילת המפתח await מבטיחה שהאתחול הושלם לפני הפעלת האפליקציה.

הערה: הקוד המלא עבור מעבדת קוד זה זמין בכתובת https://github.com/FirebaseExtended/firebase_fcm_flutter.

בקש רשות

האפליקציה צריכה לבקש רשות מהמשתמש כדי לקבל התראות. שיטת requestPermission שסופקה על ידי firebase_messaging מציגה תיבת דו-שיח או חלון קופץ המבקש מהמשתמש להתיר או לדחות את ההרשאה.

ראשית, העתק את הקוד הזה לפונקציה הראשית תחת ההערה TODO: Request permission . settings שהוחזרו אומרות לך אם המשתמש נתן הרשאה. אנו ממליצים לבקש הרשאה רק כאשר המשתמש צריך להשתמש בתכונה הדורשת גישה (למשל, כאשר המשתמש מפעיל התראות בהגדרות האפליקציה). ב-codelab זה, אנו מבקשים הרשאה על הפעלת אפליקציה למען הפשטות.

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

לאחר מכן, בסרגל הכלים של Android Studio, בחר Chrome (web) מבורר היעד ולאחר מכן הפעל את האפליקציה שוב.

לאחר מכן, כרטיסיית Chrome מופעלת עם חלון קופץ המבקש רשות. אם תלחץ על Allow , תראה יומן במסוף Android Studio: Permission granted: AuthorizationStatus.authorized . לאחר שתאפשר או חוסם את בקשת ההרשאה, התגובה שלך מאוחסנת יחד עם האפליקציה שלך בדפדפן, והחלון הקופץ לא יוצג שוב. שים לב שכאשר אתה מפעיל את אפליקציית האינטרנט שוב ​​ב-Android Studio, ייתכן שתתבקש שוב לקבל את ההרשאה.

הַרשָׁמָה

העתק את הקוד הזה לפונקציה הראשית מתחת להערה TODO: Register with FCM כדי להירשם ב-FCM. הקריאה getToken מחזירה אסימון רישום שיכול לשמש את שרת האפליקציה או סביבת השרת המהימנה כדי לשלוח הודעות למשתמשים.

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

הערה: הקוד לעיל מיועד למטרות הדגמה בלבד. בנסיבות רגילות:

• אפליקציה בדרך כלל מבקשת אסימון רישום כאשר משתמש מפעיל פעולה. אין לבקש אסימון במהלך הפעלת האפליקציה, מכיוון שהיא מבצעת שיחת חסימה ל-FCM שעלולה להימשך זמן מה.
• אפליקציה שולחת את האסימון לשרת האפליקציה, שבדרך כלל מחזיק אותו בחנות. מאוחר יותר שרת האפליקציה מאחזר את האסימון מהחנות ומשתמש בו כדי לטפל בהודעות שנשלחו למשתמש.

בסרגל הכלים של Android Studio, בחר מכשיר אנדרואיד והפעל את האפליקציה. במסוף Android Studio, אסימון הרישום מודפס כך:

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

העתק אותו לעורך טקסט, מכיוון שתשתמש בו לשליחת הודעות מאוחר יותר.

הערה : אם אתה נתקל בשגיאה הבאה, עליך לבצע את ההוראות לאחר הודעת השגיאה ולציין minSdkVersion גבוה יותר (למשל, 19) בקובץ android/app/build.gradle בספריית הפרויקט.

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

שלבים נוספים לקבלת הודעות באינטרנט

אפליקציות אינטרנט זקוקות לשני שלבים נוספים כדי לקבל את אסימון הרישום ולהאזין להודעות נכנסות. האינטרנט צריך להעביר מפתח VAPID ל- getToken כדי לאשר שליחת בקשות לשירותי דחיפה נתמכים באינטרנט.

ראשית, פתח את הכרטיסייה Cloud Messaging של פרויקט Firebase ב-Firebase Console, גלול מטה לקטע תצורת האינטרנט כדי למצוא את צמד המפתחות הקיים, או צור זוג מפתחות חדש. לחץ על הכפתור המודגש כדי להעתיק את המפתח כדי שיוכל לשמש כמפתח vapid.

לאחר מכן, החלף את קוד הרישום בקטע הרשמה בקוד זה ולאחר מכן עדכן את vapidKey:

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

לאחר מכן, צור קובץ firebase-messaging-sw.js מתחת לספריית web/ בשורש הפרויקט שלך. העתק את הדברים הבאים ל- firebase-messaging-sw.js כדי לאפשר לאפליקציית האינטרנט לקבל אירועי onMessage . ראה הגדרת אפשרויות הודעות ב-Service Worker למידע נוסף.

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

לאחר מכן, תחת הגדרות פרויקט -> כרטיסייה כללי , גלול מטה ומצא את ה- Web App , העתק את קטע הקוד של firebaseConfig והדבק אותו ב- firebase-messaging-sw.js .

לבסוף, בסרגל הכלים של Android Studio, בחר Chrome (web) בבורר היעד והפעל את האפליקציה. במסוף Android Studio, אסימון הרישום מודפס כך:

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

העתק את אסימון הרישום לעורך טקסט כדי שתוכל להשתמש בו כדי לשלוח הודעות מאוחר יותר.

שלבים נוספים לקבלת הודעות ב-iOS

כדי לקבל הודעות מ-FCM, מכשירי iOS צריכים להפעיל הודעות דחיפה ומצבי רקע ב-Xcode:

1. ב-Android Studio, לחץ לחיצה ימנית על שם הפרויקט ולאחר מכן בחר Flutter -> פתח מודול iOS ב-Xcode .
2. לאחר השקת Xcode, הפעל הודעות דחיפה ומצבי רקע בכרטיסייה חתימה ויכולות עבור יעד הפרויקט. ראה הגדרת האפליקציה שלך למידע נוסף.
3. בסרגל הכלים של Android Studio, בחר מכשיר iOS בבורר היעד והפעל את האפליקציה. לאחר מתן הרשאת ההודעה, אסימון הרישום מודפס במסוף Android Studio.

מזל טוב, רשמת בהצלחה את האפליקציה שלך ב-FCM. אתה מוכן לקבל הודעות, כמתואר בסעיף הבא.

5. קבלת הודעות מ-FCM

הגדר מטפלי הודעות

האפליקציה צריכה לטפל באירועי onMessage כאשר הודעות מגיעות כשהאפליקציה נמצאת במצב חזית, ואירועי onBackgroundMessage כאשר האפליקציה נמצאת ברקע.

מטפל בהודעות בחזית

ראשית, הוסף בקר זרם לאחר ההערה TODO: Add stream controller בקובץ main.dart על מנת להעביר הודעות מהמטפל באירועים לממשק המשתמש.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

כדי להוסיף את התלות rxdart, הפעל את הפקודה הזו מספריית הפרויקט: flutter pub add rxdart .

לאחר מכן, הפעל את כלים -> Flutter -> Flutter Pub קבל ב-Android Studio כדי לטעון את החבילה rxdart.dart ולהציג את הקוד עם הגדרות Intellisense המתאימות ב-Android Studio.

לאחר מכן, הוסף מטפל באירועים כדי להאזין להודעות חזית לאחר ההערה TODO: Set up foreground message handler . הוא מדפיס יומנים ומפרסם את ההודעה לבקר הזרם.

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

לאחר מכן, החלף את יישומון ה-State המקורי בקובץ main.dart בקוד זה, אשר מוסיף מנוי לבקר הזרם בווידג'ט ה-State ומציג את ההודעה האחרונה בווידג'ט.

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

מטפל בהודעות רקע עבור אנדרואיד/iOS

הודעות מטופלות על ידי המטפל onBackgroundMessage כשהאפליקציה נמצאת ברקע. המטפל צריך להיות פונקציה ברמה העליונה. ניתן לעדכן את ממשק המשתמש כאשר האפליקציה מובאת לקדמת הבמה על ידי טיפול בהודעות (ראה טיפול באינטראקציה ) או סנכרון עם שרת האפליקציה.

צור את פונקציית המטפל לאחר ההערה TODO: Define the background message handler מחוץ לפונקציה הראשית וקרא לו בפונקציה הראשית לאחר ההערה TODO: Set up background message handler .

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

מטפל בהודעות רקע עבור אינטרנט

החל מגרסה 11.2.8 של Firebase_messaging של FlutterFire, טיפול בהודעות רקע בפלטפורמות מבוססות אינטרנט דורש זרימה שונה. לכן, עליך להוסיף מטפל הודעות נפרד ב-service worker web/firebase-messaging-sw.js .

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

הגדר את שרת האפליקציות

1. ייבא את קוד השרת המתחיל על ידי פתיחת פרויקט https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server ב-Android Studio. השרת הוא פרויקט Java מבוסס Gradle עם תלות ב- firebase-admin SDK, המספק פונקציונליות של שליחת הודעות FCM.
2. הגדר חשבון Firebase Service שמאפשר ל-Firebase Admin SDK לאשר קריאות לממשקי FCM API. פתח את הגדרות הפרויקט במסוף Firebase ובחר בכרטיסייה חשבונות שירות . בחר 'Java' ולחץ על Generate new private key כדי להוריד את קטע התצורה.
3. שנה את שם הקובץ ל- service-account.json והעתק אותו לנתיב src/main/resources של פרויקט השרת.

שלח הודעת בדיקה

בקובץ FcmSender.java , sendMessageToFcmRegistrationToken מרכיב הודעת התראה עם מטען נתונים. אסימון הרישום מכוון למופע האפליקציה שאליו נשלחת ההודעה.

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }

1. העתק את אסימון הרישום של אנדרואיד שהועתק מקטע הרישום, והדבק אותו לערך עבור המשתנה registrationToken .
2. לחץ על הפעל להפעיל את הפונקציה הראשית ולשלוח את ההודעה למשתמש דרך FCM.

כאשר אפליקציית אנדרואיד נמצאת ברקע, ההודעה מופיעה במגש ההתראות.

כאשר אפליקציית Android נמצאת בחזית, תראה יומן בקונסולת Android Studio: "טיפול בהודעה בחזית". תוכן ההודעה מוצג גם ב-UI מכיוון שה-UI מנוי על בקר הזרם עבור הודעות חדשות.

אם תדביק את אסימון הרישום ותשלח את ההודעה משרת האפליקציות או מסביבת שרת מהימנה אחרת, תראה התנהגות דומה:

• כאשר אפליקציית האינטרנט נמצאת ברקע (כלומר, כאשר היא מוסתרת על ידי חלון אחר או כשכרטיסייה אחרת פעילה), תראה הודעת אינטרנט.

• כאשר אפליקציית האינטרנט נמצאת בחזית, תוכל להציג את היומן ב-Chrome Console על ידי לחיצה ימנית על האינטרנט ובחירה באפשרות Inspect . תוכן ההודעה מוצג גם בממשק המשתמש.

6. שלח הודעת נושא

תכונת ביטול הפלטפורמה של FCM HTTP v1 API מאפשרת לבקשת שליחת הודעה להתנהגויות שונות בפלטפורמות שונות. מקרה שימוש אחד של תכונה זו הוא הצגת תוכן שונה של הודעות התראה על סמך הפלטפורמה. התכונה נמצאת בשימוש המלא ביותר בעת מיקוד למכשירים מרובים (שעשויים להשתרע על פני מספר פלטפורמות) עם העברת הודעות בנושא. חלק זה מנחה אותך בשלבים כדי לגרום לאפליקציה שלך לקבל הודעת נושא מותאמת אישית לכל פלטפורמה.

הירשם לנושא מהלקוח

כדי להירשם לנושא, התקשר לשיטת messaging.subscribeToTopic בסוף הפונקציה הראשית בקובץ main.dart של אפליקציית Flutter.

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[אופציונלי] הירשם לנושא מהשרת לאינטרנט

אתה יכול לדלג על סעיף זה אם אתה לא מפתח בפלטפורמת האינטרנט.

ה-SDK של FCM JS אינו תומך כרגע בהרשמה לנושא בצד הלקוח. במקום זאת, אתה יכול להירשם באמצעות ה-API לניהול נושאים בצד השרת של Admin SDK. קוד זה ממחיש מנוי לנושא בצד השרת עם Java Admin SDK.

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

פתח את שרת האפליקציה ולחץ על הפעל כדי להפעיל את הפונקציה הראשית בקובץ FcmSubscriptionManager.java :

שלח הודעה עם ביטול פלטפורמה לנושא

עכשיו אתה מוכן לשלוח הודעת ביטול של פלטפורמת נושא. בקטע הקוד הבא:

• אתה בונה בקשת שליחה עם הודעת בסיס וכותרת " A new app is available ".
• ההודעה מייצרת הודעת תצוגה עם הכותרת " A new app is available " ב-iOS ובפלטפורמות אינטרנט.
• ההודעה מייצרת הודעת תצוגה עם הכותרת " A new Android app is available " במכשירי אנדרואיד.

private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

בפונקציה הראשית של הקובץ FcmSender.java , בטל את ההערה sendMessageToFcmTopic(); . לחץ על הפעל כדי לשלוח את הודעת הנושא.

7. סיכום ומה הלאה

לסיכום, למדת על פיתוח אפליקציות מרובות פלטפורמות באמצעות Flutter ו-FCM, הכוללת הגדרת סביבה, אינטגרציה של תלות וקבלת ושליחת הודעות. כדי לצלול לעומק, עיין בחומרים הבאים:

Codelabs

• למידע נוסף על האופן שבו Flutter עובד עם מוצרי Firebase אחרים, כולל אימות משתמשים ונתוני סנכרון, ראה היכרות עם Firebase for Flutter .
• למידע נוסף על FCM, כולל הודעות ונושאים בתוך האפליקציה: השתמש ב-FCM וב-FIAM כדי לשלוח הודעות למשתמשים ובהודעת הדחיפה הראשונה שלך ב-FCM באמצעות נושאי FCM

הפניות

• אתר Firebase
• אתר פלאטר
• ווידג'טים של FlutterFire Firebase Flutter
• ערוץ YouTube של Firebase
• ערוץ יוטיוב פלאטר