Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

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

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

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

Web version 9

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);

Web version 8

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

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

Web version 9

// 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);
  // ...
});

Web version 8

// 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);
  // ...
});

जब आपका वेब ऐप बैकग्राउंड में हो तो संदेशों को हैंडल करें

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

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

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

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

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

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

Web version 9

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);

Web version 8

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

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

Web version 9

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);
});

Web version 8

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);
});

सूचनाओं के लिए सर्वोत्तम अभ्यास

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

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