Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

JavaScript Firebase क्लाउड मैसेजिंग क्लाइंट ऐप सेट करें

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

FCM JavaScript API आपको पुश API का समर्थन करने वाले ब्राउज़र में चल रहे वेब ऐप्स में सूचना संदेश प्राप्त करने देता है। इसमें इस समर्थन मैट्रिक्स में सूचीबद्ध ब्राउज़र संस्करण और पुश एपीआई के माध्यम से क्रोम एक्सटेंशन शामिल हैं।

FCM SDK केवल HTTPS पर प्रदर्शित पृष्ठों में समर्थित है। यह इसके सेवा कर्मियों के उपयोग के कारण है, जो केवल HTTPS साइटों पर उपलब्ध हैं। यदि आपको एक प्रदाता की आवश्यकता है, तो फायरबेस होस्टिंग की सिफारिश की जाती है और यह आपके अपने डोमेन पर HTTPS होस्टिंग के लिए एक नो-कॉस्ट टियर प्रदान करता है।

FCM JavaScript API के साथ आरंभ करने के लिए, आपको अपने वेब ऐप में Firebase जोड़ना होगा और पंजीकरण टोकन तक पहुंचने के लिए तर्क जोड़ना होगा।

FCM SDK जोड़ें और आरंभ करें

  1. यदि आपने पहले से ऐसा नहीं किया है, तो Firebase JS SDK स्थापित करें और Firebase प्रारंभ करें

  2. फायरबेस क्लाउड मैसेजिंग जेएस एसडीके जोड़ें और फायरबेस क्लाउड मैसेजिंग को इनिशियलाइज़ करें:

Web version 9

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

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = getMessaging(app);

Web version 8

import firebase from "firebase/app";
import "firebase/messaging";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Cloud Messaging and get a reference to the service
const messaging = firebase.messaging();

यदि आप वर्तमान में वेब के लिए FCM का उपयोग कर रहे हैं और SDK 6.7.0 या बाद के संस्करण में अपग्रेड करना चाहते हैं, तो आपको Google क्लाउड कंसोल में अपने प्रोजेक्ट के लिए FCM पंजीकरण API को सक्षम करना होगा। जब आप एपीआई को सक्षम करते हैं, तो सुनिश्चित करें कि आप उसी Google खाते से क्लाउड कंसोल में लॉग इन हैं जिसका उपयोग आप फायरबेस के लिए करते हैं, और सही प्रोजेक्ट का चयन करना सुनिश्चित करें। FCM SDK को जोड़ने वाले नए प्रोजेक्ट में यह API डिफ़ॉल्ट रूप से सक्षम है।

FCM के साथ वेब क्रेडेंशियल कॉन्फ़िगर करें

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

एक नई कुंजी जोड़ी बनाएं

  1. फायरबेस कंसोल सेटिंग्स फलक का क्लाउड मैसेजिंग टैब खोलें और वेब कॉन्फ़िगरेशन अनुभाग पर स्क्रॉल करें।
  2. वेब पुश प्रमाणपत्र टैब में, कुंजी जोड़ी जनरेट करें क्लिक करें. कंसोल एक नोटिस प्रदर्शित करता है कि कुंजी जोड़ी उत्पन्न हुई थी, और सार्वजनिक कुंजी स्ट्रिंग और जोड़ी गई तिथि प्रदर्शित करता है।

मौजूदा कुंजी युग्म आयात करें

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

  1. फायरबेस कंसोल सेटिंग्स फलक का क्लाउड मैसेजिंग टैब खोलें और वेब कॉन्फ़िगरेशन अनुभाग पर स्क्रॉल करें।
  2. वेब पुश प्रमाणपत्र टैब में, लिंक टेक्स्ट ढूंढें और चुनें, "मौजूदा कुंजी युग्म आयात करें।"
  3. एक कुंजी जोड़ी आयात करें संवाद में, संबंधित फ़ील्ड में अपनी सार्वजनिक और निजी कुंजियाँ प्रदान करें और आयात पर क्लिक करें। कंसोल सार्वजनिक कुंजी स्ट्रिंग और जोड़े गए दिनांक को प्रदर्शित करता है।

अपने ऐप में कुंजी जोड़ने के तरीके के बारे में निर्देशों के लिए, अपने ऐप में वेब क्रेडेंशियल कॉन्फ़िगर करें देखें। कुंजियों के प्रारूप और उन्हें कैसे उत्पन्न करें के बारे में अधिक जानकारी के लिए, एप्लिकेशन सर्वर कुंजियाँ देखें।

अपने ऐप में वेब क्रेडेंशियल कॉन्फ़िगर करें

विधि getToken(): Promise<string> FCM को विभिन्न पुश सेवाओं के लिए संदेश अनुरोध भेजते समय VAPID कुंजी क्रेडेंशियल का उपयोग करने की अनुमति देता है। FCM के साथ वेब क्रेडेंशियल कॉन्फ़िगर करें में दिए गए निर्देशों के अनुसार आपके द्वारा जेनरेट की गई या आयात की गई कुंजी का उपयोग करके, मैसेजिंग ऑब्जेक्ट के पुनर्प्राप्त होने के बाद इसे अपने कोड में जोड़ें:

// Add the public key generated from the console here.
messaging.getToken({vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

पंजीकरण टोकन तक पहुंचें

जब आपको किसी ऐप इंस्टेंस के लिए वर्तमान पंजीकरण टोकन पुनर्प्राप्त करने की आवश्यकता होती है, तो पहले उपयोगकर्ता से Notification.requestPermission() के साथ अधिसूचना अनुमतियों का अनुरोध करें। जब दिखाया गया है, तो यह एक टोकन देता है यदि अनुमति दी जाती है या अस्वीकार किए जाने पर वादे को अस्वीकार कर देता है:

function requestPermission() {
  console.log('Requesting permission...');
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      console.log('Notification permission granted.');

FCM को एक firebase-messaging-sw.js फ़ाइल की आवश्यकता है। जब तक आपके पास पहले से कोई firebase-messaging-sw.js फ़ाइल न हो, उस नाम के साथ एक खाली फ़ाइल बनाएं और टोकन प्राप्त करने से पहले उसे अपने डोमेन के रूट में रखें। आप क्लाइंट सेटअप प्रक्रिया में बाद में फ़ाइल में अर्थपूर्ण सामग्री जोड़ सकते हैं।

वर्तमान टोकन पुनर्प्राप्त करने के लिए:

Web version 9

import { getMessaging, getToken } from "firebase/messaging";

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();
getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

Web version 8

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken({ vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

टोकन प्राप्त करने के बाद, इसे अपने ऐप सर्वर पर भेजें और अपनी पसंदीदा विधि का उपयोग करके इसे स्टोर करें।

अगले कदम

सेटअप चरणों को पूरा करने के बाद, वेब के लिए FCM (जावास्क्रिप्ट) के साथ आगे बढ़ने के लिए यहां कुछ विकल्प दिए गए हैं: