जावास्क्रिप्ट फायरबेस क्लाउड मैसेजिंग क्लाइंट ऐप सेट करें

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

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

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

एफसीएम एसडीके जोड़ें और प्रारंभ करें

यदि आपने पहले से नहीं किया है, तो Firebase JS SDK इंस्टॉल करें और Firebase प्रारंभ करें ।
फायरबेस क्लाउड मैसेजिंग जेएस एसडीके जोड़ें और फायरबेस क्लाउड मैसेजिंग आरंभ करें:

वेब मॉड्यूलर एपीआई

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

यदि आप वर्तमान में वेब के लिए एफसीएम का उपयोग कर रहे हैं और एसडीके 6.7.0 या बाद में अपग्रेड करना चाहते हैं, तो आपको Google क्लाउड कंसोल में अपने प्रोजेक्ट के लिए एफसीएम पंजीकरण एपीआई सक्षम करना होगा। जब आप एपीआई सक्षम करते हैं, तो सुनिश्चित करें कि आप क्लाउड कंसोल में उसी Google खाते से लॉग इन हैं जिसका उपयोग आप फायरबेस के लिए करते हैं, और सही प्रोजेक्ट का चयन करना सुनिश्चित करें। एफसीएम एसडीके को जोड़ने वाली नई परियोजनाओं में यह एपीआई डिफ़ॉल्ट रूप से सक्षम है।

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

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

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

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

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

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

फायरबेस कंसोल सेटिंग्स फलक का क्लाउड मैसेजिंग टैब खोलें और वेब कॉन्फ़िगरेशन अनुभाग तक स्क्रॉल करें।
वेब पुश प्रमाणपत्र टैब में, लिंक टेक्स्ट ढूंढें और चुनें, "मौजूदा कुंजी जोड़ी आयात करें।"
कुंजी जोड़ी आयात करें संवाद में, संबंधित फ़ील्ड में अपनी सार्वजनिक और निजी कुंजी प्रदान करें और आयात पर क्लिक करें। कंसोल सार्वजनिक कुंजी स्ट्रिंग और जोड़ी गई तारीख प्रदर्शित करता है।

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

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

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

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 modular API

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 namespaced API

// 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

टोकन प्राप्त करने के बाद, इसे अपने ऐप सर्वर पर भेजें और अपनी पसंदीदा विधि का उपयोग करके इसे संग्रहीत करें।

अगले कदम

सेटअप चरणों को पूरा करने के बाद, वेब (जावास्क्रिप्ट) के लिए एफसीएम के साथ आगे बढ़ने के लिए यहां कुछ विकल्प दिए गए हैं:

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