Firebase क्लाउड से मैसेज का इस्तेमाल करके, Flutter ऐप्लिकेशन के लिए सूचनाएं भेजें और पाएं

1. शुरुआती जानकारी

पिछली बार अपडेट किया गया: 04-04-2022

इस कोडलैब से, आपको Flutter का इस्तेमाल करके Firebase क्लाउड से मैसेज (FCM) करने में मदद करने वाले मल्टी-प्लैटफ़ॉर्म ऐप्लिकेशन बनाने की प्रक्रिया के बारे में जानकारी मिलती है. आपको ऐप्लिकेशन को लागू करने का एक तरीका लिखना होगा. इसके बाद, उसे तीन प्लैटफ़ॉर्म पर आसानी से बनाकर चलाना होगा: Android, iOS, और वेब. आपको यह भी पता चलेगा कि Flutter में FCM को इंटिग्रेट करने का तरीका क्या है. साथ ही, आपको मैसेज पाने और भेजने के लिए कोड लिखने का तरीका भी पता चलेगा. कोडलैब, FCM एचटीटीपी v1 API के प्लैटफ़ॉर्म के हिसाब से ब्लॉक करने की सुविधा देता है. इसकी मदद से, अलग-अलग प्लैटफ़ॉर्म पर अलग-अलग तरह के मैसेज भेजने की सुविधा मिलती है.

ज़रूरी शर्त

Flutter की बुनियादी जानकारी.

आपको इनके बारे में जानकारी मिलेगी

• Flutter ऐप्लिकेशन को सेट अप करने और बनाने का तरीका.
• FCM डिपेंडेंसी जोड़ने का तरीका.
• अपने ऐप्लिकेशन पर एक FCM मैसेज भेजने का तरीका.
• अपने ऐप्लिकेशन पर विषय के FCM मैसेज भेजने का तरीका.

आपको इन चीज़ों की ज़रूरत होगी

• Dart और Flutter प्लगिन के साथ कॉन्फ़िगर किए गए Android Studio का सबसे नया स्थिर वर्शन.

कोडलैब चलाने के लिए, इनमें से किसी भी डिवाइस का इस्तेमाल किया जा सकता है:

• आपके कंप्यूटर से कनेक्ट किया गया एक Android डिवाइस.
• Android एम्युलेटर (Android Emulator पर ऐप्लिकेशन चलाना देखें).
• आपकी पसंद का ब्राउज़र, जैसे कि Chrome.

इसके अलावा, iOS प्लैटफ़ॉर्म का इस्तेमाल करके कोडलैब चलाने के लिए, आपके पास iOS डिवाइस, Apple Developer खाता, और ऐसा macOS डिवाइस होना चाहिए जिसमें XCode इंस्टॉल किया गया हो.

2. Flutter का सेटअप

अगर आपने पहले से ही Flutter डेवलपमेंट एनवायरमेंट सेट अप किया हुआ है, तो इस सेक्शन को छोड़ दें.

Flutter डेवलपमेंट एनवायरमेंट को सेट अप करने के लिए यह तरीका अपनाएं:

1. अपने ऑपरेटिंग सिस्टम के लिए Flutter को डाउनलोड और इंस्टॉल करें: इंस्टॉल करें | फ़्लटर
2. पक्का करें कि आपके पाथ में Flutter टूल जोड़ा गया हो.
3. Flutter के लिए अपने एडिटर को सेट अप करना, जैसा कि एडिटर सेट अप करें | Flutter अपने एडिटर के लिए Flutter और Dart प्लगिन इंस्टॉल करना न भूलें. बाकी कोडलैब के लिए, Android Studio का इस्तेमाल किया जा रहा है.
4. कमांड लाइन से, flutter doctor चलाएं. यह आपके सेटअप को स्कैन करता है और उन सभी डिपेंडेंसी की सूची बनाता है जिन्हें ठीक करने की ज़रूरत है. किसी भी ज़रूरी डिपेंडेंसी को ठीक करने के लिए, निर्देशों का पालन करें. ध्यान दें कि ऐसा हो सकता है कि कुछ डिपेंडेंसी ज़रूरी न हों. उदाहरण के लिए, अगर आपको iOS के लिए ऐप्लिकेशन डेवलप नहीं करना है, तो CocoaPods की डिपेंडेंसी मौजूद न होने से, ब्लॉक करने की समस्या नहीं होगी.
5. fcmflutter डायरेक्ट्री flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter में अपना Flutter ऐप्लिकेशन बनाने के लिए यह निर्देश चलाएं. इसके बाद, डायरेक्ट्री को fcmflutter में बदलें.

