با استفاده از Firebase Cloud Messaging، اعلان‌های یک برنامه Flutter را ارسال و دریافت کنید

1. مقدمه

آخرین به روز رسانی : 04-04-2022

این آزمایشگاه کد شما را در فرآیند توسعه یک برنامه چند پلتفرمی با Firebase Cloud Messaging (FCM) با استفاده از Flutter راهنمایی می‌کند. شما یک قطعه از پیاده سازی برنامه را می نویسید و سپس آن را به طور یکپارچه روی سه پلتفرم اندروید، iOS و وب می سازید و اجرا می کنید. همچنین نحوه ادغام FCM در فلاتر و نحوه نوشتن کد برای دریافت و ارسال پیام را خواهید آموخت. در نهایت، Codelab ویژگی بلوک‌های مخصوص پلتفرم FCM HTTP v1 API را معرفی می‌کند که به شما امکان می‌دهد یک پیام ارسال کنید که رفتارهای متفاوتی در پلتفرم‌های مختلف دارد.

پیش نیاز

درک اولیه فلاتر.

چیزی که یاد خواهید گرفت

  • نحوه راه اندازی و ایجاد یک برنامه Flutter.
  • نحوه اضافه کردن وابستگی های FCM
  • نحوه ارسال پیام های تک FCM به برنامه
  • نحوه ارسال پیام های موضوعی FCM به برنامه

آنچه شما نیاز دارید

شما می توانید کدلب را با استفاده از هر یک از دستگاه های زیر اجرا کنید:

در صورت تمایل، برای اجرای کد لبه با استفاده از پلتفرم iOS، به یک دستگاه iOS، یک حساب توسعه دهنده اپل و یک دستگاه macOS با XCode نصب شده نیاز دارید.

2. راه اندازی فلوتر

اگر قبلاً یک محیط توسعه Flutter راه‌اندازی کرده‌اید، از این بخش صرفنظر کنید.

برای راه اندازی یک محیط توسعه Flutter، این مراحل را دنبال کنید:

  1. Flutter را برای سیستم عامل خود دانلود و نصب کنید: Install | بال زدن
  2. مطمئن شوید که ابزار Flutter به مسیر شما اضافه شده است.
  3. همانطور که در Set up an editor | نشان داده شده است ویرایشگر خود را برای 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 تغییر دهید.
  1. در Android Studio، به File -> Open بروید، مسیر برنامه Flutter خود را پیدا کنید و سپس روی Open کلیک کنید تا پروژه در Android Studio باز شود. کد برنامه در فایل lib/main.dart قرار دارد.

در نوار ابزار Android Studio، برای انتخاب یک دستگاه Android، روی فلش رو به پایین کلیک کنید. اگر انتخابگر هدف خالی است، اگر ترجیح می‌دهید برنامه را از یک مرورگر وب یا دستگاه iOS اجرا کنید، دستگاه‌های اندروید مجازی یا مرورگر Chrome یا شبیه‌ساز iOS را نصب کنید. ممکن است لازم باشد دستگاه را به صورت دستی راه اندازی کنید و لیست را برای پیدا کردن دستگاه مورد نظر بازخوانی کنید.

نوار ابزار Android Studio با پیکان کشویی منوی هدف ساخت برجسته شده است.

روی Run کلیک کنید دکمه اجرا در اندروید استودیو برای راه اندازی برنامه

رابط کاربری یک برنامه آزمایشی راه اندازی شده Flutter

تبریک می گویم! شما با موفقیت یک برنامه Flutter ایجاد کردید.

3. راه اندازی Firebase و FlutterFire

برای توسعه برنامه ای که با Firebase Cloud Messaging با استفاده از Flutter یکپارچه می شود، به موارد زیر نیاز دارید:

  • پروژه Firebase
  • یک Firebase CLI در حال کار.
  • نصب FlutterFire.
  • برنامه ای که با flutterfire configure پیکربندی و تولید شده است.

پروژه Firebase خود را ایجاد کنید

