שלח וקבל התראות עבור אפליקציית 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.

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

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

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

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

לחץ על הפעל כפתור ההפעלה באנדרואיד סטודיו כדי להפעיל את האפליקציה.

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

מזל טוב! יצרת בהצלחה אפליקציית 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. לאחר יצירת הפרויקט, נווט אל הגדרות הפרויקט של הפרויקט על ידי לחיצה על סמל גלגל השיניים לצד סקירת פרויקט .

צילום מסך חתוך של Firebase Console המדגיש את הסמל של תפריט הגדרות הפרויקט ואת ה

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

צילום מסך חתוך של Firebase Console המדגיש את מזהה הפרויקט

מזל טוב! יצרת בהצלחה פרויקט 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 Console המציג את האפליקציות שנוצרו עבור הפלטפורמות שנבחרו

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

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

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

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

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

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

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

  1. העלה את קובץ מפתח APNs עבור אפליקציית iOS בכרטיסייה Cloud Messaging . הזן את מזהה מפתח APNs מהכרטיסייה Cloud Messaging ואת מזהה הצוות, אותו ניתן למצוא במרכז החברות של Apple. צילום מסך חתוך של דף Firebase Console המדגיש את הכפתורים להעלאת מפתח אימות APNs

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

בקש רשות

האפליקציה צריכה לבקש רשות מהמשתמש כדי לקבל התראות. שיטת 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 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 Console, גלול מטה לקטע תצורת האינטרנט כדי למצוא את צמד המפתחות הקיים, או צור זוג מפתחות חדש. לחץ על הכפתור המודגש כדי להעתיק את המפתח כדי שיוכל לשמש כמפתח vapid.

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

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

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

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

מזל טוב, רשמת בהצלחה את האפליקציה שלך ב-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 כדי להוריד את קטע התצורה. צילום מסך חתוך המדגיש את קטע התצורה של Admin SDK של רכיב חשבונות השירות בדף הגדרות הפרויקט
  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. צילום מסך חתוך של סמל ההפעלה המוצג לצד הפונקציה הראשית של FcmSender.java ב-Android Studio

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

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

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

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

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

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

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

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

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 :

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

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

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

  • אתה בונה בקשת שליחה עם הודעת בסיס וכותרת " 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

הפניות