ध्यान दें: flutter कमांड, विकल्प --org और विकल्प --project-name के लिए प्रोजेक्ट के नाम को कंपनी के डोमेन नाम से उलटा क्रम में ले जाता है. कंपनी का डोमेन नाम और प्रोजेक्ट का नाम, Android के पैकेज के नाम (iOS के लिए बंडल आईडी) के तौर पर जोड़ दिए जाते हैं. इनका इस्तेमाल, किसी ऐप्लिकेशन की खास तरह से पहचान करने के लिए किया जाता है.

6. Android Studio में, फ़ाइल -> खोलें, अपने Flutter ऐप्लिकेशन का पाथ ढूंढें. इसके बाद, प्रोजेक्ट को Android Studio में खोलने के लिए खोलें पर क्लिक करें. ऐप्लिकेशन कोड फ़ाइल lib/main.dart में है.

ध्यान दें: Android Studio में Flutter SDK टूल पाथ सेट अप करने के लिए, प्राथमिकताएं -> खोलें भाषा और फ़्रेमवर्क -> Flutter को चुनें और SDK टूल के पाथ के रूप में Flutter इंस्टॉल करने के पाथ को चुनें.

Android Studio के टूलबार पर, कोई Android डिवाइस चुनने के लिए डाउन ऐरो पर क्लिक करें. अगर टारगेट सिलेक्टर खाली है, तो वर्चुअल Android डिवाइस या Chrome ब्राउज़र या iOS सिम्युलेटर इंस्टॉल करें. ऐसा तब करें, जब आपको किसी वेब ब्राउज़र या iOS डिवाइस से ऐप्लिकेशन लॉन्च करना हो. टारगेट किए गए डिवाइस को ढूंढने के लिए, हो सकता है कि आपको डिवाइस को मैन्युअल तरीके से लॉन्च करना पड़े और सूची को रीफ़्रेश करना पड़े.

ऐप्लिकेशन को लॉन्च करने के लिए, Run पर क्लिक करें.

बधाई हो! आपने Flutter ऐप्लिकेशन बना लिया है.

3. Firebase और FlutterFire को सेटअप करना

Flutter का इस्तेमाल करके Firebase क्लाउड से मैसेज करने की सुविधा के साथ इंटिग्रेट होने वाला ऐप्लिकेशन बनाने के लिए, आपको इनकी ज़रूरत होगी:

• एक Firebase प्रोजेक्ट.
• काम करने वाला Firebase सीएलआई.
• FlutterFire को इंस्टॉल करने की प्रोसेस.
• flutterfire configure के साथ कॉन्फ़िगर और जनरेट किया गया ऐप्लिकेशन.

अपना Firebase प्रोजेक्ट बनाना

अगर आपके पास पहले से Firebase प्रोजेक्ट है, तो इस चरण को छोड़ा जा सकता है.

1. अगर आपके पास Google खाता है, तो Firebase खोलें और अपने Google खाते से साइन इन करें. इसके बाद, कंसोल पर जाएं पर क्लिक करें.
2. Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें. प्रोजेक्ट बनाने के लिए निर्देशों का पालन करें. इस प्रोजेक्ट के लिए Google Analytics चालू करें को न चुनें, क्योंकि इसका इस्तेमाल इस प्रोजेक्ट में नहीं किया जाएगा.
3. प्रोजेक्ट बनाने के बाद, प्रोजेक्ट की खास जानकारी के बगल में मौजूद गियर आइकॉन पर क्लिक करके, प्रोजेक्ट की प्रोजेक्ट सेटिंग पर जाएं.

प्रोजेक्ट आईडी का इस्तेमाल प्रोजेक्ट की खास तरह से पहचान करने के लिए किया जाता है और यह प्रोजेक्ट के नाम से अलग हो सकता है. प्रोजेक्ट आईडी का इस्तेमाल, FlutterFire को बाद में सेट अप करने के लिए किया जाएगा.

बधाई हो! आपने Firebase प्रोजेक्ट बना लिया है.

