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

1. מבוא

תאריך עדכון אחרון: 4 באפריל 2022

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

דרישות מוקדמות

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

מה תלמדו

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

מה צריך להכין

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

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

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

אופציונלי: כדי להריץ את ה-Codelab בפלטפורמת iOS, צריך מכשיר iOS, חשבון מפתח של Apple ומכשיר macOS שמותקן בו XCode.

2. הגדרת Flutter

אם כבר הגדרתם סביבת פיתוח של 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 משנה את שם הדומיין של החברה בסדר הפוך לאפשרות --org ואת שם הפרויקט לאפשרות --project-name. שם הדומיין של החברה ושם הפרויקט משולבים כשם החבילה ל-Android (מזהה החבילה ל-iOS), והם משמשים לזיהוי ייחודי של אפליקציה.

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

הערה: כדי להגדיר את הנתיב של Flutter SDK ב-Android Studio, פותחים את Preferences -> (העדפות ->) שפה מסגרת -> Flutter ובוחרים את נתיב ההתקנה של Flutter כנתיב ה-SDK.

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

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

כל הכבוד! יצרתם אפליקציית Flutter.

3. הגדרה של Firebase ו-FlutterFire

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

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

יוצרים פרויקט Firebase

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

1. אם יש לכם חשבון Google, פותחים את Firebase ונכנסים לחשבון Google. לאחר מכן לוחצים על כניסה למסוף.
2. במסוף Firebase, לוחצים על Add project (הוספת פרויקט). פועלים לפי ההוראות כדי ליצור פרויקט. אין לסמן את האפשרות הפעלת Google Analytics עבור הפרויקט הזה כי לא תשתמשו בה בפרויקט הזה.
3. אחרי יצירת הפרויקט, לוחצים על סמל גלגל השיניים לצד Project Overview (סקירה כללית של הפרויקט) כדי לעבור אל Project Settings (הגדרות הפרויקט).

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

כל הכבוד! יצרתם בהצלחה פרויקט Firebase.

הגדרת ה-CLI של Firebase

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

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

firebase login

הגדרת FlutterFire

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

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

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

הגדרה של העברת הודעות בענן ל-iOS

1. עוברים לדף developer של Apple ולוחצים על Create a key בכרטיסייה Keys.

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

5. מעלים את קובץ מפתח ה-APNs של האפליקציה ל-iOS בכרטיסייה העברת הודעות בענן. מזינים את מזהה מפתח ה-APN בכרטיסייה 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());
}

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

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

הערה: הקוד המלא של ה-Codelab הזה זמין בכתובת 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 ומפעילים את האפליקציה. במסוף 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 כדי לאשר בקשות שליחה לשירותי דחיפת נתונים נתמכים באינטרנט.

קודם כל פותחים את הכרטיסייה העברת הודעות בענן בפרויקט Firebase במסוף Firebase, גוללים למטה לקטע Web configuration (הגדרות אינטרנט) כדי למצוא את זוג המפתחות הקיים, או יוצרים זוג מפתחות חדש. לוחצים על הלחצן המודגש כדי להעתיק את המפתח, כדי שניתן יהיה להשתמש בו כ-vapidKey.

לאחר מכן, מחליפים את קוד הרישום בקטע 'רישום' בקוד הזה ומעדכנים את 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/ ברמה הבסיסית (root) של הפרויקט. כדי לאפשר לאפליקציית האינטרנט לקבל אירועים של onMessage, צריך להעתיק את הטקסט הבא אל firebase-messaging-sw.js. מידע נוסף זמין במאמר הגדרת אפשרויות התראות ב-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

לאחר מכן, בקטע Project Settings (הגדרות הפרויקט) -> הכרטיסייה כללי, גוללים למטה ומוצאים את אפליקציית האינטרנט, מעתיקים את קטע הקוד של 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, צריך להפעיל את ההתראות ואת המצבים ברקע ב-Xcode במכשירי iOS:

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

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

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

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

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

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

קודם כול, צריך להוסיף בקר סטרימינג אחרי התגובה TODO: Add stream controller בקובץ main.dart, כדי להעביר הודעות מה-handler של האירועים לממשק המשתמש.

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

כדי להוסיף את התלות rxdart, מריצים את הפקודה הבאה מתוך ספריית הפרויקט: flutter pub add rxdart.

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

לאחר מכן, מוסיפים רכיב handler של אירועים כדי להאזין להודעות בחזית אחרי התגובה 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);
 });

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

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),
         ],
       ),
     ),
   );
 }
}

טיפול בהודעות ברקע ל-Android או ל-iOS

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

יוצרים את פונקציית ה-handler אחרי התגובה 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());
}

handler של הודעות ברקע בדפדפן

החל מגרסה 11.2.8 של FlutterFire firebase_messaging, נדרש תהליך אחר לטיפול בהודעות ברקע בפלטפורמות מבוססות-אינטרנט. לכן צריך להוסיף handler נפרד להודעות ב-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, ותלוי ב-SDK של firebase-admin, שמספק פונקציונליות של שליחת הודעות FCM.
2. מגדירים חשבון שירות של Firebase שמאפשר ל-Firebase Admin SDK לאשר קריאות לממשקי API של FCM. פותחים את Project Settings (הגדרות הפרויקט) במסוף Firebase ובוחרים בכרטיסייה Service accounts (חשבונות שירות). בוחרים באפשרות Java ולוחצים על Generate new private key כדי להוריד את קטע הקוד של ההגדרות האישיות.
3. משנים את שם הקובץ ל-service-account.json ומעתיקים אותו לנתיב src/main/resources של פרויקט השרת.

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

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

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. מעתיקים את אסימון הרישום של Android שהועתק מהקטע 'רישום', ומדביקים אותו בערך של המשתנה registrationToken.
2. לוחצים על הפעלה כדי להריץ את הפונקציה הראשית ולשלוח את ההודעה למשתמש דרך FCM.

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

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

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

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

• כשאפליקציית האינטרנט פועלת בחזית, אפשר להציג את היומן במסוף Chrome. לשם כך, לוחצים לחיצה ימנית על האינטרנט ובוחרים באפשרות 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 ל-JavaScript לא תומך במינוי לנושאים מצד הלקוח. במקום זאת, אפשר להירשם באמצעות ממשק ה-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());
 }

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

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

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

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

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 ל-Flutter.
• לקבלת מידע נוסף על FCM, כולל העברת הודעות ונושאים בתוך האפליקציה, מומלץ לקרוא את המאמר שימוש ב-FCM וב-FIAM לשליחת הודעות למשתמשים והודעת ה-Multicast הראשונה שלך שכוללת שימוש בנושאי FCM

מקורות מידע

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