"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > रिएक्ट नेटिव (एंड्रॉइड) में पुश नोटिफिकेशन कैसे लागू करें

रिएक्ट नेटिव (एंड्रॉइड) में पुश नोटिफिकेशन कैसे लागू करें

2024-11-03 को प्रकाशित
ब्राउज़ करें:677

क्या आपने कभी हमारे द्वारा इंस्टॉल किए गए ऐप्स से प्राप्त होने वाली सूचनाओं के बारे में सोचा है? या स्विगी या ज़ोमैटो अपने क्रिएटिव नोटिफिकेशन से हमें सुबह 3 बजे खाना ऑर्डर करने के लिए कैसे उकसा रहे हैं? ?

आइए अधिसूचनाओं की अवधारणा के बारे में गहराई से जानें!

सूचनाएं क्या हैं?

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

अब दो प्रकार की सूचनाएं हो सकती हैं जैसा कि नीचे दिखाया गया है -

How to implement push notifications in React Native (Android)

सर्वर पुश नोटीफिकेशन

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

पुश अधिसूचना कैसे काम करती है:

  1. पंजीकरण: जब ऐप इंस्टॉल किया जाता है या पहली बार खोला जाता है, तो ऐप ओएस की पुश अधिसूचना सेवा (एपीएन या एफसीएम) से एक अद्वितीय डिवाइस टोकन का अनुरोध करता है।
  2. सर्वर संचार: ऐप इस टोकन को ऐप के बैकएंड सर्वर पर भेजता है, जो इसे भविष्य में उपयोग के लिए संग्रहीत करता है।
  3. सूचनाएं भेजना: सर्वर डिवाइस टोकन के साथ पुश अधिसूचना सेवा (एपीएन/एफसीएम) को एक अधिसूचना पेलोड (शीर्षक, संदेश, कार्रवाई बटन इत्यादि युक्त) भेजता है।
  4. डिलीवरी: पुश अधिसूचना सेवा संबंधित डिवाइस पर संदेश पहुंचाती है, भले ही ऐप नहीं चल रहा हो।

इन-ऐप अधिसूचना

इन-ऐप नोटिफिकेशन वे संदेश या अलर्ट हैं जो उपयोगकर्ताओं को तब दिखाए जाते हैं जब वे सक्रिय रूप से ऐप का उपयोग कर रहे होते हैं। पुश नोटिफिकेशन के विपरीत, इन्हें सर्वर के हस्तक्षेप की आवश्यकता नहीं होती है और ये ऐप के भीतर ही ट्रिगर हो जाते हैं, आमतौर पर उपयोगकर्ता की गतिविधियों या ऐप इवेंट के परिणामस्वरूप।

इन-ऐप अधिसूचना कैसे काम करती है:

  1. ईवेंट ट्रिगर: जब ऐप के अंदर कोई विशिष्ट घटना घटती है (जैसे कोई उपयोगकर्ता किसी मील के पत्थर तक पहुंचता है या किसी सुविधा पर ध्यान देने की आवश्यकता होती है), तो ऐप इन-ऐप अधिसूचना ट्रिगर कर सकता है।
  2. प्रदर्शन: अधिसूचना को ऐप के यूआई के भीतर एक बैनर, मोडल या पॉप-अप के रूप में दिखाया जाता है, जो उपयोगकर्ता का मार्गदर्शन करता है या उन्हें घटना के बारे में सूचित करता है।
  3. कस्टम लॉजिक: इन-ऐप नोटिफिकेशन को सीधे ऐप के कोड द्वारा नियंत्रित किया जाता है और ऐप की आंतरिक स्थिति या तर्क के आधार पर गतिशील रूप से दिखाया जा सकता है।

रिएक्ट नेटिव एंड्रॉइड ऐप में कार्यान्वयन:

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

आरंभ करने के लिए हम OneSignal नामक एक तृतीय-पक्ष सेवा का उपयोग करेंगे। मैं हाल ही में इस मंच पर आया और उनके द्वारा दी जाने वाली सेवाओं से आश्चर्यचकित रह गया।

वनसिग्नल के बारे में:

How to implement push notifications in React Native (Android)

OneSignal एक पुश नोटिफिकेशन सेवा है जो ऐप डेवलपर्स को मोबाइल ऐप, वेबसाइट और ईमेल सहित विभिन्न प्लेटफार्मों पर उपयोगकर्ताओं को लक्षित सूचनाएं भेजने में सक्षम बनाती है। यह पुश, इन-ऐप और वेब नोटिफिकेशन का समर्थन करता है, जो सेगमेंटेशन, ऑटोमेशन, ए/बी टेस्टिंग और रियल-टाइम एनालिटिक्स जैसी सुविधाएं प्रदान करता है। व्यक्तिगत संदेश भेजने के लिए आसान-से-एकीकृत समाधान की पेशकश करके उपयोगकर्ता जुड़ाव और प्रतिधारण में सुधार के लिए वनसिग्नल का व्यापक रूप से उपयोग किया जाता है। उनके निःशुल्क स्तर में 10,000/माह निःशुल्क ईमेल भेजना, असीमित मोबाइल पुश भेजना, यात्रा वर्कफ़्लो, जीडीपीआर अनुपालन, ए/बी परीक्षण

शामिल हैं।

