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

FCM JavaScript API आपको Chrome ब्राउज़र पर चल रहे वेब ऐप्लिकेशन Push API. इसमें, इस support matrix और Chrome एक्सटेंशन पुश एपीआई के ज़रिए भेजा है.

FCM SDK सिर्फ़ एचटीटीपीएस पर दिखाए जाने वाले पेजों पर काम करता है. यह है इसकी वजह सर्विस वर्कर का इस्तेमाल होता है, जो सिर्फ़ एचटीटीपीएस साइटों पर उपलब्ध होते हैं. अगर आपने आपको एक कंपनी की ज़रूरत होगी, Firebase होस्टिंग इसका सुझाव दिया जाता है. साथ ही, यह आपके डोमेन पर एचटीटीपीएस होस्टिंग के लिए बिना शुल्क वाला एक टियर उपलब्ध कराता है.

FCM JavaScript API का इस्तेमाल शुरू करने के लिए, आपको Firebase को अपने वेब ऐप्लिकेशन पर जोड़ें और रजिस्ट्रेशन टोकन ऐक्सेस करने के लिए लॉजिक जोड़ें.

FCM SDK टूल जोड़ना और शुरू करना

यदि आपने पहले से ऐसा नहीं किया है, तो Firebase JS SDK इंस्टॉल करके, Firebase शुरू करें.
'Firebase क्लाउड से मैसेज' JS SDK टूल जोड़ें और Firebase क्लाउड से मैसेज शुरू करें:

Web

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

import firebase from "firebase/compat/app";
import "firebase/compat/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 या उसके बाद के वर्शन पर, आपको FCM रजिस्ट्रेशन एपीआई Google Cloud Console में जोड़ा जा सकता है. एपीआई चालू करते समय,पक्का करें कि आपने Cloud Console में उसी Google खाते से लॉग इन किया है जिसका इस्तेमाल आपने किया है Firebase में बदलाव करें और पक्का करें कि सही प्रोजेक्ट चुना गया हो. नए प्रोजेक्ट FCM SDK टूल में, यह एपीआई डिफ़ॉल्ट रूप से चालू होता है.

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

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

कुंजी का नया जोड़ा जनरेट करें

खोलें Cloud से मैसेज भेजने वाला टैब, Firebase कंसोल की सेटिंग में दिखेगा पैनल में जाकर वेब कॉन्फ़िगरेशन सेक्शन तक स्क्रोल करें.
वेब पुश सर्टिफ़िकेट टैब में, 'की पेयर जनरेट करें' पर क्लिक करें. कॉन्टेंट बनाने कंसोल एक सूचना दिखाता है कि कुंजी का जोड़ा जनरेट हुआ है, और सार्वजनिक पासकोड स्ट्रिंग और तारीख जोड़ी गई.

कुंजी का मौजूदा जोड़ा इंपोर्ट करें

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

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

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

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

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

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

const messaging = getMessaging();
// Add the public key generated from the console here.
getToken(messaging, {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

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

Web

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

टोकन पाने के बाद, उसे अपने ऐप्लिकेशन सर्वर और स्टोर पर भेजें अपने पसंदीदा तरीके से उसे अपडेट करें.

अगले चरण

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

अपने ऐप्लिकेशन में कुछ सुविधाएं जोड़ें मैसेज मिल सकें.
हमारे ट्यूटोरियल में से कोई एक आज़माएं: बैकग्राउंड वाले ऐप्लिकेशन पर अपना पहला मैसेज भेजें या कई डिवाइसों पर मैसेज भेजें.
GitHub पर पूरा सैंपल देखें.
JavaScript रेफ़रंस की समीक्षा करें.
लागू करने के बारे में सिलसिलेवार तरीके से निर्देश देने वाला वीडियो देखें. एपीआई.