👩🏽‍💻 👰🏿 🎍 HTML 5 अधिसूचनाएँ एपीआई 🎛️ 👨🏼‍🌾 💫

हेलो, हैबर। इस लेख में मैं HTML अधिसूचना एपीआई के बारे में बात करूंगा।

अधिसूचना एपीआई क्या सुविधाएँ प्रदान करता है?

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

ब्राउज़र का समर्थन

सफ़ारी ६
क्रोम 27
फ़ायरफ़ॉक्स २२

अधिसूचना निर्माणकर्ता होने के बावजूद, ओपेरा 15 बीटा अधिसूचना एपीआई के साथ काम नहीं करता है।
मोबाइल प्लेटफॉर्म पर, तकनीक काम नहीं करती है ।
वेबकिट इंजन में webkitNotifications के रूप में एक पुराना अंकन है।

यह कैसे काम करता है

कार्य चक्र इस प्रकार है:

भेजने की अनुमति प्राप्त करें;
साइट के लिए नियम तय हो गया है;
नोटिस भेजें।

आपका पहला नोटिस

अधिसूचना भेजने से पहले, अनुमति के लिए जांच करना उचित है।

अनुमति की जाँच

कुल 3 संकल्प विविधताएँ हैं:

चूक
निषेध
दी

अनुमति की जांच करने के लिए, मुझे 3 तरीके मिले:

1. Notification.permission प्रॉपर्टी के मूल्य के माध्यम से।

switch ( Notification.permission.toLowerCase() ) { case "granted": //  break; case "denied": //  break; case "default": //  }

नुकसान:

Google क्रोम में, अनुमति संपत्ति को परिभाषित नहीं किया गया है (प्रलेखन के बावजूद - "स्थैतिक अनुमति विशेषता को अनुमति वापस करनी चाहिए" )।

2. भेजने की अनुमति प्राप्त करने के प्रयास के माध्यम से

 var currentPermission; Notification.requestPermission( function(result) { currentPermission = result } );

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

थोड़ा संकेत:
आप कॉलबैक में देरी का उपयोग करके requestPermission के माध्यम से डिफ़ॉल्ट स्थिति निर्धारित कर सकते हैं।

 var permission, timer = setTimeout( function() { permission = "default" }, 500 ); Notification.requestPermission( function(state){ clearTimeout(timer); permission = state } );

3. एक अधिसूचना भेजकर
प्रत्येक अधिसूचना में घटनाएँ, विवरण बाद में होते हैं।

 var notify = new Notification("test"); notify.onerror = function(){ console.log("permission state = default or denied"); };

नुकसान:
यह दो स्थितियों के साथ काम करता है।

अनुमति प्राप्त करना

Notification.requestPermission को डिफ़ॉल्ट अनुमति से निकाल दिया जाता है और एक फ़ंक्शन लेता है जो चयनित अनुमति को एक तर्क के रूप में प्राप्त करता है।

 Notification.requestPermission( newMessage ); function newMessage(permission) { if( permission != "granted" ) return false; var notify = new Notification("Thanks for letting notify you"); };

अपडेट : kromxr आपको बताता है कि एक अनुमति अनुरोध केवल एक घटना के बाद होगा। उदाहरण के लिए, उपयोगकर्ता ने "सिस्टम नोटिफिकेशन की अनुमति दें" बटन पर क्लिक किया।

अधिसूचना प्रस्तुत करना

इसलिए हमें सूचनाएं मिलीं:

 var mailNotification = new Notification(" ", { tag : "ache-mail", body : ",    ...", icon : "http://habrastorage.org/storage2/cf9/50b/e87/cf950be87f8c34e63c07217a009f1d17.jpg" });

और परिणाम:

हम समझते हैं:
"एंड्री चेर्नशेव" - अधिसूचना शीर्षक (आवश्यक)
इसे अलग-अलग ब्राउज़रों और ओएस में अलग-अलग तरीकों से क्रॉप किया जाता है, मैं इसे 15 अक्षरों तक सीमित करने की सलाह देता हूं।

टैग - एक चेन को सूचनाओं को जोड़ने वाला टैग।
विनिमेय समान टैग के साथ सूचनाएं बनाता है।

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

आइकन - अधिसूचना आइकन।
ओएस एक्स के तहत क्रोम और सफारी पर प्रदर्शित नहीं किया गया।

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

अधिसूचना में 4 इवेंट हैं:

onclick
उपयोगकर्ता द्वारा सूचना निकाय पर क्लिक करने पर आग लग जाती है। क्रॉस या क्लोज बटन (मैक ओएस) पर क्लिक करने पर यह काम नहीं करेगा।

onshow
यह तब काम करता है जब कोई सूचना प्रदर्शित होती है।

onerror
यह बिना अनुमति (डिफ़ॉल्ट, अस्वीकृत) के बिना सूचना दिखाने की कोशिश करने पर काम करता है।

OnClose
खिड़की बंद होने पर आग।
खिड़कियों पर क्रोम में समस्या है। जब एक अधिसूचना पर क्लिक किया जाता है, तो करीबी घटना में आग नहीं लगती है।

निर्णय का परिवर्तन

ब्राउज़र में किसी भी समय, आप सूचना समाधान को हटा / बदल सकते हैं।
Chrome: प्राथमिकताएं - सेटिंग्स - उन्नत सेटिंग्स - गोपनीयता - सामग्री सेटिंग्स - सूचनाएं दिखाएं।
सफ़ारी: प्राथमिकताएँ - सूचनाएं।
फ़ायरफ़ॉक्स: पेज पर राइट क्लिक करें - पेज की जानकारी - अनुमतियाँ - सूचनाएँ प्रदर्शित करें।

जानकारी के दृश्य धारणा के लिए लिंक

HTML 5 अधिसूचनाएँ एपीआई