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

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

FCM SDK केवल HTTPS पर प्रदर्शित पृष्ठों में समर्थित है। यह इसके सेवा कर्मियों के उपयोग के कारण है, जो केवल HTTPS साइटों पर उपलब्ध हैं। यदि आपको एक प्रदाता की आवश्यकता है, तो फायरबेस होस्टिंग की सिफारिश की जाती है और आपके अपने डोमेन पर HTTPS होस्टिंग के लिए नो-कॉस्ट टियर प्रदान करता है।

FCM JavaScript API के साथ आरंभ करने के लिए, आपको अपने वेब ऐप में Firebase जोड़ना होगा और पंजीकरण टोकन तक पहुँचने के लिए तर्क जोड़ना होगा।

FCM SDK को जोड़ें और आरंभ करें

1. यदि आपके पास पहले से नहीं है, तो Firebase JS SDK इंस्टॉल करें और Firebase को इनिशियलाइज़ करें ।

2. फायरबेस क्लाउड मैसेजिंग जेएस एसडीके जोड़ें और फायरबेस क्लाउड मैसेजिंग को इनिशियलाइज़ करें:

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 क्लाउड कंसोल में अपने प्रोजेक्ट के लिए FCM पंजीकरण API को सक्षम करना होगा। जब आप एपीआई को सक्षम करते हैं, तो सुनिश्चित करें कि आप क्लाउड कंसोल में उसी Google खाते से लॉग इन हैं जिसका उपयोग आप फायरबेस के लिए करते हैं, और सही प्रोजेक्ट का चयन करना सुनिश्चित करें। FCM SDK को जोड़ने वाली नई परियोजनाओं में यह API डिफ़ॉल्ट रूप से सक्षम है।

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

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

एक नई कुंजी जोड़ी उत्पन्न करें

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

एक मौजूदा कुंजी जोड़ी आयात करें

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

1. फायरबेस कंसोल सेटिंग्स फलक के क्लाउड मैसेजिंग टैब को खोलें और वेब कॉन्फ़िगरेशन अनुभाग पर स्क्रॉल करें।
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 के साथ आगे बढ़ने के कुछ विकल्प यहां दिए गए हैं:

• संदेश प्राप्त करने के लिए अपने ऐप में कार्यक्षमता जोड़ें।
• हमारे किसी एक ट्यूटोरियल को आज़माएं: अपना पहला संदेश किसी पृष्ठभूमि वाले ऐप को भेजें या एक से अधिक डिवाइस को संदेश भेजें ।
• GitHub पर एक पूर्ण नमूने की समीक्षा करें।
• जावास्क्रिप्ट संदर्भ की समीक्षा करें।
• एपीआई को लागू करने का एक वीडियो वॉकथ्रू देखें।