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

प्लैटफ़ॉर्म चुनें:

iOS+ Android Web Flutter Unity C++

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

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

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

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

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

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

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

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

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

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

पासकोड का नया जोड़ा जनरेट करना

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

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

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

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

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

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

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

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

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

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

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

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

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

The method getToken(): Promise<string> allows FCM to use the VAPID key credential when sending message requests to different push services. एफ़सीएम के साथ वेब क्रेडेंशियल कॉन्फ़िगर करना में दिए गए निर्देशों के मुताबिक, जनरेट किए गए या इंपोर्ट किए गए पासकोड को, मैसेजिंग ऑब्जेक्ट वापस पाने के बाद अपने कोड में जोड़ें:FCM

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

const messaging = getMessaging();
// Add the public key generated from the Firebase 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

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

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

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

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

3. Firebase कंसोल में, DevOps और उपयोगकर्ता जुड़ाव > Messaging पर जाएं.

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

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

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

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

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

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

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

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

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

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

8. टेस्ट को चुनें.

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

अगले चरण

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

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