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

FCM JavaScript API आपको Push API का समर्थन करने वाले ब्राउज़र में चल रहे वेब ऐप्लिकेशन में नोटिफ़िकेशन संदेश पाने देता है. इसमें इस सहायता मैट्रिक्स में शामिल ब्राउज़र के वर्शन और Push API के ज़रिए बनाए गए Chrome एक्सटेंशन शामिल हैं.

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

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

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

  1. अगर आपने पहले से ऐसा नहीं किया है, तो Firebase JS SDK टूल इंस्टॉल करें और Firebase शुरू करें.

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

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

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

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

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

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

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

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

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

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

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) का इस्तेमाल करने के लिए यहां कुछ विकल्प दिए गए हैं: