जावास्क्रिप्ट क्लाइंट में संदेश प्राप्त करें

संदेशों का व्यवहार इस पर निर्भर करता है कि पृष्ठ अग्रभूमि में है (फोकस है), या पृष्ठभूमि में है, अन्य टैब के पीछे छिपा हुआ है, या पूरी तरह से बंद है। सभी मामलों में पृष्ठ को onMessage कॉलबैक को संभालना होगा, लेकिन पृष्ठभूमि मामलों में आपको उपयोगकर्ता को आपके वेब ऐप को अग्रभूमि में लाने की अनुमति देने के लिए onBackgroundMessage संभालने या डिस्प्ले अधिसूचना को कॉन्फ़िगर करने की भी आवश्यकता हो सकती है।

ऐप स्थिति	अधिसूचना	आंकड़े	दोनों
अग्रभूमि	`onMessage`	`onMessage`	`onMessage`
पृष्ठभूमि (सेवा कार्यकर्ता)	`onBackgroundMessage` (डिस्प्ले नोटिफिकेशन स्वचालित रूप से दिखाया गया है)	`onBackgroundMessage`	`onBackgroundMessage` (डिस्प्ले नोटिफिकेशन स्वचालित रूप से दिखाया गया है)

जावास्क्रिप्ट क्विकस्टार्ट नमूना संदेश प्राप्त करने के लिए आवश्यक सभी कोड प्रदर्शित करता है।

जब आपका वेब ऐप अग्रभूमि में हो तो संदेशों को संभालें

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

Web modular API

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

Web namespaced API

// 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.
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.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

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

Web modular API

// 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

Web namespaced API

// 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_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 समर्थन नहीं करते हैं, इसलिए आपको सभी डेटा संदेशों में एक अधिसूचना पेलोड जोड़ने की अनुशंसा की जाती है। वैकल्पिक रूप से, आप सेवा कार्यकर्ता का उपयोग करके सूचनाओं को संभाल सकते हैं।

अधिसूचना और डेटा संदेशों के बीच अंतर की व्याख्या के लिए, संदेश प्रकार देखें।

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

डेटा संदेशों के लिए, आप सेवा कार्यकर्ता में अधिसूचना विकल्प सेट कर सकते हैं। सबसे पहले, सेवा कार्यकर्ता में अपना ऐप प्रारंभ करें:

Web modular API

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

Web namespaced API

// 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.
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.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 पर कॉल करें। इस उदाहरण में, हम शीर्षक, मुख्य भाग और आइकन फ़ील्ड के साथ एक अधिसूचना बनाते हैं।

Web modular API

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

Web namespaced API

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_options.link जोड़ें, आमतौर पर उपयोगकर्ता को अपने वेब ऐप से वापस लिंक करने और उसे ब्राउज़र में फोकस में लाने के लिए। दुर्लभ मामलों में जहां आपको बताई जाने वाली सारी जानकारी अधिसूचना में फिट हो सकती है, आपको लिंक की आवश्यकता नहीं होगी।