Firebase सीएलआई सेट अप करना

अगर आपने Firebase सीएलआई को सेट अप किया है, तो इस चरण को छोड़ा जा सकता है.

Firebase सीएलआई को डाउनलोड और इंस्टॉल करने के लिए, Firebase सीएलआई के रेफ़रंस पर जाएं. नीचे दिए गए निर्देश की मदद से, अपने Google खाते से 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. Flutter पर Firebase प्रोजेक्ट कॉन्फ़िगर करें: flutterfire configure --project=fcm4flutter. प्लैटफ़ॉर्म चुनने के लिए ऐरो कुंजियों और स्पेस का इस्तेमाल करें या डिफ़ॉल्ट प्लैटफ़ॉर्म का इस्तेमाल करने के लिए Enter दबाएं.

यह कोडलैब डिफ़ॉल्ट प्लैटफ़ॉर्म (Android, iOS, और वेब) का इस्तेमाल करता है. हालांकि, आपके पास सिर्फ़ एक या दो प्लैटफ़ॉर्म चुनने का विकल्प होता है. अगर iOS बंडल आईडी के लिए कहा जाए, तो [company domain name].[project name] फ़ॉर्मैट में com.flutter.fcm.fcmflutter या अपना iOS बंडल आईडी डालें. निर्देश पूरा होने के बाद, Firebase कंसोल के पेज को रीफ़्रेश करें. आपको दिखेगा कि इसने Firebase प्रोजेक्ट के तहत चुने गए प्लैटफ़ॉर्म के लिए ऐप्लिकेशन बना लिए हैं.

यह निर्देश lib डायरेक्ट्री में एक firebase_options.dart फ़ाइल जनरेट करता है, जिसमें शुरू करने के लिए ज़रूरी सभी विकल्प शामिल होते हैं.

iOS के लिए क्लाउड से मैसेज सेट अप करना

1. Apple developer पेज पर जाएं और Keys टैब में Create a key पर क्लिक करें.

2. कुंजी का नाम डालें और Apple Push Notifications services (APNs) को चुनें.
3. वह कुंजी फ़ाइल डाउनलोड करें जिसमें .p8 फ़ाइल एक्सटेंशन हो.
4. Firebase कंसोल में, प्रोजेक्ट की प्रोजेक्ट सेटिंग पर जाएं और क्लाउड से मैसेज टैब चुनें.

5. क्लाउड से मैसेज टैब में, iOS ऐप्लिकेशन के लिए एपीएन कुंजी की फ़ाइल अपलोड करें. 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());
}

फिर टूल -> चलाएं फ़्लटर -> FlutterFire सेट अप करें में जोड़े गए पैकेज लोड करने और Android Studio में सही Intellisense सेटिंग के साथ कोड दिखाने के लिए, Android Studio में Flutter Pub Get का इस्तेमाल करें.

इससे मौजूदा प्लैटफ़ॉर्म DefaultFirebaseOptions.currentPlatform के लिए, FlutterFire को शुरू किया जाता है. इस प्लैटफ़ॉर्म को जनरेट की गई firebase_options.dart फ़ाइल से इंपोर्ट किया जाता है. ध्यान दें कि initializeApp एक एसिंक्रोनस फ़ंक्शन है और await कीवर्ड यह पक्का करता है कि ऐप्लिकेशन चलाने से पहले ही इनिशलाइज़ेशन पूरा हो जाए.

ध्यान दें: इस कोडलैब के लिए पूरा कोड, https://github.com/FirebaseExtended/firebase_fcm_flutter पर उपलब्ध है.

अनुमति मांगें

सूचनाएं पाने के लिए, ऐप्लिकेशन को उपयोगकर्ता की अनुमति लेनी होगी. firebase_messaging से requestPermission का दिया गया तरीका एक डायलॉग या पॉप-अप दिखाता है, जिसमें उपयोगकर्ता से अनुमति देने या अस्वीकार करने के लिए कहा जाता है.

पहले, इस कोड को 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) चुनें और ऐप्लिकेशन को फिर से चलाएं.

इसके बाद, एक Chrome टैब लॉन्च होता है, जिसमें अनुमति मांगने वाला पॉप-अप दिखता है. Allow पर क्लिक करने पर, आपको Android Studio कंसोल में लॉग दिखेगा: Permission granted: AuthorizationStatus.authorized. अनुमति के अनुरोध को अनुमति देने या ब्लॉक करने के बाद, आपका जवाब ब्राउज़र में आपके ऐप्लिकेशन के साथ सेव किया जाता है और पॉप-अप दोबारा नहीं दिखाया जाता है. ध्यान दें कि जब Android Studio पर वेब ऐप्लिकेशन को फिर से चलाया जाता है, तो आपको फिर से अनुमति मांगी जा सकती है. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

रजिस्ट्रेशन

FCM के साथ रजिस्टर करने के लिए, इस कोड को 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');
}

ध्यान दें: ऊपर दिया गया कोड सिर्फ़ दिखाने के लिए है. सामान्य स्थितियों में:

• जब कोई उपयोगकर्ता किसी कार्रवाई को शुरू करता है, तब ऐप्लिकेशन आम तौर पर रजिस्ट्रेशन टोकन का अनुरोध करता है. ऐप्लिकेशन शुरू होने के दौरान आपको टोकन का अनुरोध नहीं करना चाहिए. ऐसा इसलिए, क्योंकि इससे FCM को ब्लॉक किया जा रहा कॉल होता है, जिसे पूरा होने में कुछ समय लग सकता है.
• कोई ऐप्लिकेशन, ऐप्लिकेशन सर्वर को टोकन भेजता है. आम तौर पर, यह टोकन स्टोर में मौजूद रहता है. बाद में, ऐप्लिकेशन सर्वर स्टोर से टोकन लेकर, उपयोगकर्ता को भेजे गए मैसेज का पता लगाने के लिए उस टोकन का इस्तेमाल करता है.

Android Studio के टूलबार पर, कोई Android डिवाइस चुनें और ऐप्लिकेशन चलाएं. Android Studio कंसोल में, रजिस्ट्रेशन टोकन इस तरह से प्रिंट किया जाता है:

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

इसे टेक्स्ट एडिटर में कॉपी करें, क्योंकि बाद में मैसेज भेजने के लिए इसका इस्तेमाल किया जा सकता है.

ध्यान दें: अगर आपको यह गड़बड़ी दिखती है, तो गड़बड़ी के मैसेज के बाद निर्देशों का पालन करें और ज़्यादा minSdkVersion (उदाहरण के लिए, 19) को प्रोजेक्ट डायरेक्ट्री में मौजूद android/app/build.gradle फ़ाइल में डालें.

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

वेब पर मैसेज पाने के अतिरिक्त चरण

रजिस्ट्रेशन टोकन पाने और आने वाले मैसेज को सुनने के लिए, वेब ऐप्लिकेशन को दो अतिरिक्त चरणों की ज़रूरत होती है. समर्थित वेब पुश सेवाओं को भेजने के अनुरोध भेजने की अनुमति देने के लिए वेब को एक VAPID कुंजी को getToken पर पास करना होगा.

सबसे पहले, Firebase प्रोजेक्ट का क्लाउड से मैसेज टैब खोलें. इसके बाद, मौजूदा कुंजी का जोड़ा ढूंढने या कुंजी का नया जोड़ा जनरेट करने के लिए, नीचे की ओर स्क्रोल करके वेब कॉन्फ़िगरेशन सेक्शन पर जाएं. कुंजी को कॉपी करने के लिए हाइलाइट किए गए बटन पर क्लिक करें, ताकि इसका इस्तेमाल 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');
 }

इसके बाद, अपने प्रोजेक्ट के रूट में web/ डायरेक्ट्री के नीचे, firebase-messaging-sw.js फ़ाइल बनाएं. वेब ऐप्लिकेशन को onMessage इवेंट पाने की अनुमति देने के लिए, इन्हें firebase-messaging-sw.js में कॉपी करें. ज़्यादा जानकारी के लिए, सर्विस वर्कर में सूचना के विकल्प सेट करना देखें.

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 में चिपकाएं.

आखिर में, 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 को चुनें -> Xcode में iOS मॉड्यूल खोलें.
2. Xcode लॉन्च होने के बाद, साइन इन और प्रोजेक्ट के टारगेट के लिए सुविधाएं टैब. ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन को कॉन्फ़िगर करना लेख पढ़ें.
3. Android Studio के टूलबार पर, टारगेट सिलेक्टर में कोई iOS डिवाइस चुनें और ऐप्लिकेशन चलाएं. सूचना की अनुमति मिलने के बाद, रजिस्ट्रेशन टोकन को Android Studio कंसोल में प्रिंट किया जाता है.

