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

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

ऐप्लिकेशन की स्थिति	सूचना	डेटा	दोनों
फ़ोरग्राउंड	`onMessage`	`onMessage`	`onMessage`
बैकग्राउंड (सर्विस वर्कर)	`onBackgroundMessage` (डिसप्ले की सूचना अपने-आप दिखने लगेगी)	`onBackgroundMessage`	`onBackgroundMessage` (डिसप्ले की सूचना अपने-आप दिखने लगेगी)

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

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

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

Web

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

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

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

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

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

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

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

Web

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

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

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

Web

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

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 के ज़रिए मिली सूचनाएँ, जो ध्यान में रखने वाली सबसे ज़रूरी बातें हैं वे सटीक और काम के हों. रखने के लिए यहां कुछ खास सुझाव दिए गए हैं आपके नोटिफ़िकेशन सटीक और प्रासंगिक:

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