फायरबेस का उपयोग करके रिएक्ट में पुश नोटिफिकेशन कैसे लागू करें

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

वेब एप्लिकेशन के मामले में, ब्राउज़र प्रारंभ में इन सूचनाओं को कैप्चर करता है और बाद में उन्हें संबंधित एप्लिकेशन को अग्रेषित करता है।

एक फायरबेस प्रोजेक्ट सेट अप करें

आरंभ करने और Firebase प्रोजेक्ट सेट अप करने के लिए नीचे दिए गए चरणों का पालन करें:

1. वहां जाओ फायरबेस डेवलपर कंसोल, अपने Google ईमेल पते का उपयोग करके साइन इन करें और क्लिक करें कंसोल पर जाएं कंसोल सिंहावलोकन पृष्ठ पर नेविगेट करने के लिए बटन।
2. कंसोल अवलोकन पृष्ठ पर, क्लिक करें एक परियोजना बनाएँ नया प्रोजेक्ट बनाने के लिए बटन। फिर प्रोजेक्ट का नाम प्रदान करें।
3. एक बार प्रोजेक्ट सफलतापूर्वक बन जाने के बाद, प्रोजेक्ट के ओवरव्यू पेज पर नेविगेट करें। एपीआई कुंजी उत्पन्न करने के लिए आपको फायरबेस पर एक आवेदन पंजीकृत करना होगा। ऐप को पंजीकृत करने के लिए, पर क्लिक करें
   instagram viewer
   वेब आइकन, ऐप का नाम प्रदान करें, और पर क्लिक करें रजिस्टर ऐप बटन।
4. अपना रिएक्ट ऐप पंजीकृत करने के बाद फायरबेस कॉन्फ़िगरेशन कोड कॉपी करें।

फायरबेस क्लाउड मैसेजिंग (FCM) सेवा को कॉन्फ़िगर करें

एक बार जब आप फायरबेस पर अपना आवेदन पंजीकृत कर लेते हैं, तो अगला कदम फायरबेस क्लाउड मैसेजिंग (FCM) सेवा को कॉन्फ़िगर करना है।

1. पर नेविगेट करें परियोजना सेटिंग्स पृष्ठ।
2. अगला, पर क्लिक करें क्लाउड मैसेजिंग टैब पर परियोजना सेटिंग्स पृष्ठ। फायरबेस क्लाउड मैसेजिंग बाहरी पुश सेवाओं से जुड़ने के लिए एप्लिकेशन आइडेंटिटी कुंजी जोड़े का उपयोग करता है। इस कारण से, आपको अपनी विशिष्ट पहचान कुंजी जनरेट करने की आवश्यकता है।
3. पर क्लाउड मैसेजिंग सेटिंग्स, पर नेविगेट करें वेब कॉन्फ़िगरेशन अनुभाग, और पर क्लिक करें कुंजी जोड़ी उत्पन्न करें अपनी अनूठी कुंजी उत्पन्न करने के लिए बटन।

रिएक्ट ऐप सेट करें

पहला, एक रिएक्ट ऐप बनाएं. एक बार इंस्टॉल हो जाने के बाद, आगे बढ़ें और इंस्टॉल करें firebase और प्रतिक्रिया-गर्म-टोस्ट पैकेज जिनका उपयोग आप रिएक्ट ऐप में पुश नोटिफिकेशन लागू करने के लिए करेंगे।

एनपीएम फायरबेस प्रतिक्रिया-हॉट-टोस्ट स्थापित करें

आप इस प्रोजेक्ट का सोर्स कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

फायरबेस और क्लाउड मैसेजिंग सर्विस को कॉन्फ़िगर करें

अपने पास जाओ परियोजना सेटिंग्स डेवलपर कंसोल पर पेज, और प्रदान की गई फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट की प्रतिलिपि बनाएँ। में स्रोत निर्देशिका, एक नया बनाएँ firebase.js फ़ाइल और निम्न कोड जोड़ें।

आयात {प्रारंभिक ऐप} से"फायरबेस/ऐप";
आयात {getMessaging, getToken, onMessage} से'फायरबेस/मैसेजिंग';
कॉन्स्ट फायरबेस कॉन्फिग = {
 एपीआई कुंजी: "",
 अधिकृत डोमेन: "",
 प्रोजेक्ट आईडी: "",
 भंडारणबकेट: "",
 संदेश प्रेषक आईडी: "",
 ऐपआईडी: ""
};
कॉन्स्ट ऐप = इनिशियलाइज़एप (फायरबेस कॉन्फिग);
कॉन्स्ट मैसेजिंग = गेटमैसेजिंग (ऐप);

उपरोक्त को बदलें firebaseConfig जिस वस्तु से आपने कॉपी किया है, उसके साथ ऑब्जेक्ट करें परियोजना सेटिंग्स पृष्ठ। यह कोड आपके एप्लिकेशन में FCM कार्यक्षमता को सक्षम करने के लिए Firebase इंस्टेंस को सेट करेगा और क्लाउड मैसेजिंग ऑब्जेक्ट को इनिशियलाइज़ करेगा।

सूचनाओं के उपयोगकर्ता अनुमति अनुरोधों को प्रबंधित करें

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

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

निम्नलिखित कोड को इसमें जोड़ें firebase.js मैसेजिंग ऑब्जेक्ट को इनिशियलाइज़ करने के बाद फाइल करें।

निर्यातकॉन्स्ट अनुरोध अनुमति = () => {
सांत्वना देना।लकड़ी का लट्ठा("उपयोगकर्ता अनुमति का अनुरोध ...");
 अधिसूचना। अनुरोध अनुमति ()। फिर ((अनुमति) => {
अगर (अनुमति "दिया गया") {
सांत्वना देना।लकड़ी का लट्ठा("अधिसूचना उपयोगकर्ता अनुमति दी गई।"); 
वापस करना getToken (मैसेजिंग, { vapidKey: `नोटिफिकेशन_की_पेयर` })
 ।तब((currentToken) => {
अगर (वर्तमान टोकन) {
सांत्वना देना।लकड़ी का लट्ठा('क्लाइंट टोकन:', वर्तमान टोकन);
 } अन्य {

सांत्वना देना।लकड़ी का लट्ठा('एप्लिकेशन पंजीकरण टोकन उत्पन्न करने में विफल।');
 }
 })
 ।पकड़ना((ग़लती होना) => {
सांत्वना देना।लकड़ी का लट्ठा('टोकन प्राप्त करने का अनुरोध करते समय एक त्रुटि हुई।', गलती);
 });
 } अन्य {
सांत्वना देना।लकड़ी का लट्ठा("उपयोगकर्ता अनुमति अस्वीकृत।");
 }
 });
 }
अनुमति का अनुरोध करें();

प्रदान किया गया कोड सूचनाओं के लिए उपयोगकर्ता की अनुमति का अनुरोध करता है और अनुमति प्रतिक्रिया को संभालता है। अगर अनुमति दी जाती है, तो यह उपयोग करके आवेदन के लिए पंजीकरण टोकन प्राप्त करने के लिए आगे बढ़ता है getToken समारोह।

पंजीकरण टोकन सूचना प्राप्त करने वाले उपकरण या ब्राउज़र के लिए एक पहचानकर्ता के रूप में कार्य करता है। फिर आप इस टोकन का उपयोग फायरबेस क्लाउड मैसेजिंग सेटिंग पेज में एक अधिसूचना अभियान स्थापित करने के लिए कर सकते हैं।

प्लेसहोल्डर को बदलना सुनिश्चित करें अधिसूचना_कुंजी_जोड़ी वास्तविक कुंजी जोड़ी के साथ जो आपने पहले उत्पन्न की थी वेब कॉन्फ़िगरेशन अनुभाग।

