JavaScript क्लाइंट में मैसेज पाएं

मैसेज का व्यवहार अलग-अलग होता है. यह इस बात पर निर्भर करता है कि पेज फ़ोरग्राउंड में है या बैकग्राउंड में, दूसरे टैब के पीछे छिपा है या पूरी तरह से बंद है. सभी मामलों में, पेज को onMessage कॉलबैक मैनेज करना होगा. हालांकि, बैकग्राउंड के मामलों में, आपको onBackgroundMessage को मैनेज करना पड़ सकता है या डिसप्ले सूचना को कॉन्फ़िगर करना पड़ सकता है, ताकि उपयोगकर्ता आपके वेब ऐप्लिकेशन को फ़ोरग्राउंड में ला सके.

JavaScript के क्विकस्टार्ट सैंपल में, मैसेज पाने के लिए ज़रूरी सभी कोड दिखाए गए हैं.

वेब ऐप्लिकेशन के फ़ोरग्राउंड में होने पर मैसेज मैनेज करना

onMessage इवेंट पाने के लिए, आपके ऐप्लिकेशन को firebase-messaging-sw.js में Firebase मैसेजिंग सेवा वर्कर्स तय करना होगा. इसके अलावा, getToken(): Promise<string> के ज़रिए, SDK टूल को कोई मौजूदा सेवा वर्कर भी दिया जा सकता है.

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);
messaging_init_in_sw.js

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
service-worker.js

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

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
import { getMessaging, onMessage } from "firebase/messaging";

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // ...
});
messaging_receive_message.js

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.onBackgroundMessage` handler.
messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});
index.js

वेब ऐप्लिकेशन के बैकग्राउंड में होने पर भी मैसेज मैनेज करना

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

ईमेल भेजने के अनुरोध में, सूचना के विकल्प सेट करना

ऐप्लिकेशन सर्वर से भेजे गए सूचना मैसेज के लिए, FCM JavaScript API में fcm_options.link की का इस्तेमाल किया जा सकता है. आम तौर पर, यह आपके वेब ऐप्लिकेशन के किसी पेज पर सेट होता है:

https://fcm.googleapis.com//v1/projects/<YOUR-PROJECT-ID>/messages:send
Content-Type: application/json
Authorization: bearer <YOUR-ACCESS-TOKEN>

{
  "message": {
    "token": "eEz-Q2sG8nQ:APA91bHJQRT0JJ...",
    "notification": {
      "title": "Background Message Title",
      "body": "Background message body"
    },
    "webpush": {
      "fcm_options": {
        "link": "https://dummypage.com"
      }
    }
  }
}

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

डेटा मैसेज में fcm_options.link का इस्तेमाल नहीं किया जा सकता. इसलिए, हमारा सुझाव है कि आप सभी डेटा मैसेज में सूचना पेलोड जोड़ें. इसके अलावा, सेवा वर्कर का इस्तेमाल करके भी सूचनाएं मैनेज की जा सकती हैं.

सूचना और डेटा मैसेज के बीच के अंतर के बारे में जानने के लिए, मैसेज के टाइप लेख पढ़ें.

सेवा वर्कर में सूचना के विकल्प सेट करना

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

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);
messaging_init_in_sw.js

// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
// Replace 10.13.2 with latest version of the Firebase JS SDK.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
service-worker.js

विकल्प सेट करने के लिए, firebase-messaging-sw.js में onBackgroundMessage को कॉल करें. इस उदाहरण में, हमने टाइटल, मुख्य हिस्सा, और आइकॉन फ़ील्ड वाली सूचना बनाई है.

import { getMessaging } from "firebase/messaging/sw";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,
    notificationOptions);
});
messaging_on_background_message.js

messaging.onBackgroundMessage((payload) => {
  console.log(
    '[firebase-messaging-sw.js] Received background message ',
    payload
  );
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});
service-worker.js

सूचनाओं के लिए सबसे सही तरीके

अगर आपको वेब के लिए पुश मैसेजिंग की जानकारी है, तो हो सकता है कि आपने अच्छी सूचना बनाने के लिए, सामान्य दिशा-निर्देश पहले ही पढ़ लिए हों. FCM for Web की मदद से सूचनाएं भेजने वाले डेवलपर के लिए, सटीक और काम की जानकारी देना सबसे ज़रूरी है. अपनी सूचनाओं को सटीक और काम का बनाए रखने के लिए, यहां कुछ सुझाव दिए गए हैं:

• काम की इमेज भेजने के लिए, आइकॉन फ़ील्ड का इस्तेमाल करें. कई इस्तेमाल के उदाहरणों के लिए, यह कंपनी या ऐप्लिकेशन का ऐसा लोगो होना चाहिए जिसे आपके उपयोगकर्ता तुरंत पहचान सकें. इसके अलावा, चैट ऐप्लिकेशन के लिए, यह मैसेज भेजने वाले व्यक्ति की प्रोफ़ाइल इमेज हो सकती है.
• मैसेज के बारे में सटीक जानकारी देने के लिए, टाइटल फ़ील्ड का इस्तेमाल करें. उदाहरण के लिए, "नया मैसेज" के मुकाबले, "जिम ने जवाब दिया" से ज़्यादा सटीक जानकारी मिलती है. इस अहम जगह का इस्तेमाल अपनी कंपनी या ऐप्लिकेशन के नाम के लिए न करें. इसके लिए, आइकॉन का इस्तेमाल करें.
• अपनी वेबसाइट का नाम या डोमेन दिखाने के लिए, सूचना के शीर्षक या मुख्य हिस्से का इस्तेमाल न करें. सूचनाओं में पहले से ही आपका डोमेन नेम शामिल होता है.
• fcm_options.link जोड़ें. आम तौर पर, उपयोगकर्ता को आपके वेब ऐप्लिकेशन से लिंक करने और ब्राउज़र में फ़ोकस करने के लिए ऐसा किया जाता है. कुछ मामलों में, हो सकता है कि आपको जो जानकारी देनी है वह सूचना में ही शामिल हो. ऐसे में, आपको लिंक की ज़रूरत नहीं पड़ सकती.