पुश सूचनाएँ उपयोगकर्ताओं को त्वरित संदेश भेजने का एक शानदार तरीका है। किसी बाहरी पुस्तकालय का उपयोग किए बिना जावास्क्रिप्ट का उपयोग करके उन्हें भेजना सीखें।

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

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

सूचनाएं भेजने की अनुमति का अनुरोध करना

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

instagram viewer

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

कॉन्स्ट बटन = दस्तावेज़क्वेरी चयनकर्ता ('बटन')
 बटन.ऐडइवेंट लिस्टनर ("क्लिक करें", ()=> {
 अधिसूचना। अनुरोध अनुमति ()। फिर (अनुमति => {
 चेतावनी (अनुमति)
 })
})

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

ऐसे मामलों के लिए, अस्वीकृत सूचनाओं के लिए उपयोगकर्ता के निर्णय का सम्मान करना बेहतर है और आपको उन्हें और परेशान करने से बचना चाहिए।

बुनियादी सूचनाएं भेजना

आप एक बनाकर एक पुश नोटिफिकेशन बनाते हैं अधिसूचना नए कीवर्ड के साथ ऑब्जेक्ट करें। ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग में गहराई से गोता लगाने के लिए, आप हमारे गाइड को देख सकते हैं जावास्क्रिप्ट में कक्षाएं कैसे बनाएं.

चूंकि अनुमति मिलने पर ही आप सूचनाएं भेजेंगे, इसलिए आपको इसे एक के अंदर लपेटना होगा अगर जाँच करना।

कॉन्स्ट बटन = दस्तावेज़क्वेरी चयनकर्ता ('बटन')
बटन.ऐडइवेंट लिस्टनर ("क्लिक करें", ()=> {
 अधिसूचना। अनुरोध अनुमति ()। फिर (पर्म => {
अगर(पर्म 'दिया गया') {
नया अधिसूचना("उदाहरण अधिसूचना")
 }
 })
})

बटन पर क्लिक करें, और आपको निर्दिष्ट पाठ के साथ अपने वेब ब्राउज़र के निचले दाएं कोने में एक पुश सूचना मिलेगी।

सूचनाएं बनाने का यह सबसे बुनियादी तरीका है, और यह आपके फ़ोन के साथ-साथ आपके कंप्यूटर पर भी काम करता है। आइए कुछ उन्नत अधिसूचना गुणों को देखें।

उन्नत सूचनाएं गुण

अधिसूचना ऑब्जेक्ट बनाते समय अधिसूचना शीर्षक के अतिरिक्त, आप कन्स्ट्रक्टर को विकल्प तर्क भी पास कर सकते हैं। यह विकल्प तर्क एक वस्तु होना चाहिए। यहां, आप अपनी अधिसूचना को अनुकूलित करने के लिए कई विकल्प जोड़ सकते हैं।

शरीर संपत्ति

आपको पता होना चाहिए कि पहली संपत्ति है शरीर संपत्ति। आप आमतौर पर टेक्स्ट के रूप में अधिक जानकारी देने के लिए, अपनी अधिसूचना में मुख्य भाग जोड़ने के लिए इसका उपयोग करेंगे। यहाँ एक सरल उदाहरण है:

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

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

डेटा विशेषता

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

बटन.ऐडइवेंट लिस्टनर ("क्लिक करें", ()=> {
 अधिसूचना। अनुरोध अनुमति ()। फिर (पर्म => {
अगर(पर्म 'दिया गया') {
कॉन्स्ट सूचना = नया अधिसूचना("उदाहरण अधिसूचना", {
 शरीर: "यह अधिक पाठ है",
 आंकड़े: {नमस्ते: "दुनिया"}
 })

 चेतावनी (अधिसूचना.डेटा.हैलो)
 }
 })
})

से डेटा एक्सेस कर सकते हैं आंकड़े संपत्ति उपरोक्त कोड ब्लॉक में दिखाए गए समान है (अंदर चेतावनी()).

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

