Flutter ऐप्लिकेशन में मैसेज पाएं

डिवाइस की स्थिति के हिसाब से, आने वाले मैसेज को अलग-अलग तरीके से मैनेज किया जाता है. इन स्थितियों और अपने ऐप्लिकेशन में FCM को इंटिग्रेट करने के तरीके को समझने के लिए, यह जानना ज़रूरी है कि कोई डिवाइस किन-किन स्थितियों में हो सकता है:

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

कुछ ज़रूरी शर्तें हैं जिन्हें पूरा करने के बाद ही, ऐप्लिकेशन को FCM के ज़रिए मैसेज पेलोड मिल सकते हैं:

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

मैसेज पाने की अनुमति का अनुरोध करना

iOS, macOS, वेब, और Android 13 (या इसके बाद के वर्शन) पर, आपके डिवाइस को FCM पेलोड मिलें, इससे पहले आपको उपयोगकर्ता से अनुमति लेनी होगी.

firebase_messaging पैकेज, requestPermission तरीके से अनुमति का अनुरोध करने के लिए, एक आसान एपीआई उपलब्ध कराता है. यह एपीआई, कई नेम आर्ग्युमेंट स्वीकार करता है. इनसे यह तय होता है कि आपको किस तरह की अनुमतियों का अनुरोध करना है. जैसे, सूचना पेलोड वाले मैसेज, आवाज़ को ट्रिगर कर सकते हैं या नहीं. इसके अलावा, यह भी तय किया जा सकता है कि Siri के ज़रिए मैसेज पढ़े जा सकते हैं या नहीं. डिफ़ॉल्ट रूप से, यह तरीका समझदारी के साथ डिफ़ॉल्ट अनुमतियों का अनुरोध करता है. रेफ़रंस एपीआई में, हर अनुमति के बारे में पूरी जानकारी दी गई है.

शुरू करने के लिए, अपने ऐप्लिकेशन से इस तरीके को कॉल करें. iOS पर एक नेटिव मॉडल दिखेगा. वहीं, वेब पर ब्राउज़र का नेटिव एपीआई फ़्लो ट्रिगर होगा:

FirebaseMessaging messaging = FirebaseMessaging.instance;

NotificationSettings settings = await messaging.requestPermission(
  alert: true,
  announcement: false,
  badge: true,
  carPlay: false,
  criticalAlert: false,
  provisional: false,
  sound: true,
);

print('User granted permission: ${settings.authorizationStatus}');

अनुरोध से मिले NotificationSettings ऑब्जेक्ट की authorizationStatus प्रॉपर्टी का इस्तेमाल करके, यह पता लगाया जा सकता है कि उपयोगकर्ता ने क्या फ़ैसला लिया है:

• authorized: उपयोगकर्ता ने अनुमति दी है.
• denied: उपयोगकर्ता ने अनुमति नहीं दी.
• notDetermined: उपयोगकर्ता ने अब तक यह नहीं चुना है कि उसे अनुमति देनी है या नहीं.
• provisional: उपयोगकर्ता ने कुछ समय के लिए अनुमति दी है

ध्यान दें: Android के 13 से पहले के वर्शन पर, अगर उपयोगकर्ता ने ऑपरेटिंग सिस्टम की सेटिंग में जाकर ऐप्लिकेशन के लिए सूचनाएं बंद नहीं की हैं, तो authorizationStatus, authorized दिखाता है. Android 13 और इसके बाद के वर्शन पर, यह पता नहीं लगाया जा सकता कि उपयोगकर्ता ने अनुमति देने/अस्वीकार करने का विकल्प चुना है या नहीं. denied वैल्यू से, अनुमति की ऐसी स्थिति का पता चलता है जिसके बारे में फ़ैसला नहीं लिया गया है या अनुमति नहीं दी गई है. साथ ही, यह आपको ट्रैक करना होगा कि अनुमति का अनुरोध किया गया है या नहीं.

NotificationSettings की अन्य प्रॉपर्टी से यह पता चलता है कि किसी खास अनुमति को चालू किया गया है या बंद किया गया है या वह मौजूदा डिवाइस पर काम नहीं करती है.

अनुमति मिल जाने और डिवाइस की अलग-अलग स्थितियों के बारे में जानकारी मिल जाने के बाद, अब आपका ऐप्लिकेशन, आने वाले FCM पेलोड को मैनेज कर सकता है.

मैसेज मैनेज करना

आपके ऐप्लिकेशन की मौजूदा स्थिति के आधार पर, अलग-अलग मैसेज टाइप के इनकमिंग पेलोड को मैनेज करने के लिए, अलग-अलग तरीके लागू करने पड़ते हैं:

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

ऐप्लिकेशन के फ़ोरग्राउंड में होने पर मैसेज मैनेज करने के लिए, onMessage स्ट्रीम सुनें.

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('Got a message whilst in the foreground!');
  print('Message data: ${message.data}');

  if (message.notification != null) {
    print('Message also contained a notification: ${message.notification}');
  }
});

स्ट्रीम में RemoteMessage होता है. इसमें पेलोड के बारे में अलग-अलग जानकारी दी जाती है. जैसे, पेलोड कहां से आया, इसका यूनीक आईडी क्या है, इसे कब भेजा गया, इसमें सूचना शामिल है या नहीं वगैरह. जब आपका ऐप्लिकेशन फ़ोरग्राउंड में था, तब मैसेज को वापस पाया गया था. इसलिए, आपके पास सीधे तौर पर अपने Flutter ऐप्लिकेशन की स्थिति और कॉन्टेक्स्ट को ऐक्सेस करने का विकल्प होता है.

फ़ोरग्राउंड और सूचना वाले मैसेज

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

• Android पर, आपको "ज़्यादा प्राथमिकता" वाला सूचना चैनल बनाना होगा.
• iOS पर, ऐप्लिकेशन के लिए प्रज़ेंटेशन के विकल्पों को अपडेट किया जा सकता है.

बैकग्राउंड में भेजे गए मैसेज

नेटिव (Android और Apple) और वेब आधारित प्लैटफ़ॉर्म पर, बैकग्राउंड मैसेज को हैंडल करने की प्रोसेस अलग-अलग होती है.

Apple के प्लैटफ़ॉर्म और Android

onBackgroundMessage हैंडलर रजिस्टर करके, बैकग्राउंड में मिलने वाले मैसेज मैनेज करें. मैसेज मिलने पर, एक आइसोलेट बनाया जाता है. यह सुविधा सिर्फ़ Android के लिए उपलब्ध है. iOS/macOS के लिए अलग आइसोलेट की ज़रूरत नहीं होती. इससे, ऐप्लिकेशन बंद होने पर भी मैसेज मैनेज किए जा सकते हैं.

बैकग्राउंड मैसेज हैंडलर के बारे में आपको कुछ बातों का ध्यान रखना होगा:

1. यह कोई ऐनॉनमस फ़ंक्शन नहीं होना चाहिए.
2. यह टॉप-लेवल का फ़ंक्शन होना चाहिए. उदाहरण के लिए, यह क्लास का ऐसा तरीका नहीं होना चाहिए जिसके लिए शुरुआत में कुछ कार्रवाई करनी पड़ती है.
3. Flutter 3.3.0 या उसके बाद के वर्शन का इस्तेमाल करते समय, फ़ंक्शन के एलान के ठीक ऊपर @pragma('vm:entry-point') के साथ मैसेज हैंडलर को एनोटेट किया जाना चाहिए. ऐसा न करने पर, रिलीज़ मोड के लिए ट्री शेकिंग के दौरान इसे हटाया जा सकता है.

@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // If you're going to use other Firebase services in the background, such as Firestore,
  // make sure you call `initializeApp` before using other Firebase services.
  await Firebase.initializeApp();

  print("Handling a background message: ${message.messageId}");
}

void main() {
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(MyApp());
}

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

हमारा सुझाव है कि आप लॉजिक को जल्द से जल्द पूरा करें. ज़्यादा समय तक चलने वाले और मुश्किल टास्क करने से, डिवाइस की परफ़ॉर्मेंस पर असर पड़ता है. साथ ही, ओएस इस प्रोसेस को बंद कर सकता है. अगर टास्क 30 सेकंड से ज़्यादा समय तक चलते हैं, तो डिवाइस प्रोसेस को अपने-आप बंद कर सकता है.

वेब

वेब पर, बैकग्राउंड में चलने वाला JavaScript Service Worker लिखें. बैकग्राउंड मैसेज को मैनेज करने के लिए, सर्विस वर्कर का इस्तेमाल करें.

शुरू करने के लिए, अपनी web डायरेक्ट्री में एक नई फ़ाइल बनाएं और उसे firebase-messaging-sw.js नाम दें:

// Please see this file for the latest firebase-js-sdk version:
// https://github.com/firebase/flutterfire/blob/main/packages/firebase_core/firebase_core_web/lib/src/firebase_sdk_version.dart
importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/10.7.0/firebase-messaging-compat.js");

