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

1. מבוא

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

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

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

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

מה תלמדו

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

מה צריך להכין

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

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

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

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

2. הגדרת Flutter

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

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

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

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

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

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

כל הכבוד! יצרתם אפליקציית 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 (הגדרות הפרויקט).

מזהה הפרויקט משמש לזיהוי ייחודי של הפרויקט, והוא עשוי להיות שונה משם הפרויקט. מזהה הפרויקט ישמש להגדרת 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. מגדירים את ה-CLI של FlutterFire: dart pub global activate flutterfire_cli
4. מגדירים את פרויקט Firebase ב-Flutter: flutterfire configure --project=fcm4flutter. משתמשים במקשי החיצים ובמקש הרווח כדי לבחור את הפלטפורמות, או לוחצים על Enter כדי להשתמש בפלטפורמות ברירת המחדל.

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

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

הגדרת Cloud Messaging ל-iOS

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

2. מזינים את השם של המפתח ומסמנים את האפשרות Apple Push Notifications services (APNs).
3. מורידים את קובץ המפתח, שיש לו סיומת הקובץ .p8.
4. במסוף Firebase, עוברים אל Project Settings (הגדרות הפרויקט) של הפרויקט ובוחרים בכרטיסייה 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());
}

לאחר מכן, מריצים את הפקודה Tools -> Flutter -> Flutter Pub Get ב-Android Studio כדי לטעון את החבילות שנוספו בקטע הגדרת 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) מבורר היעד ומפעילים שוב את האפליקציה.

לאחר מכן, נפתחת כרטיסייה ב-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');
}

בסרגל הכלים של 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]

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

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

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

לסיום, בסרגל הכלים של 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 -> Open iOS module in Xcode.
2. אחרי הפעלת Xcode, מפעילים את האפשרויות התראות דחיפה ומצבי רקע בכרטיסייה Signing & Capabilities (חתימה ויכולות) של היעד של הפרויקט. מידע נוסף זמין במאמר הגדרת האפליקציה.
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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Codelabs

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

מקורות מידע

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