कॉन्स्ट सूचना = नया अधिसूचना("उदाहरण अधिसूचना", { 
 शरीर: "यह अधिक पाठ है",
 आंकड़े: {नमस्ते: "दुनिया"} 
})
अधिसूचना। ऐडइवेंट लिस्टनर ("बंद करना", ई => {
सांत्वना देना.लॉग (e.target.data.hello)
})

यदि कोई सूचना बंद करता है या उस पर क्लिक करता है तो आपको कुछ करने की आवश्यकता होने पर डेटा पास करने का यह एक शानदार तरीका है। इसके अलावा बंद करना घटना (जो अधिसूचना को बंद करने पर निष्पादित होती है), आपको इन्हें रखना चाहिए घटना श्रोता आपके दिमाग मे:

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

आइकन संपत्ति

आइकन संपत्ति पुश अधिसूचना में आइकन जोड़ने के लिए है। मान लें कि आपके पास नाम का एक आइकन लोगो है logo.png वर्तमान निर्देशिका में, आप इसे अपनी सूचनाओं में इस प्रकार उपयोग कर सकते हैं:

कॉन्स्ट सूचना = नया अधिसूचना("उदाहरण अधिसूचना", { 
 चिह्न: "लोगो.पीएनजी"
})

अगर आपको अपनी फाइलों से लिंक करने में परेशानी हो रही है, तो आपको इसकी जरूरत है सापेक्ष URL और निरपेक्ष URL के कार्य को समझें.

जब आप फ़ाइल को सहेजते हैं, ब्राउज़र को रीफ़्रेश करते हैं, और बटन पर क्लिक करते हैं, तो अधिसूचना में हेडर और बॉडी के बाईं ओर छवि प्रदर्शित होगी।

टैग विशेषता

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

हमारे पिछले बटन उदाहरण पर विचार करें (बिना टैग के)। यदि आप जल्दी से बटन को तीन बार क्लिक करते हैं, तो तीन सूचनाएं दिखाई देंगी, और वे एक दूसरे के ऊपर ढेर हो जाएंगी। अब मान लें कि आपने अधिसूचना में निम्न टैग जोड़ा है:

कॉन्स्ट सूचना = नया अधिसूचना("उदाहरण अधिसूचना", { 
 शरीर: "यह अधिक पाठ है",
 उपनाम: "मेरा नया टैग"
})

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

कॉन्स्ट सूचना = नया अधिसूचना("उदाहरण अधिसूचना", { 
 शरीर: गणित।अनियमित()
 चिह्न: "लोगो.पीएनजी",
 उपनाम: "माई बॉडी टैग"
})

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

जावास्क्रिप्ट का उपयोग करके पुश अधिसूचना का एक उदाहरण

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

होने देना अधिसूचना
दस्तावेज़ऐडइवेंट लिस्टनर ("दृश्यता-परिवर्तन", ()=> {
अगर(दस्तावेज़.visibilityState "छिपा हुआ") {
 सूचना = नया अधिसूचना("कृपया वापस आना", {
 शरीर: "अभी मत जाओ :("
 उपनाम: "वापस लौटें"
 })
 } अन्य {
 अधिसूचना बंद करें ()
 }
})

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

जावास्क्रिप्ट के बारे में अधिक जानें

ईवेंट अधिसूचना जावास्क्रिप्ट में आपको मिलने वाली कई विशेषताओं में से एक है। सूचनाओं के साथ वास्तव में अच्छा होने के लिए, आपको पहले जावास्क्रिप्ट की मौलिक भाषा सुविधाओं और सिंटैक्स को समझना होगा। सरल गेम बनाना एक ऐसा तरीका है जिससे आप अपने कौशल को बढ़ा सकते हैं और भाषा की बुनियादी अवधारणाओं से खुद को परिचित कर सकते हैं।