firebase.initializeApp({
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
});

const messaging = firebase.messaging();

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

फ़ाइल में ऐप्लिकेशन और मैसेजिंग, दोनों SDK टूल इंपोर्ट किए जाने चाहिए. साथ ही, Firebase को शुरू किया जाना चाहिए और messaging वैरिएबल को दिखाया जाना चाहिए.

इसके बाद, वर्कर को रजिस्टर करना होगा. index.html फ़ाइल में, वर्कर को रजिस्टर करें. इसके लिए, <script> टैग में बदलाव करें. यह टैग, Flutter को बूटस्ट्रैप करता है:

<script src="flutter_bootstrap.js" async>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('firebase-messaging-sw.js', {
        scope: '/firebase-cloud-messaging-push-scope',
      });
    });
  }
</script>

अगर अब भी पुराने टेंप्लेट सिस्टम का इस्तेमाल किया जा रहा है, तो वर्कर को रजिस्टर किया जा सकता है. इसके लिए, आपको <script> टैग में बदलाव करना होगा. यह टैग, Flutter को इस तरह बूटस्ट्रैप करता है:

<html>
<body>
  <script>
      var serviceWorkerVersion = null;
      var scriptLoaded = false;
      function loadMainDartJs() {
        if (scriptLoaded) {
          return;
        }
        scriptLoaded = true;
        var scriptTag = document.createElement('script');
        scriptTag.src = 'main.dart.js';
        scriptTag.type = 'application/javascript';
        document.body.append(scriptTag);
      }

      if ('serviceWorker' in navigator) {
        // Service workers are supported. Use them.
        window.addEventListener('load', function () {
          // Register Firebase Messaging service worker.
          navigator.serviceWorker.register('firebase-messaging-sw.js', {
            scope: '/firebase-cloud-messaging-push-scope',
          });

          // Wait for registration to finish before dropping the <script> tag.
          // Otherwise, the browser will load the script multiple times,
          // potentially different versions.
          var serviceWorkerUrl =
            'flutter_service_worker.js?v=' + serviceWorkerVersion;

          navigator.serviceWorker.register(serviceWorkerUrl).then((reg) => {
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener('statechange', () => {
                if (serviceWorker.state == 'activated') {
                  console.log('Installed new service worker.');
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
              // No active web worker and we have installed or are installing
              // one for the first time. Simply wait for it to activate.
              waitForActivation(reg.installing ?? reg.waiting);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              // When the app updates the serviceWorkerVersion changes, so we
              // need to ask the service worker to update.
              console.log('New service worker available.');
              reg.update();
              waitForActivation(reg.installing);
            } else {
              // Existing service worker is still good.
              console.log('Loading app from service worker.');
              loadMainDartJs();
            }
          });

          // If service worker doesn't succeed in a reasonable amount of time,
          // fallback to plaint <script> tag.
          setTimeout(() => {
            if (!scriptLoaded) {
              console.warn(
                'Failed to load app from service worker. Falling back to plain <script> tag.'
              );
              loadMainDartJs();
            }
          }, 4000);
        });
      } else {
        // Service workers not supported. Just drop the <script> tag.
        loadMainDartJs();
      }
  </script>
</body>

इसके बाद, अपने Flutter ऐप्लिकेशन को रीस्टार्ट करें. वर्कर रजिस्टर हो जाएगा और बैकग्राउंड में भेजे गए सभी मैसेज, इस फ़ाइल के ज़रिए मैनेज किए जाएंगे.

इंटरैक्शन को हैंडल करना

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

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

firebase-messaging पैकेज, इस इंटरैक्शन को मैनेज करने के दो तरीके उपलब्ध कराता है:

• getInitialMessage(): अगर ऐप्लिकेशन को बंद किए जाने के बाद खोला जाता है, तो Future वापस आ जाएगा. इसमें RemoteMessage शामिल होगा. इस्तेमाल हो जाने के बाद, RemoteMessage को हटा दिया जाएगा.
• onMessageOpenedApp: यह एक Stream है, जो ऐप्लिकेशन को बैकग्राउंड से खोलने पर RemoteMessage पोस्ट करता है.

हमारा सुझाव है कि दोनों स्थितियों को मैनेज किया जाए, ताकि आपके उपयोगकर्ताओं को बेहतर UX मिल सके. नीचे दिए गए कोड के उदाहरण में बताया गया है कि ऐसा कैसे किया जा सकता है:

class Application extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Application();
}

class _Application extends State<Application> {
  // It is assumed that all messages contain a data field with the key 'type'
  Future<void> setupInteractedMessage() async {
    // Get any messages which caused the application to open from
    // a terminated state.
    RemoteMessage? initialMessage =
        await FirebaseMessaging.instance.getInitialMessage();

    // If the message also contains a data property with a "type" of "chat",
    // navigate to a chat screen
    if (initialMessage != null) {
      _handleMessage(initialMessage);
    }

    // Also handle any interaction when the app is in the background via a
    // Stream listener
    FirebaseMessaging.onMessageOpenedApp.listen(_handleMessage);
  }

  void _handleMessage(RemoteMessage message) {
    if (message.data['type'] == 'chat') {
      Navigator.pushNamed(context, '/chat',
        arguments: ChatArguments(message),
      );
    }
  }

  @override
  void initState() {
    super.initState();

    // Run code required to handle interacted messages in an async function
    // as initState() must not be async
    setupInteractedMessage();
  }

  @override
  Widget build(BuildContext context) {
    return Text("...");
  }
}

इंटरैक्शन को मैनेज करने का तरीका, आपके ऐप्लिकेशन के सेटअप पर निर्भर करता है. ऊपर दिए गए उदाहरण में, StatefulWidget का इस्तेमाल करके एक बेसिक इलस्ट्रेशन दिखाया गया है.

Messages को स्थानीय भाषा में लिखना

स्थानीय भाषा में अनुवाद की गई स्ट्रिंग को दो अलग-अलग तरीकों से भेजा जा सकता है:

• अपने सर्वर में, हर उपयोगकर्ता की पसंदीदा भाषा सेव करें और हर भाषा के लिए, पसंद के मुताबिक सूचनाएं भेजें
• अपने ऐप्लिकेशन में स्थानीय भाषा में अनुवादित स्ट्रिंग एम्बेड करें और ऑपरेटिंग सिस्टम की नेटिव स्थान-भाषा सेटिंग का इस्तेमाल करें

यहां दूसरा तरीका इस्तेमाल करने का तरीका बताया गया है:

Android

1. resources/values/strings.xml में, अपनी डिफ़ॉल्ट भाषा में मैसेज लिखें:

   <string name="notification_title">Hello world</string>
   <string name="notification_message">This is a message</string>
   

2. values-language डायरेक्ट्री में अनुवाद किए गए मैसेज के बारे में बताएं. उदाहरण के लिए, resources/values-fr/strings.xml में फ़्रेंच मैसेज तय करें:

   <string name="notification_title">Bonjour le monde</string>
   <string name="notification_message">C'est un message</string>
   

3. सर्वर पेलोड में, title, message, और body कुंजियों का इस्तेमाल करने के बजाय, अपनी स्थानीय भाषा में मैसेज दिखाने के लिए title_loc_key और body_loc_key का इस्तेमाल करें. साथ ही, उन्हें उस मैसेज के name एट्रिब्यूट पर सेट करें जिसे आपको दिखाना है.

   मैसेज पेलोड कुछ ऐसा दिखेगा:

   {
     "android": {
        "notification": {
          "title_loc_key": "notification_title",
          "body_loc_key": "notification_message"
        }
     }
   }
   

iOS

1. Base.lproj/Localizable.strings में, अपनी डिफ़ॉल्ट भाषा में मैसेज लिखें:

   "NOTIFICATION_TITLE" = "Hello World";
   "NOTIFICATION_MESSAGE" = "This is a message";
   

2. language.lproj डायरेक्ट्री में अनुवाद किए गए मैसेज के बारे में बताएं. उदाहरण के लिए, fr.lproj/Localizable.strings में फ़्रेंच मैसेज तय करें:

   "NOTIFICATION_TITLE" = "Bonjour le monde";
   "NOTIFICATION_MESSAGE" = "C'est un message";
   

   मैसेज पेलोड कुछ ऐसा दिखेगा:

   {
     "apns": {
        "payload": {
          "alert": {
            "title-loc-key": "NOTIFICATION_TITLE",
            "loc-key": "NOTIFICATION_MESSAGE"
          }
        }
     }
   }
   

मैसेज डिलीवरी का डेटा एक्सपोर्ट करने की सुविधा चालू करना

ज़्यादा विश्लेषण के लिए, अपने मैसेज के डेटा को BigQuery में एक्सपोर्ट किया जा सकता है. BigQuery SQL का इस्तेमाल करके, BigQuery में मौजूद डेटा का विश्लेषण किया जा सकता है. साथ ही, इसे किसी दूसरे क्लाउड सेवा देने वाली कंपनी को एक्सपोर्ट किया जा सकता है. इसके अलावा, इस डेटा का इस्तेमाल अपने कस्टम एमएल मॉडल के लिए भी किया जा सकता है. BigQuery में एक्सपोर्ट किए गए डेटा में, मैसेज का पूरा डेटा शामिल होता है. भले ही, मैसेज का टाइप कुछ भी हो या मैसेज को एपीआई या सूचनाएं कंपोज़ करने वाले टूल से भेजा गया हो.

एक्सपोर्ट करने की सुविधा चालू करने के लिए, पहले यहां बताया गया तरीका अपनाएं. इसके बाद, यह तरीका अपनाएं:

Android

इस कोड का इस्तेमाल किया जा सकता है:

await FirebaseMessaging.instance.setDeliveryMetricsExportToBigQuery(true);

iOS

iOS के लिए, आपको AppDelegate.m को इस कॉन्टेंट से बदलना होगा.

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"
#import <Firebase/Firebase.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)application:(UIApplication *)application
    didReceiveRemoteNotification:(NSDictionary *)userInfo
          fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
  [[FIRMessaging extensionHelper] exportDeliveryMetricsToBigQueryWithMessageInfo:userInfo];
}

@end

वेब

वेब के लिए, SDK टूल के v9 वर्शन का इस्तेमाल करने के लिए, आपको अपने सर्विस वर्कर में बदलाव करना होगा. v9 वर्शन को बंडल करना ज़रूरी है. इसलिए, सर्विस वर्कर को काम करने के लिए, आपको esbuild जैसे बंडलर का इस्तेमाल करना होगा. इसे लागू करने का तरीका जानने के लिए, उदाहरण के तौर पर दिए गए ऐप्लिकेशन को देखें.

v9 SDK पर माइग्रेट करने के बाद, इस कोड का इस्तेमाल किया जा सकता है:

import {
  experimentalSetDeliveryMetricsExportedToBigQueryEnabled,
  getMessaging,
} from 'firebase/messaging/sw';
...

const messaging = getMessaging(app);
experimentalSetDeliveryMetricsExportedToBigQueryEnabled(messaging, true);

web फ़ोल्डर में अपने सर्विस वर्कर का नया वर्शन एक्सपोर्ट करने के लिए, yarn build चलाना न भूलें.

iOS पर सूचनाओं में इमेज दिखाना

Apple डिवाइसों पर, FCM पेलोड से मिली इमेज को FCM सूचनाओं में दिखाने के लिए, आपको सूचना सेवा का एक और एक्सटेंशन जोड़ना होगा. साथ ही, अपने ऐप्लिकेशन को इसे इस्तेमाल करने के लिए कॉन्फ़िगर करना होगा.

अगर Firebase फ़ोन ऑथेंटिकेशन का इस्तेमाल किया जा रहा है, तो आपको अपने Podfile में Firebase Auth pod जोड़ना होगा.

ध्यान दें: iOS सिम्युलेटर, पुश नोटिफ़िकेशन में इमेज नहीं दिखाता है. आपको किसी फ़िज़िकल डिवाइस पर टेस्ट करना होगा.

पहला चरण - सूचना सेवा का एक्सटेंशन जोड़ना

1. Xcode में, File > New > Target... पर क्लिक करें
2. एक मोडल में, संभावित टारगेट की सूची दिखेगी. नीचे की ओर स्क्रोल करें या फ़िल्टर का इस्तेमाल करके, सूचना सेवा एक्सटेंशन चुनें. आगे बढ़ें पर क्लिक करें.
3. प्रॉडक्ट का नाम जोड़ें. इस ट्यूटोरियल के साथ फ़ॉलो करने के लिए, "ImageNotification" का इस्तेमाल करें. इसके बाद, Swift या Objective-C में से कोई एक चुनें और पूरा करें पर क्लिक करें.
4. चालू करें पर क्लिक करके, इस स्कीम को चालू करें.

दूसरा चरण - Podfile में टारगेट जोड़ना

Swift

पक्का करें कि आपके नए एक्सटेंशन के पास FirebaseMessaging swift पैकेज का ऐक्सेस हो. इसके लिए, इसे अपने Runner टारगेट में जोड़ें:

1. नेविगेटर से, Firebase Apple प्लैटफ़ॉर्म SDK टूल जोड़ें: File > Add Package Dependencies...

2. पैकेज का यूआरएल खोजें या डालें: https://github.com/firebase/firebase-ios-sdk

3. प्रोजेक्ट में जोड़ें Runner: पैकेज जोड़ें

4. FirebaseMessaging को चुनें और उसे टारगेट ImageNotification में जोड़ें: पैकेज जोड़ें

Objective-C

पक्का करें कि आपके नए एक्सटेंशन के पास Firebase/Messaging पॉड का ऐक्सेस हो. इसके लिए, इसे Podfile में जोड़ें:

1. नेविगेटर से, Podfile खोलें: Pods > Podfile

2. स्क्रोल करके फ़ाइल के सबसे नीचे जाएं और यह जोड़ें:

   target 'ImageNotification' do
     use_frameworks!
     pod 'Firebase/Auth' # Add this line if you are using FirebaseAuth phone authentication
     pod 'Firebase/Messaging'
   end
   

3. ios या macos डायरेक्ट्री से pod install का इस्तेमाल करके, अपने पॉड इंस्टॉल या अपडेट करें.

तीसरा चरण - एक्सटेंशन हेल्पर का इस्तेमाल करना

इस समय तक, सब कुछ सामान्य तरीके से काम करना चाहिए. आखिरी चरण, एक्सटेंशन हेल्पर को चालू करना है.

Swift

1. नेविगेटर से, ImageNotification एक्सटेंशन चुनें

2. NotificationService.swift फ़ाइल खोलें.

3. NotificationService.swift के कॉन्टेंट को इससे बदलें:

   import UserNotifications
   import FirebaseMessaging
   
   class NotificationService: UNNotificationServiceExtension {
   
       var contentHandler: ((UNNotificationContent) -> Void)?
       var bestAttemptContent: UNMutableNotificationContent?
   
       override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
           self.contentHandler = contentHandler
           bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
   
           Messaging.serviceExtension().populateNotificationContent(bestAttemptContent!, withContentHandler: contentHandler)
       }
   
       override func serviceExtensionTimeWillExpire() {
           if let contentHandler = contentHandler, let bestAttemptContent = bestAttemptContent {
               contentHandler(bestAttemptContent)
           }
       }
   }
   

Objective-C

1. नेविगेटर से, ImageNotification एक्सटेंशन चुनें

2. NotificationService.m फ़ाइल खोलें.

3. फ़ाइल में सबसे ऊपर, NotificationService.h के ठीक बाद FirebaseMessaging.h को इंपोर्ट करें. जैसा कि यहां दिखाया गया है.

   NotificationService.m के कॉन्टेंट को इससे बदलें:

   #import "NotificationService.h"
   #import "FirebaseMessaging.h"
   #import <FirebaseAuth/FirebaseAuth-Swift.h> // Add this line if you are using FirebaseAuth phone authentication
   #import <UIKit/UIKit.h> // Add this line if you are using FirebaseAuth phone authentication
   
   @interface NotificationService () <NSURLSessionDelegate>
   
   @property(nonatomic) void (^contentHandler)(UNNotificationContent *contentToDeliver);
   @property(nonatomic) UNMutableNotificationContent *bestAttemptContent;
   
   @end
   
   @implementation NotificationService
   
   /* Uncomment this if you are using Firebase Auth
   - (BOOL)application:(UIApplication *)app
               openURL:(NSURL *)url
               options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
     if ([[FIRAuth auth] canHandleURL:url]) {
       return YES;
     }
     return NO;
   }
   
   - (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts {
     for (UIOpenURLContext *urlContext in URLContexts) {
       [FIRAuth.auth canHandleURL:urlContext.URL];
     }
   }
   */
   
   - (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
       self.contentHandler = contentHandler;
       self.bestAttemptContent = [request.content mutableCopy];
   
       // Modify the notification content here...
       [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];
   }
   
   - (void)serviceExtensionTimeWillExpire {
       // Called just before the extension will be terminated by the system.
       // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
       self.contentHandler(self.bestAttemptContent);
   }
   
   @end
   

चौथा चरण - इमेज को पेलोड में जोड़ना

अब सूचना के पेलोड में इमेज जोड़ी जा सकती है. अनुरोध भेजने का तरीका जानने के लिए, iOS का दस्तावेज़ देखें. ध्यान रखें कि डिवाइस, इमेज का साइज़ ज़्यादा से ज़्यादा 300 केबी तक सीमित रखता है.