गाइड पर वापस जा रहे हैं, चूंकि हम पहले से ही जानते हैं कि पुश नोटिफिकेशन के लिए एफसीएम (फायरबेस क्लाउड मैसेजिंग) के माध्यम से सर्वर-साइड हैंडलिंग की आवश्यकता होती है, इसलिए पालन करने के लिए कुछ चरण हैं:

  1. फ़ायरबेस प्रोजेक्ट सेट करें (यदि आपके पास पहले से ही फ़ायरबेस प्रोजेक्ट है तो पहले दो चरणों को अनदेखा करें):

    • फायरबेस कंसोल पर जाएं और अपने खाते में लॉग इन करें।
    • यहां से एक प्रोजेक्ट बनाएं और चरणों का पालन करें How to implement push notifications in React Native (Android)
    • एक बार आपका प्रोजेक्ट बन जाने के बाद साइडबार से प्रोजेक्ट सेटिंग्स पर जाएं How to implement push notifications in React Native (Android)
    • बार से सेवा खातों पर नेविगेट करें और यह इस तरह दिखना चाहिए How to implement push notifications in React Native (Android)
    • नई निजी कुंजी जेनरेट करें पर क्लिक करें और यह एक json फ़ाइल डाउनलोड करेगा, ध्यान से इसे कहीं सुरक्षित संग्रहीत करेगा, OneSignal सेट करते समय हमें इसकी आवश्यकता होगी।
  2. वनसिग्नल सेट करें

    • वनसिग्नल पर जाएं और एक खाता बनाएं।
    • खाता बनाने के बाद सेटअप चरणों से गुजरें और एक संगठन बनाएं और अब, आपको ऐप्स जोड़ने के लिए एक पेज दिखाई देगा।
    • इस पृष्ठ में अपने ऐप का नाम दें और हमारे मामले के लिए Google Android (FCM) चुनें। How to implement push notifications in React Native (Android) और अपने प्लेटफ़ॉर्म को कॉन्फ़िगर करें पर क्लिक करें
    • अब आपको इस पृष्ठ पर पुनः निर्देशित किया जाएगा जहां हम फायरबेस कॉन्फ़िगरेशन के दौरान डाउनलोड की गई सेवा खाता json फ़ाइल का उपयोग करेंगे How to implement push notifications in React Native (Android) json अपलोड करें और फिर सहेजें और जारी रखें
    • अगले पृष्ठ पर लक्ष्य एसडीके के रूप में रिएक्ट नेटिव/एक्सपो का चयन करें और फिर सहेजें और जारी रखें फिर से
    • अगली स्क्रीन में आपको अपनी ऐप आईडी मिलेगी, यह एक गोपनीय आईडी है और इस आईडी का उपयोग करके कोई भी आपके ऐप में नोटिफिकेशन ट्रिगर कर सकता है, इसलिए इस रहस्य से सावधान रहें।

हमने फायरबेस और वनसिग्नल में सेटअप पूरा कर लिया है, अब केवल कुछ काम बचा है कॉफी विद कोड

अपने ऐप में OneSignal जोड़ें और इसे कॉन्फ़िगर करें

  • चरण 1: पहले इस कमांड को चलाकर अपने ऐप में वनसिग्नल जोड़ें
                       npm i react-native-onesignal
  • चरण 2: आपके Index.js या App.tsx या App.js में, जो भी आपके प्रोजेक्ट का मूल है, OneSignal आयात करें
             import { OneSignal } from 'react-native-onesignal';

और आपने OneSignal को प्रारंभ करने के लिए इस कोड स्निपेट को जोड़ा है

                    OneSignal.initialize('YOUR_APP_ID');

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

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

                         OneSignal.login(userId)

एक बार जब उपयोगकर्ता सफलतापूर्वक सदस्यता ले लेता है, तो यह डैशबोर्ड में इस तरह दिखाई देगा
How to implement push notifications in React Native (Android)

अब आपको वनसिग्नल का ठीक से उपयोग न होने या कुछ गंभीर त्रुटियों के साथ कुछ समस्याएं आ सकती हैं, इसलिए यहां एक हिस्सा है जिसका आप अनुसरण कर सकते हैं जिससे मुझे उन मुद्दों को हल करने में मदद मिली।

  • चरण 3: अपने android\app\build.gradle के अंदर इस कोड स्निपेट को जोड़ें
dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}
  • चरण 4: एंड्रॉइड में पुश नोटिफिकेशन के लिए आवश्यक अनुमतियां प्रदान करने के लिए, android\app\src\main\AndroidManifest.xml में जोड़ें
    

एप्लिकेशन टैग के ठीक पहले। हालाँकि, इंटरनेट की अनुमति वैकल्पिक है क्योंकि इसे डिफ़ॉल्ट रूप से सक्षम किया जा सकता है।

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

स्वयं आज़माएं और यदि कोई संदेह हो तो आप नीचे टिप्पणी कर सकते हैं। अधिक विस्तृत दिशानिर्देशों के लिए अनुसरण करें!

संदर्भ:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

हैप्पी कोडिंग!?‍?

विज्ञप्ति वक्तव्य यह लेख यहां पुन: प्रस्तुत किया गया है: https://dev.to/dasswarup/how-to-implement-push-notifications-in-react-native-android-llll?1 यदि कोई उल्लंघन है, तो कृपया स्टडी_गोलंग@163.com पर संपर्क करें। इसे हटाने के लिए
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3