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

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

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

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

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

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

2. Firebase Cloud Messaging JS SDK जोड़ें और Firebase Cloud Messaging को शुरू करें:

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

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

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

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

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

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

किसी मौजूदा पासकोड को इंपोर्ट करना

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

1. Firebase कंसोल के सेटिंग पैनल में मौजूद Cloud Messaging टैब खोलें. इसके बाद, वेब कॉन्फ़िगरेशन सेक्शन पर जाएं.
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 फ़ाइल नहीं है, तो उस नाम की एक खाली फ़ाइल बनाएं. इसके बाद, टोकन पाने से पहले उसे अपने डोमेन के रूट में रखें. क्लाइंट सेटअप करने की प्रोसेस के दौरान, फ़ाइल में काम का कॉन्टेंट बाद में जोड़ा जा सकता है.

मौजूदा टोकन वापस पाने के लिए:

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

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

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