अधिसूचना श्रोताओं को परिभाषित करें

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

आप में firebase.js फ़ाइल, निम्न कोड जोड़ें।

निर्यातकॉन्स्ट onMessageListener = () =>
नयावादा((संकल्प) => {
 onMessage (मैसेजिंग, (पेलोड) => {
 संकल्प (पेलोड);
 });
});

यह फ़ंक्शन विशेष रूप से पुश सूचनाओं के लिए संदेश श्रोता सेट करता है। onMessage भीतर कार्य करें onMessageListener जब भी ऐप को पुश नोटिफिकेशन मिलता है और फोकस में होता है तो ट्रिगर हो जाता है।

जब कोई सूचना प्राप्त होती है, तो संदेश पेलोड में सूचना से संबंधित प्रासंगिक डेटा होता है, जैसे कि संदेश का शीर्षक और मुख्य भाग।

फायरबेस मैसेजिंग सर्विस वर्कर को परिभाषित करें

FCM को Firebase मैसेजिंग की आवश्यकता होती है सेवा कार्यकर्ता आने वाली पुश सूचनाओं को संभालने के लिए।

सेवा कार्यकर्ता एक जावास्क्रिप्ट फ़ाइल है जो पृष्ठभूमि में चलती है और पुश सूचनाओं को संभालती है—यह वेब को अनुमति देती है ऐप सूचनाएं प्राप्त करने और प्रदर्शित करने के लिए, भले ही उपयोगकर्ता ने ऐप बंद कर दिया हो या किसी भिन्न टैब पर स्विच कर लिया हो या खिड़की।

में /public निर्देशिका, एक नया बनाएँ फायरबेस-मैसेजिंग-sw.js फ़ाइल और निम्नलिखित कोड शामिल करें।