बधाई हो, आपने FCM के साथ अपना ऐप्लिकेशन रजिस्टर कर लिया है. अब आपको मैसेज मिलेंगे. इस बारे में अगले सेक्शन में बताया गया है.

5. FCM से मैसेज पाएं

मैसेज हैंडलर सेट अप करना

ऐप्लिकेशन के फ़ोरग्राउंड मोड में होने पर मैसेज आने पर, ऐप्लिकेशन को onMessage इवेंट मैनेज करने होंगे. साथ ही, ऐप्लिकेशन के बैकग्राउंड में चलने पर, onBackgroundMessage इवेंट मैनेज करने होंगे.

फ़ोरग्राउंड मैसेज हैंडलर

सबसे पहले, main.dart फ़ाइल में TODO: Add stream controller टिप्पणी के बाद स्ट्रीम कंट्रोलर जोड़ें, ताकि इवेंट हैंडलर से मैसेज को यूज़र इंटरफ़ेस (यूआई) में भेजा जा सके.

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

डिपेंडेंसी rxdart जोड़ने के लिए, प्रोजेक्ट डायरेक्ट्री से इस निर्देश को चलाएं: flutter pub add rxdart.

इसके बाद, टूल चलाएं -> फ़्लटर -> rxdart.dart पैकेज को लोड करने और Android Studio में Intellisense की सही सेटिंग के साथ कोड दिखाने के लिए, Android Studio में Flutter Pub Get का इस्तेमाल किया जा सकता है.

इसके बाद, 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);
 });

इसके बाद, 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());
}

वेब के लिए बैकग्राउंड मैसेज हैंडलर

FlutterFire firebase_Message के वर्शन 11.2.8 के मुताबिक, वेब आधारित प्लैटफ़ॉर्म पर बैकग्राउंड मैसेज मैनेज करने के लिए अलग तरीके की ज़रूरत होती है. इसलिए, आपको सर्विस वर्कर web/firebase-messaging-sw.js में एक अलग मैसेज हैंडलर जोड़ना होगा.

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

ऐप्लिकेशन सर्वर सेट अप करना

1. Android Studio में https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server प्रोजेक्ट खोलकर, स्टार्टर सर्वर कोड इंपोर्ट करें. सर्वर, Gradle पर आधारित Java प्रोजेक्ट है. यह firebase-admin SDK टूल पर निर्भर करता है. यह FCM मैसेज भेजने की सुविधा उपलब्ध कराता है.
2. ऐसा Firebase सेवा खाता सेट अप करें जिसकी मदद से Firebase एडमिन SDK, FCM एपीआई को कॉल करने की अनुमति दे सके. Firebase कंसोल में प्रोजेक्ट सेटिंग खोलें और सेवा खाते टैब चुनें. ‘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 रजिस्ट्रेशन टोकन कॉपी करें और उसे वैरिएबल registrationToken की वैल्यू में चिपकाएं.
2. मुख्य फ़ंक्शन को चलाने और FCM के ज़रिए उपयोगकर्ता को मैसेज भेजने के लिए, Run पर क्लिक करें.

जब Android ऐप्लिकेशन बैकग्राउंड में होता है, तब सूचना ट्रे में मैसेज दिखता है.

जब Android ऐप्लिकेशन फ़ोरग्राउंड में होता है, तो आपको Android Studio कंसोल में एक लॉग दिखेगा: "फ़ोरग्राउंड मैसेज को मैनेज करना". यूज़र इंटरफ़ेस (यूआई) में मैसेज का कॉन्टेंट भी दिखता है, क्योंकि नए मैसेज के लिए यूज़र इंटरफ़ेस (यूआई) को स्ट्रीम कंट्रोलर की सदस्यता मिलती है.

अगर रजिस्ट्रेशन टोकन चिपकाया जाता है और ऐप्लिकेशन सर्वर या अन्य भरोसेमंद सर्वर एनवायरमेंट से मैसेज भेजा जाता है, तो आपको कुछ ऐसा ही दिखेगा:

