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

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

1. מבוא

בשיעור הזה תלמדו איך לפתח אפליקציה חוצת-פלטפורמות עם העברת הודעות בענן ב-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. חשוב להתקין את הפלאגינים Flutter ו-Dart בעורך. בהמשך ה-codelab, תשתמשו ב-Android Studio.
משורת הפקודה, מריצים את הפקודה flutter doctor, שסורקת את ההגדרה ומציגה רשימה של תלות חסרה שצריך לתקן. פועלים לפי ההוראות כדי לתקן תלות חשובה שחסרה. שימו לב: יכול להיות שחלק מהתלויות לא יהיו נחוצות. לדוגמה, אם אתם לא מתכוונים לפתח ל-iOS, אז תלות חסרה ב-CocoaPods לא תהיה בעיה שמונעת את הפעולה.

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

מריצים את הפקודות הבאות כדי ליצור את אפליקציית Flutter, ואז עוברים לספרייה שלה:
```
flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter
cd fcmflutter
```
הערה: בפקודה flutter, צריך להזין את שם הדומיין של החברה בסדר הפוך לאפשרות --org ואת שם הפרויקט לאפשרות --project-name. שם הדומיין של החברה ושם הפרויקט משולבים כשם החבילה ל-Android (מזהה החבילה ל-iOS), ומשמשים לזיהוי ייחודי של אפליקציה.
ב-Android Studio, עוברים אל File -> Open (קובץ > פתיחה), מוצאים את הנתיב של אפליקציית Flutter ולוחצים על Open (פתיחה) כדי לפתוח את הפרויקט ב-Android Studio. קוד האפליקציה נמצא בקובץ lib/main.dart.
הערה: כדי להגדיר את נתיב Flutter SDK ב-Android Studio, פותחים את Preferences -> Language & Framework -> Flutter ובוחרים את נתיב ההתקנה של Flutter כנתיב SDK.
בסרגל הכלים של 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

פותחים את שורת הפקודה בפרויקט ב-Android Studio (View -> Tool Windows -> Terminal) ומריצים את הפקודות הבאות כדי להגדיר את 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_ID
```
מחליפים את PROJECT_ID במזהה של פרויקט Firebase שיצרתם בשלב הראשון. כדי לבחור את הפלטפורמות, משתמשים במקשי החיצים ובמקש הרווח. כדי להשתמש בפלטפורמות שמוגדרות כברירת מחדל, מקישים על 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
 // TODO: Subscribe to a topic

 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 שמוחזר מציין אם המשתמש העניק הרשאה.

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: "...",
 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, לוחצים על התיקייה ios בעץ קובצי הפרויקט ואז בוחרים באפשרות Tools -> Flutter -> Open iOS module in XCode (כלים > Flutter > פתיחת מודול iOS ב-XCode).
אחרי ש-Xcode מופעל, מפעילים את האפשרויות התראות פוש ומצבי רקע בכרטיסייה חתימה ויכולות של יעד הפרויקט. מידע נוסף מופיע במאמר בנושא הגדרת האפליקציה.
בסרגל הכלים של 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 ופותחים אותו ב-Android Studio כפרויקט חדש. השרת הוא פרויקט Java מבוסס-Gradle עם תלות ב-SDK‏ firebase-admin, שמספק פונקציונליות לשליחת הודעות FCM.
מגדירים חשבון שירות של Firebase שמאפשר ל-Firebase Admin SDK לאשר קריאות לממשקי FCM API. פותחים את הגדרות הפרויקט במסוף Firebase ובוחרים בכרטיסייה חשבונות שירות. בוחרים באפשרות Java ולוחצים על Generate new private key כדי להוריד את קטע ההגדרה.
משנים את שם הקובץ ל-service-account.json ומעתיקים אותו לנתיב 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.
לוחצים על Run כדי להפעיל את הפונקציה הראשית ולשלוח את ההודעה למשתמש דרך FCM.

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

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

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

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

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

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

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

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

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

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

כדי להירשם לנושא, מעתיקים את הקוד הזה לפונקציה הראשית מתחת לתגובה TODO: Subscribe to a topic:

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

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

כרגע, FCM JS SDK לא תומך בהרשמה לנושאים בצד הלקוח. במקום זאת, אפשר להירשם באמצעות API לניהול נושאים בצד השרת של Admin SDK. הקוד הזה בקובץ FcmSubscriptionManager.java ממחיש הרשמה לנושא בצד השרת באמצעות Java Admin SDK. חשוב להוסיף את טוקן הרישום של FCM לפני שמריצים את הפקודה:

 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 לשליחת הודעות למשתמשים ו הודעת פוש ראשונה לשידור לקבוצה באמצעות נושאים ב-FCM