اگر قبلا یک پروژه Firebase دارید، می توانید از این مرحله صرف نظر کنید.

  1. اگر یک حساب Google دارید، Firebase را باز کنید و با حساب Google خود وارد شوید و سپس روی Go to console کلیک کنید.
  2. در کنسول Firebase، روی افزودن پروژه کلیک کنید. دستورالعمل ها را برای ایجاد یک پروژه دنبال کنید. فعال کردن Google Analytics را برای این پروژه تیک نزنید زیرا از آن در این پروژه استفاده نخواهید کرد.
  3. پس از ایجاد پروژه، با کلیک بر روی نماد چرخ دنده در کنار نمای کلی پروژه، به تنظیمات پروژه بروید.

یک اسکرین شات برش خورده از Firebase Console که نماد منوی تنظیمات پروژه و

شناسه پروژه برای شناسایی منحصر به فرد پروژه استفاده می شود و ممکن است با نام پروژه متفاوت باشد. شناسه پروژه بعداً برای تنظیم FlutterFire استفاده خواهد شد.

یک اسکرین شات برش خورده از کنسول Firebase که شناسه پروژه را برجسته می کند

تبریک می گویم! شما با موفقیت یک پروژه Firebase ایجاد کردید.

Firebase CLI را راه اندازی کنید

اگر Firebase CLI را راه‌اندازی کرده‌اید، می‌توانید از این مرحله صرفنظر کنید.

برای دانلود و نصب Firebase CLI به مرجع Firebase CLI بروید. با اکانت گوگل خود با دستور زیر وارد Firebase شوید: 

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 را فشار دهید.

این کد لبه از پلتفرم های پیش فرض (اندروید، iOS و وب) استفاده می کند، اما شما می توانید تنها یک یا دو پلتفرم را انتخاب کنید. اگر شناسه بسته iOS از شما خواسته شد، com.flutter.fcm.fcmflutter یا شناسه بسته iOS خود را در قالب [company domain name].[project name] وارد کنید. پس از تکمیل دستور، صفحه کنسول Firebase را رفرش کنید. خواهید دید که برنامه هایی را برای پلتفرم های انتخابی تحت پروژه Firebase ایجاد کرده است.

یک اسکرین شات برش خورده از کنسول Firebase که برنامه های ایجاد شده را برای پلتفرم های انتخاب شده نشان می دهد

این دستور یک فایل firebase_options.dart را در زیر دایرکتوری lib ایجاد می کند که شامل تمام گزینه های مورد نیاز برای مقداردهی اولیه است.

Cloud Messaging را برای iOS تنظیم کنید

  1. به صفحه توسعه دهنده اپل بروید و روی گزینه Create a key در تب Keys کلیک کنید.

یک اسکرین شات برش خورده از صفحه برنامه‌نویس اپل که اجزای صفحه را برای ایجاد کلید برجسته می‌کند

  1. نام کلید را وارد کنید و خدمات Apple Push Notifications (APNs) را بررسی کنید. یک اسکرین شات برش خورده از صفحه برنامه‌نویس اپل که کادر متنی نام کلید جدید را برجسته می‌کند
  2. فایل کلید را دانلود کنید که دارای پسوند فایل .p8 است. یک اسکرین شات برش خورده از صفحه توسعه دهنده اپل که دکمه دانلود یک کلید را برجسته می کند
  3. در کنسول Firebase ، به تنظیمات پروژه پروژه بروید و برگه Cloud Messaging را انتخاب کنید.

یک اسکرین شات برش خورده از صفحه کنسول Firebase که اجزای مربوط به تنظیمات پروژه را به‌روزرسانی می‌کند

یک اسکرین شات برش خورده از صفحه Firebase Console که برگه Cloud Messaging را برجسته می کند

  1. فایل کلید APN را برای برنامه iOS در برگه Cloud Messaging آپلود کنید. شناسه کلید APN را از برگه پیام‌رسانی ابری و شناسه تیم را وارد کنید که می‌توانید آن را در مرکز عضویت اپل بیابید. یک اسکرین شات برش خورده از صفحه کنسول Firebase که دکمه‌های آپلود کلید احراز هویت APN را برجسته می‌کند.

4. آماده سازی FCM

قبل از اینکه یک برنامه بتواند پیام‌هایی از FCM دریافت کند، باید:

  • FlutterFire را راه اندازی کنید.
  • درخواست مجوزهای اطلاع رسانی
  • برای دریافت رمز ثبت نام در FCM ثبت نام کنید.

مقداردهی اولیه

برای مقداردهی اولیه سرویس، تابع main ( 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 بازگشتی به شما می گوید که آیا کاربر مجوز داده است یا خیر. توصیه می‌کنیم فقط زمانی درخواست مجوز کنید که کاربر نیاز به استفاده از ویژگی‌ای داشته باشد که به دسترسی نیاز دارد (مثلاً وقتی کاربر اعلان‌ها را در تنظیمات برنامه روشن می‌کند). در این کد لبه، ما برای سادگی راه‌اندازی برنامه را درخواست می‌کنیم.

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}');
 }

سپس، در نوار ابزار اندروید استودیو، Chrome (web) از انتخابگر هدف انتخاب کنید و سپس دوباره برنامه را اجرا کنید.

یک اسکرین شات برش خورده از نوار ابزار Android Studio با انتخابگر هدف و دکمه Run

سپس، یک برگه کروم با یک پنجره بازشو راه اندازی می شود که درخواست مجوز می کند. اگر روی Allow کلیک کنید، یک گزارش در کنسول Android Studio مشاهده خواهید کرد: Permission granted: AuthorizationStatus.authorized . پس از اینکه درخواست مجوز را مجاز یا مسدود کردید، پاسخ شما همراه با برنامه شما در مرورگر ذخیره می شود و پنجره بازشو دوباره نمایش داده نمی شود. توجه داشته باشید که وقتی دوباره برنامه وب را در اندروید استودیو اجرا می‌کنید، ممکن است دوباره مجوز از شما خواسته شود. یک اسکرین شات برش خورده از یک برگه کروم با یک پنجره بازشو که درخواست می کند

ثبت نام

این کد را در تابع اصلی زیر نظر TODO: Register with 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، یک دستگاه اندرویدی را انتخاب کرده و برنامه را اجرا کنید. در کنسول اندروید استودیو، توکن ثبت نام به صورت زیر چاپ می شود:

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 باز کنید، به بخش تنظیمات وب بروید تا جفت کلید موجود را پیدا کنید، یا یک جفت کلید جدید ایجاد کنید. روی دکمه هایلایت شده کلیک کنید تا کلید را کپی کنید تا بتوان از آن به عنوان vapidKey استفاده کرد.

تصویری برش خورده از مؤلفه 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 را دریافت کند. برای اطلاعات بیشتر به تنظیمات گزینه‌های اعلان در سرویس‌کار مراجعه کنید.

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

پس از آن، در قسمت تنظیمات پروژه -> برگه عمومی ، به پایین بروید و برنامه وب را پیدا کنید، بخش کد firebaseConfig کپی کرده و آن را در firebase-messaging-sw.js قرار دهید. تصویری برش خورده از مؤلفه Web App در صفحه پیکربندی Firebase

در نهایت، در نوار ابزار اندروید استودیو، Chrome (web) در انتخابگر هدف انتخاب کنید و برنامه را اجرا کنید. در کنسول اندروید استودیو، توکن ثبت نام به صورت زیر چاپ می شود:

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. در اندروید استودیو، روی نام پروژه کلیک راست کرده و سپس Flutter -> Open iOS module در Xcode را انتخاب کنید. یک اسکرین شات برش خورده از
  2. پس از راه اندازی Xcode، Push Notifications و Background Modes را در برگه Signing & Capabilities برای هدف پروژه فعال کنید. برای اطلاعات بیشتر به پیکربندی برنامه خود مراجعه کنید.
  3. در نوار ابزار Android Studio، یک دستگاه iOS را در انتخابگر هدف انتخاب کنید و برنامه را اجرا کنید. پس از اعطای مجوز اعلان، رمز ثبت نام در کنسول Android Studio چاپ می شود.

یک اسکرین شات برش خورده از یک برنامه iOS که درخواست مجوز برای ارسال اعلان دارد

تبریک می‌گوییم، شما با موفقیت برنامه خود را در FCM ثبت کردید. همانطور که در بخش بعدی توضیح داده شد، آماده دریافت پیام ها هستید.

5. دریافت پیام از FCM

کنترل کننده های پیام را تنظیم کنید

وقتی برنامه در حالت پیش‌زمینه است، برنامه باید رویدادهای onMessage مدیریت کند و زمانی که برنامه در پس‌زمینه است، پیام‌ها را onBackgroundMessage .

کنترل کننده پیام پیش زمینه

ابتدا یک کنترل‌کننده جریانی را بعد از نظر TODO: Add stream controller در فایل main.dart اضافه کنید تا پیام‌ها را از کنترل‌کننده رویداد به UI ارسال کنید.

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 را در اندروید استودیو اجرا کنید تا بسته rxdart.dart بارگیری شود و کد را با تنظیمات Intellisense مناسب در اندروید استودیو نمایش دهید.

سپس، برای گوش دادن به پیام های پیش زمینه پس از نظر، یک کنترل کننده رویداد اضافه کنید. 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),
         ],
       ),
     ),
   );
 }
}

کنترل کننده پیام پس زمینه برای 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());
}

کنترل کننده پیام پس زمینه برای وب

از FlutterFire firebase_messaging نسخه 11.2.8، مدیریت پیام‌های پس‌زمینه در پلتفرم‌های مبتنی بر وب به جریان متفاوتی نیاز دارد. بنابراین، باید یک کنترل کننده پیام جداگانه در سرویس 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، کد سرور شروع را وارد کنید. سرور یک پروژه جاوا مبتنی بر Gradle با وابستگی به firebase-admin SDK است که قابلیت ارسال پیام FCM را فراهم می کند.
  2. یک حساب سرویس Firebase راه‌اندازی کنید که به Firebase Admin SDK اجازه می‌دهد تماس‌ها با APIهای FCM را مجاز کند. تنظیمات پروژه را در کنسول Firebase باز کنید و برگه حساب‌های سرویس را انتخاب کنید. جاوا را انتخاب کنید و برای دانلود قطعه پیکربندی روی 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. روی Run کلیک کنید دکمه اجرا در اندروید استودیو برای اجرای تابع اصلی و ارسال پیام به کاربر از طریق FCM. یک اسکرین شات برش خورده از نماد Run که در کنار تابع اصلی FcmSender.java در Android Studio نشان داده شده است.

وقتی برنامه اندروید در پس‌زمینه است، پیام در سینی اعلان‌ها ظاهر می‌شود.

یک اسکرین شات برش خورده از پیامی که در سینی اعلان اندروید ظاهر می شود

هنگامی که برنامه اندروید در پیش زمینه باشد، یک گزارش در کنسول Android Studio مشاهده خواهید کرد: "Handling a foreground message". محتوای پیام نیز در رابط کاربری نمایش داده می‌شود زیرا رابط کاربری برای پیام‌های جدید در کنترل‌کننده جریان مشترک است.

تصویری برش خورده از محتوای پیام نمایش داده شده در برنامه Android

اگر رمز ثبت نام را جایگذاری کنید و پیام را از سرور برنامه یا سایر محیط های سرور قابل اعتماد ارسال کنید، رفتار مشابهی را مشاهده خواهید کرد:

  • هنگامی که برنامه وب در پس‌زمینه است (یعنی زمانی که توسط پنجره دیگری پنهان است یا برگه دیگری فعال است)، یک اعلان وب خواهید دید.

یک اسکرین شات برش خورده از یک اعلان وب که در مرورگر کروم نشان داده شده است

  • وقتی برنامه وب در پیش‌زمینه است، می‌توانید با کلیک راست روی وب و انتخاب 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);

[اختیاری] مشترک شدن در موضوعی از سرور برای وب

اگر روی پلتفرم وب توسعه نمی‌دهید، می‌توانید این بخش را نادیده بگیرید.

FCM JS SDK در حال حاضر از اشتراک موضوع سمت سرویس گیرنده پشتیبانی نمی کند. در عوض، می‌توانید با استفاده از 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 :

یک اسکرین شات برش خورده از نماد Run که در کنار عملکرد اصلی FcmSubscriptionManager.java در Android Studio نشان داده شده است.

به موضوعی پیامی با پلتفرم لغو s ارسال کنید

اکنون شما آماده ارسال پیام لغو پلت فرم موضوع هستید. در قطعه کد زیر:

  • شما یک درخواست ارسال با یک پیام پایه و عنوان " 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

مراجع