वेब ऐप्लिकेशन में Firebase क्लाउड से मैसेज भेजने की सुविधा का इस्तेमाल शुरू करना

इस गाइड में बताया गया है कि वेब क्लाइंट ऐप्लिकेशन में Firebase Cloud Messaging का इस्तेमाल कैसे शुरू करें, ताकि भरोसेमंद तरीके से मैसेज भेजे जा सकें.

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

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

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

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

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

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

1. Firebase कंसोल में, settings सेटिंग > सामान्य पर जाएं. इसके बाद, क्लाउड से मैसेज टैब पर क्लिक करें

2. वेब कॉन्फ़िगरेशन सेक्शन पर जाएं.

3. वेब पुश सर्टिफ़िकेट टैब में जाकर, कुंजी का जोड़ा जनरेट करें पर क्लिक करें.

   कंसोल में एक सूचना दिखती है, जिसमें बताया जाता है कि कुंजी का जोड़ा जनरेट किया गया है. इसमें सार्वजनिक पासकोड की स्ट्रिंग और उसे जोड़ने की तारीख भी दिखती है.

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

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

1. Firebase कंसोल में, settings सेटिंग > सामान्य पर जाएं. इसके बाद, Cloud Messaging टैब पर क्लिक करें

2. वेब कॉन्फ़िगरेशन सेक्शन पर जाएं.

3. Web Push certificates टैब में, लिंक टेक्स्ट ढूंढें और उसे चुनें: मौजूदा कुंजी का जोड़ा इंपोर्ट करें.

4. कुंजी का जोड़ा इंपोर्ट करें डायलॉग बॉक्स में, संबंधित फ़ील्ड में अपनी सार्वजनिक और निजी कुंजियां डालें. इसके बाद, इंपोर्ट करें पर क्लिक करें.

   कंसोल में, सार्वजनिक पासकोड की स्ट्रिंग और उसे जोड़ने की तारीख दिखती है.

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

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

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

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

const messaging = getMessaging();
// Add the public key generated from the Firebase console here.
register(messaging, {vapidKey: "BKagOny0KF_2pCJQ3m....moL0ewzQ8rZu"});

सूचना की अनुमति का अनुरोध करना और सर्विस वर्कर को कॉन्फ़िगर करना

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

Firebase इंस्टॉलेशन आईडी को ऐक्सेस करना

ऐप्लिकेशन इंस्टेंस को रजिस्टर करने और मैसेज टारगेटिंग के लिए, Firebase इंस्टॉलेशन आईडी (FID) को वापस पाने के लिए:

import { getMessaging, onRegistered, register } from "firebase/messaging";

const messaging = getMessaging();

// 1. Implement callback to receive the Firebase installation ID upon registration.
// This is triggered every time a manual register() finishes, a FID change
// is detected, or a pushsubscriptionchange event is fired.
onRegistered(messaging, (installationId) => {
  console.log('Registered installation ID:', installationId);

  // Send the Firebase Installation ID to your app server and update the UI if needed.
  sendRegistrationToServer(installationId);
});

// 2. You can also manually trigger registration (recommended on app startup)
register(messaging, {
  vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>'
}).then(() => {
  // Success! The Firebase Installation ID can be used to target messages to this app
  // instance and will be delivered asynchronously to your onRegistered() callback.
}).catch((err) => {
  console.error('An error occurred while registering', err);
});
messaging_register.js

onRegistered कॉलबैक को इन तीन स्थितियों में ट्रिगर किया जाता है:

1. हर बार जब मैन्युअल तरीके से किया गया register() कॉल खत्म होता है.
2. Firebase इंस्टॉलेशन आईडी में बदलाव का पता चला है.
3. A pushsubscriptionchange इवेंट ट्रिगर होता है.

Firebase इंस्टॉलेशन आईडी मिलने के बाद, उसे अपने ऐप्लिकेशन सर्वर पर भेजें. साथ ही, उसे अपनी पसंद के तरीके से सेव करें.

रजिस्ट्रेशन टोकन को ऐक्सेस करना (अब उपलब्ध नहीं है)

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

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

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

टेस्ट के तौर पर सूचना वाला मैसेज भेजना

1. टारगेट डिवाइस पर ऐप्लिकेशन इंस्टॉल करें और उसे चलाएं. Apple डिवाइसों पर, आपको रिमोट सूचनाएं पाने की अनुमति का अनुरोध स्वीकार करना होगा.

2. देख लें कि डिवाइस पर ऐप्लिकेशन बैकग्राउंड में चल रहा हो.

3. Firebase कंसोल में, DevOps और यूज़र ऐक्टिविटी > मैसेजिंग पर जाएं

4. कैंपेन बनाएं.

   • अगर यह आपका पहला मैसेज है, तो:

     1. अपना पहला कैंपेन बनाएं को चुनें.

     2. Firebase सूचना के मैसेज को चुनें. इसके बाद, बनाएं को चुनें.

   • अगर आपने पहले कैंपेन बनाए हैं, तो:

     1. कैंपेन टैब पर, नया कैंपेन चुनें.

     2. सूचनाएं पर क्लिक करें.

5. मैसेज का टेक्स्ट डालें.

6. दाएं पैनल में जाकर, टेस्ट मैसेज भेजें को चुनें.

7. FCM रजिस्ट्रेशन टोकन जोड़ें लेबल वाले फ़ील्ड में, अपना रजिस्ट्रेशन टोकन डालें.

8. जांचें को चुनें.

टेस्ट करें को चुनने के बाद, टारगेट किए गए क्लाइंट डिवाइस पर सूचना मिलनी चाहिए. इस दौरान, ऐप्लिकेशन बैकग्राउंड में चल रहा हो.

अगले चरण

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

• डिवाइसों पर मैसेज भेजना
• JavaScript क्लाइंट में मैसेज पाना
• विषयों के हिसाब से मैसेज भेजना