आयातस्क्रिप्ट(" https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
आयातस्क्रिप्ट(" https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
// फायरबेस कॉन्फिग ऑब्जेक्ट 
कॉन्स्ट फायरबेस कॉन्फिग = {
"कॉन्फ़िगरेशन जानकारी"
 };
firebase.initializeApp (firebaseConfig);
कॉन्स्ट मैसेजिंग = फायरबेस.मैसेजिंग ();
मैसेजिंग.ऑनबैकग्राउंड मैसेज (समारोह(पेलोड) {
सांत्वना देना।लकड़ी का लट्ठा('पृष्ठभूमि संदेश प्राप्त हुआ', पेलोड);
कॉन्स्ट नोटिफिकेशनटाइटल = पेलोड.नोटिफिकेशन.टाइटल;
कॉन्स्ट अधिसूचनाविकल्प = {
 मुख्य भाग: पेलोड.नोटिफिकेशन.बॉडी,
 };
 self.registration.showNotification (अधिसूचना शीर्षक,
 अधिसूचना विकल्प);
});

यह कोड रिएक्ट एप्लिकेशन में फायरबेस क्लाउड मैसेजिंग के लिए एक सर्विस वर्कर को सेट करता है, जो सूचनाओं को संभालने और प्रदर्शित करने में सक्षम बनाता है।

एक अधिसूचना घटक बनाएँ

कोई नया बनाएं घटक/अधिसूचना.जेएस फ़ाइल में /src निर्देशिका और निम्न कोड जोड़ें।

आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया';
आयात {टोस्टर, टोस्ट} से'प्रतिक्रिया-गर्म-टोस्ट';
आयात {अनुरोध अनुमति, onMessageListener} से'../फायरबेस';
समारोहअधिसूचना() {
कॉन्स्ट [अधिसूचना, अधिसूचना सेट करें] = उपयोगस्टेट ({ शीर्षक: '', शरीर: '' });
 उपयोग प्रभाव (() => {
 अनुमति का अनुरोध करें();
कॉन्स्ट सदस्यता समाप्त करें = onMessageListener ()। फिर ((पेलोड) => {
 अधिसूचना सेट करें ({
 शीर्षक: पेलोड?.अधिसूचना?.शीर्षक,
 बॉडी: पेलोड?.अधिसूचना?.बॉडी,
 });
 टोस्ट.सफलता (`${पेलोड?.अधिसूचना?.शीर्षक}: ${पेलोड?.नोटिफिकेशन?.बॉडी}`, {
 अवधि: 60000, 
 पद: 'ठीक तरह से ऊपर', अनुभाग का ब्राउज़र पेज
 });
});
वापस करना() => {
 अनसब्सक्राइब.कैच ((ग़लती होना) =>सांत्वना देना।लकड़ी का लट्ठा('असफल: ', इरेट));
 };
 }, []);
वापस करना (



 </div>
 );
}
निर्यातगलती करना अधिसूचना;

यह कोड एक घटक को परिभाषित करता है जो पुश सूचनाओं को संभालता है। यह उपयोग करता है प्रतिक्रिया-गर्म-टोस्ट पुस्तकालय उपयोगकर्ता को सूचनाएं प्रदर्शित करने के लिए।

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

अंत में, अपडेट करें ऐप.जेएस फ़ाइल आयात करने के लिए अधिसूचना अवयव।

आयात'./App.css';
आयात अधिसूचना से'./घटक/अधिसूचना';
समारोहअनुप्रयोग() {
वापस करना (
"अनुप्रयोग">
"ऐप-हेडर"> 

 </header> 
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

पुश अधिसूचना सुविधा का परीक्षण करें

आगे बढ़ो और विकास सर्वर को स्पिन करें और खोलें http://locahlhost: एप्लिकेशन तक पहुंचने के लिए आपके ब्राउज़र पर 3000। एप्लिकेशन को सूचनाएं प्राप्त करने की अनुमति देने के लिए आपको निम्न पॉप-अप प्राप्त करना चाहिए।

क्लिक अनुमति देना. क्लाइंट टोकन जनरेट किया जाना चाहिए और लॉग इन किया जाना चाहिए ब्राउज़र कंसोल. आप अपने रिएक्ट ऐप पर सूचना अभियान भेजने के लिए टोकन का उपयोग करेंगे।

कॉपी करें क्लाइंट टोकन और फायरबेस के डेवलपर कंसोल पर जाएं परियोजना अवलोकन पृष्ठ। क्लिक करें क्लाउड मैसेजिंग के तहत कार्ड अपने दर्शकों को बढ़ाएं और संलग्न करें अनुभाग।

क्लिक अपना पहला अभियान बनाएँ, चुनना फायरबेस अधिसूचना संदेश, और अपनी अधिसूचना के लिए एक शीर्षक और संदेश प्रदान करें। नीचे डिवाइस पूर्वावलोकन अनुभाग, क्लिक करें परीक्षण संदेश भेजें.

पॉप-अप विंडो में क्लाइंट टोकन पेस्ट करें और जोड़ें और क्लिक करें परीक्षा पुश सूचना भेजने के लिए।

यदि आप आवेदन पर हैं, तो आपको एक पुश सूचना प्राप्त होगी। यदि नहीं, तो आपको पृष्ठभूमि सूचना प्राप्त होगी।

फायरबेस क्लाउड मैसेजिंग सेवा का उपयोग करके पुश सूचनाएं भेजना

वेब और मोबाइल एप्लिकेशन दोनों के लिए उपयोगकर्ता अनुभव को बढ़ाने के लिए पुश नोटिफिकेशन एक महत्वपूर्ण विशेषता है। इस गाइड ने उपयोगकर्ता अनुमतियों को संभालने और संदेश श्रोताओं को सेट करने सहित फायरबेस का उपयोग करके पुश सूचनाओं को एकीकृत करने के चरणों पर प्रकाश डाला।

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