דף זה תורגם על ידי Cloud Translation API.

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

1. מבוא

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

בשיעור הזה תלמדו איך לפתח אפליקציה חוצת פלטפורמות עם העברת הודעות בענן ב-Firebase ‏ (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 Developer ומכשיר macOS עם XCode מותקן.

2. הגדרה של Flutter

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

כדי להגדיר סביבת פיתוח של Flutter:

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

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

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

סרגל כלים של Android Studio עם חץ מודגש של תפריט נפתח של יעד בנייה.

לוחצים על Run לחצן ההפעלה ב-Android Studio כדי להפעיל את האפליקציה.

ממשק המשתמש של אפליקציית הדגמה של Flutter שהופעלה

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

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

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

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

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

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

נכנסים למסוף Firebase באמצעות חשבון Google.
לוחצים על הלחצן כדי ליצור פרויקט חדש, ואז מזינים שם לפרויקט (לדוגמה, fcm4flutter).
שם הפרויקט הזה משמש כשם לתצוגה בממשקי Firebase, ומערכת Firebase יוצרת באופן אוטומטי מזהה פרויקט ייחודי על סמך שם הפרויקט הזה. שימו לב: בשלב הזה אפשר ללחוץ על סמל העריכה כדי להגדיר את מזהה הפרויקט המועדף, אבל אי אפשר לשנות את המזהה הזה אחרי יצירת הפרויקט.

חשוב לזכור את מזהה הפרויקט, כי תצטרכו אותו בהמשך כדי לזהות את פרויקט Firebase ב-Firebase CLI. אם שכחתם את המזהה, תמיד תוכלו למצוא אותו בהמשך בהגדרות הפרויקט.
לוחצים על המשך.
אם מוצגת בקשה לעשות זאת, קוראים ומאשרים את התנאים של Firebase, ואז לוחצים על המשך.
(אופציונלי) מפעילים את העזרה מבוססת-AI במסוף Firebase (שנקראת Gemini ב-Firebase).
ב-codelab הזה לא צריך להשתמש ב-Google Analytics, ולכן משביתים את האפשרות Google Analytics.
לוחצים על יצירת פרויקט, מחכים שהפרויקט יוקצה ולוחצים על המשך.

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

הגדרת Firebase CLI

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

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

firebase login

הגדרת FlutterFire

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

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

צילום מסך חלקי של מסוף Firebase שבו מוצגות האפליקציות שנוצרו לפלטפורמות שנבחרו

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

הגדרה של Cloud Messaging ל-iOS

עוברים לדף המפתחים של Apple ולוחצים על Create a key (יצירת מפתח) בכרטיסייה Keys (מפתחות).

צילום מסך חתוך של דף למפתחים של אפל, שבו מודגשים רכיבי הדף ליצירת מפתח

מזינים את השם של המפתח ומסמנים את האפשרות Apple Push Notifications services (APNs).
מורידים את קובץ המפתח עם סיומת הקובץ .p8.
ב-Firebase console, עוברים אל Project Settings (הגדרות הפרויקט) ובוחרים בכרטיסייה Cloud Messaging.

צילום מסך חתוך של דף במסוף Firebase, שבו מודגשים הרכיבים לעדכון הגדרות הפרויקט

צילום מסך חתוך של דף במסוף Firebase, שבו מודגשת הכרטיסייה Cloud Messaging

מעלים את קובץ המפתח של 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());
}

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

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

בקשת הרשאה

האפליקציה צריכה לבקש מהמשתמש הרשאה לקבלת התראות. השיטה 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) מתוך בורר היעד ומריצים שוב את האפליקציה.

צילום מסך חתוך של סרגל הכלים ב-Android Studio עם בורר היעד והלחצן 'הפעלה'

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

הרשמה

מעתיקים את הקוד הזה לפונקציה הראשית מתחת להערה 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');
}

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

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

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

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

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

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

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

צילום מסך חתוך של הרכיב Web Push Certificates (אישורי Web Push) בדף Web configuration (הגדרות אינטרנט) שבו מסומן צמד המפתחות