• जब वेब ऐप्लिकेशन बैकग्राउंड में हो (यानी, जब वह किसी दूसरी विंडो या किसी दूसरे टैब के ज़रिए छिपा हो), तो आपको एक वेब सूचना दिखेगी.

• जब वेब ऐप्लिकेशन फ़ोरग्राउंड में हो, तो Chrome Console में लॉग इन किया जा सकता है. इसके लिए, वेब पर राइट क्लिक करें और Inspect को चुनें. मैसेज का कॉन्टेंट, यूज़र इंटरफ़ेस (यूआई) में भी दिखता है. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

6. कोई विषय संदेश भेजें

FCM एचटीटीपी v1 एपीआई के प्लैटफ़ॉर्म को बदलने की सुविधा, मैसेज भेजने के अनुरोध को अलग-अलग प्लैटफ़ॉर्म पर अलग-अलग तरह से दिखाने की सुविधा देती है. इस सुविधा का एक इस्तेमाल यह है कि हम प्लैटफ़ॉर्म के हिसाब से, सूचना वाले मैसेज का अलग-अलग कॉन्टेंट दिखा सकते हैं. इस सुविधा का पूरी तरह से इस्तेमाल तब किया जाता है, जब विषय वाले मैसेज की मदद से कई डिवाइसों (जो एक से ज़्यादा प्लैटफ़ॉर्म पर उपलब्ध हो सकते हैं) को टारगेट करते हैं. इस सेक्शन में, हर प्लैटफ़ॉर्म के हिसाब से अपने ऐप्लिकेशन के लिए, अलग-अलग विषयों पर मैसेज पाने का तरीका बताया गया है.

क्लाइंट के किसी विषय की सदस्यता लेना

किसी विषय की सदस्यता लेने के लिए, Flutter ऐप्लिकेशन की main.dart फ़ाइल में मुख्य फ़ंक्शन के आखिर में messaging.subscribeToTopic तरीके को कॉल करें.

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

[ज़रूरी नहीं] वेब के लिए सर्वर से किसी विषय की सदस्यता लेना

अगर वेब प्लैटफ़ॉर्म पर ऐप्लिकेशन डेवलप नहीं किया जा रहा है, तो इस सेक्शन को छोड़ा जा सकता है.

FCM JS SDK टूल, फ़िलहाल क्लाइंट-साइड विषय की सदस्यता के साथ काम नहीं करता. इसके बजाय, Admin SDK के सर्वर-साइड टॉपिक मैनेजमेंट एपीआई का इस्तेमाल करके, सदस्यता ली जा सकती है. इस कोड में, Java एडमिन 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 फ़ाइल में मुख्य फ़ंक्शन को चलाने के लिए, Run पर क्लिक करें:

प्लैटफ़ॉर्म के ओवरराइड वाले किसी विषय के साथ मैसेज भेजें

अब आप विषय के प्लैटफ़ॉर्म में बदलाव करने वाला मैसेज भेज सकते हैं. नीचे दिए गए कोड स्निपेट में:

• आपने बेस मैसेज और "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 का इस्तेमाल करके मल्टी-प्लैटफ़ॉर्म ऐप्लिकेशन डेवलपमेंट को दिलचस्प बनाने के बारे में जाना है. इनमें एनवायरमेंट सेटअप, डिपेंडेंसी इंटिग्रेशन, मैसेज पाना और भेजना शामिल है. ज़्यादा जानकारी के लिए, यहां दी गई जानकारी देखें:

कोडलैब

• उपयोगकर्ता की पुष्टि करने और डेटा सिंक करने जैसी सुविधाओं के साथ-साथ, अन्य Firebase प्रॉडक्ट के साथ Flutter कैसे काम करता है, इस बारे में ज़्यादा जानने के लिए, Flutter के लिए Firebase के बारे में जानें देखें.
• इन-ऐप्लिकेशन मैसेज सेवा और विषयों के साथ-साथ, FCM के बारे में ज़्यादा जानने के लिए: उपयोगकर्ताओं को मैसेज भेजने के लिए FCM और FIAM का इस्तेमाल करें और FCM विषयों का इस्तेमाल करके अपना पहला मल्टीकास्ट पुश मैसेज

रेफ़रंस

• Firebase साइट
• फ़्लटर साइट
• FlutterFire Firebase Flutter विजेट
• Firebase का YouTube चैनल
• YouTube चैनल को खुश रखें