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

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

पिछले अपडेट की तारीख: 04-04-2022

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

ज़रूरी शर्त

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

आपको क्या सीखने को मिलेगा

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

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

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

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

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

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

2. Flutter सेटअप करना

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

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

1. अपने ऑपरेटिंग सिस्टम के लिए Flutter डाउनलोड और इंस्टॉल करें: Install | 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 में बदलें.

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

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

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

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

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

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

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

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

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

1. अपने Google खाते का इस्तेमाल करके, Firebase कंसोल में साइन इन करें.
2. नया प्रोजेक्ट बनाने के लिए, बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए, fcm4flutter.
   
3. जारी रखें पर क्लिक करें.
4. अगर आपसे कहा जाए, तो Firebase की शर्तें पढ़ें और स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
5. (ज़रूरी नहीं) Firebase कंसोल में एआई की मदद पाने की सुविधा चालू करें. इसे "Firebase में Gemini" कहा जाता है.
6. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल करके बंद करें.
7. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट के प्रोविज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.

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

Firebase CLI सेट अप करना

अगर आपने Firebase CLI सेट अप कर लिया है, तो इस चरण को छोड़ दें.

Firebase CLI को डाउनलोड और इंस्टॉल करने के लिए, Firebase CLI के रेफ़रंस पर जाएं. नीचे दिए गए कमांड का इस्तेमाल करके, अपने Google खाते से Firebase में लॉग इन करें:

firebase login

FlutterFire को सेट अप करना

1. इस कमांड का इस्तेमाल करके, FlutterFire प्लगिन इंस्टॉल करें: flutter pub add firebase_core
2. FCM प्लगिन इंस्टॉल करें: flutter pub add firebase_messaging
3. FlutterFire सीएलआई सेट अप करें: dart pub global activate flutterfire_cli
4. Flutter पर Firebase प्रोजेक्ट को कॉन्फ़िगर करें: flutterfire configure --project=fcm4flutter. प्लैटफ़ॉर्म चुनने के लिए, ऐरो बटन और स्पेस बार का इस्तेमाल करें. इसके अलावा, डिफ़ॉल्ट प्लैटफ़ॉर्म इस्तेमाल करने के लिए, Enter दबाएं.

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

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

iOS के लिए Cloud Messaging सेट अप करना

1. Apple के डेवलपर पेज पर जाएं. इसके बाद, कुंजियां टैब पर जाकर, कुंजी बनाएं पर क्लिक करें.

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

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

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

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

अनुमति का अनुरोध करें

ऐप्लिकेशन को, सूचनाएं पाने के लिए उपयोगकर्ता से अनुमति लेनी होगी. 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 पर वेब ऐप्लिकेशन को फिर से चलाने पर, आपसे अनुमति मांगी जा सकती है.

रजिस्ट्रेशन

इस कोड को मुख्य फ़ंक्शन में, टिप्पणी 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]

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

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

सबसे पहले, Firebase कंसोल में Firebase प्रोजेक्ट का Cloud Messaging टैब खोलें. इसके बाद, नीचे की ओर स्क्रोल करके वेब कॉन्फ़िगरेशन सेक्शन पर जाएं. यहां आपको मौजूदा कुंजी जोड़ी मिलेगी. इसके अलावा, नई कुंजी जोड़ी भी जनरेट की जा सकती है. कुंजी को कॉपी करने के लिए, हाइलाइट किए गए बटन पर क्लिक करें, ताकि इसे 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 -> Open iOS module in Xcode को चुनें.
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.

इसके बाद, Android Studio में Tools -> Flutter -> Flutter Pub Get को चलाएं. इससे rxdart.dart पैकेज लोड हो जाएगा. साथ ही, Android Studio में सही 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);
 });

इसके बाद, फ़ाइल main.dart में मौजूद ओरिजनल State विजेट को इस कोड से बदलें. इससे 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 के बाद, main फ़ंक्शन के बाहर हैंडलर फ़ंक्शन बनाएं. इसके बाद, टिप्पणी TODO: Set up background message handler के बाद, main फ़ंक्शन में इसे कॉल करें.

// 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 के मुताबिक, वेब पर काम करने वाले प्लैटफ़ॉर्म पर बैकग्राउंड मैसेज को मैनेज करने के लिए, अलग तरीके का इस्तेमाल करना ज़रूरी है. इसलिए, आपको सर्विस वर्कर 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 पर निर्भर करता है. यह SDK, FCM मैसेज भेजने की सुविधा देता है.
2. एक Firebase सेवा खाता सेट अप करें. इससे Firebase Admin SDK, FCM API को कॉल करने की अनुमति दे पाएगा. 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 के ज़रिए मैसेज भेजने के लिए, चलाएं पर क्लिक करें.

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

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

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

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

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

6. विषय के हिसाब से मैसेज भेजना

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

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

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

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

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

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

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

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

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

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

कोडलैब

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

रेफ़रंस

• Firebase की साइट
• Flutter साइट
• FlutterFire Firebase Flutter विजेट
• Firebase का YouTube चैनल
• Flutter का YouTube चैनल