לאחר מכן, מחליפים את קוד הרישום בקטע Registration בקוד הזה ומעדכנים את 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

אחר כך, בקטע Project Settings (הגדרות הפרויקט) -> הכרטיסייה General (כללי), גוללים למטה ומאתרים את Web App (אפליקציית אינטרנט), מעתיקים את קטע הקוד firebaseConfig ומדביקים אותו ב-firebase-messaging-sw.js. צילום מסך חתוך של רכיב אפליקציית האינטרנט בדף ההגדרות של Firebase

לבסוף, בסרגל הכלים של 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 את האפשרויות Push Notifications (התראות פוש) ו-Background Modes (מצבי רקע) ב-Xcode:

ב-Android Studio, לוחצים לחיצה ימנית על שם הפרויקט ואז בוחרים באפשרות Flutter -> Open iOS module in Xcode.
אחרי שמפעילים את Xcode, מפעילים את האפשרויות Push Notifications (התראות פוש) ו-Background Modes (מצבי רקע) בכרטיסייה Signing & Capabilities (חתימה ויכולות) של יעד הפרויקט. מידע נוסף זמין במאמר בנושא הגדרת האפליקציה.
בסרגל הכלים של Android Studio, בוחרים מכשיר iOS בכלי לבחירת יעד ומריצים את האפליקציה. אחרי שמאשרים את הרשאת ההתראה, אסימון הרישום מודפס במסוף של Android Studio.

צילום מסך חתוך של אפליקציית iOS שמבקשת הרשאה לשלוח התראות

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

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

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

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

Foreground message handler

קודם מוסיפים בקר של זרם אחרי ההערה 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.

לאחר מכן, מריצים את Tools -> Flutter -> Flutter Pub Get ב-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),
         ],
       ),
     ),
   );
 }
}

Background message handler for Android/iOS

הודעות מטופלות על ידי ה-handler‏ 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());
}

Background message handler for web

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

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

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

מייבאים את קוד השרת למתחילים על ידי פתיחת https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server project ב-Android Studio. השרת הוא פרויקט Java מבוסס-Gradle עם תלות ב-SDK‏ firebase-admin, שמספק פונקציונליות לשליחת הודעות FCM.
מגדירים חשבון שירות של Firebase שמאפשר ל-Firebase Admin SDK לאשר קריאות לממשקי FCM API. פותחים את הגדרות הפרויקט במסוף Firebase ובוחרים בכרטיסייה חשבונות שירות. בוחרים באפשרות Java ולוחצים על Generate new private key כדי להוריד את קטע ההגדרה.
משנים את שם הקובץ ל-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!!");
 }

מעתיקים את אסימון הרישום של Android שהועתק מהקטע Registration (רישום), ומדביקים אותו כערך של המשתנה registrationToken.
לוחצים על הפעלה כדי להפעיל את הפונקציה הראשית ולשלוח את ההודעה למשתמש דרך FCM.

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

צילום מסך חתוך של הודעה שמופיעה במגש ההתראות ב-Android

כשהאפליקציה ל-Android נמצאת בחזית, יומן הרישום ב-Android Studio Console יציג את ההודעה: "Handling a foreground message" (טיפול בהודעה בחזית). תוכן ההודעה מוצג גם בממשק המשתמש, כי ממשק המשתמש רשום לבקר הסטרימינג לקבלת הודעות חדשות.

צילום מסך חתוך של תוכן ההודעה שמוצג באפליקציית Android

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

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

צילום מסך חתוך של התראה מאתר שמוצגת בדפדפן Chrome

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

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

צילום מסך חתוך של סמל ההפעלה שמוצג לצד הפונקציה הראשית FcmSubscriptionManager.java ב-Android Studio

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

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

יוצרים בקשת שליחה עם הודעת בסיס וכותרת 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();. לוחצים על Run לחצן ההפעלה ב-Android Studio כדי לשלוח את ההודעה בנושא.

7. סיכום והשלבים הבאים

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

Codelabs

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