परिचय
Notifications API की मदद से, उपयोगकर्ता को किसी इवेंट के लिए सूचनाएं दिखाई जा सकती हैं. ये सूचनाएं, उपयोगकर्ता के इंटरैक्शन के आधार पर और अपने-आप (नए ईमेल, ट्वीट या कैलेंडर इवेंट) दोनों तरह से दिखाई जा सकती हैं. भले ही, फ़ोकस किसी भी टैब पर हो. ड्राफ़्ट स्पेसिफ़िकेशन मौजूद है, लेकिन फ़िलहाल यह किसी स्टैंडर्ड में नहीं है.
सूचनाएं पाने की सुविधा को कुछ ही मिनटों में लागू करने के लिए, यह आसान तरीका अपनाएं:
पहला चरण: Notifications API के साथ काम करने की सुविधा उपलब्ध है या नहीं, यह देखना
हम यह जांच करते हैं कि webkitNotifications काम करता है या नहीं. ध्यान दें कि webkitNotifications का नाम इसलिए है, क्योंकि यह ड्राफ़्ट स्पेसिफ़िकेशन का हिस्सा है. फ़ाइनल स्पेसिफ़िकेशन में, इसके बजाय notifications() फ़ंक्शन होगा.
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
दूसरा चरण: उपयोगकर्ता को किसी वेबसाइट को सूचनाएं दिखाने की अनुमतियां देने की सुविधा देना
अगर उपयोगकर्ता ने वेबसाइट को मैन्युअल तरीके से सूचनाएं दिखाने की अनुमतियां नहीं दी हैं, तो ऊपर बताए गए किसी भी कन्स्ट्रक्टर से सुरक्षा से जुड़ी गड़बड़ी का मैसेज दिखेगा.
अपवाद को मैनेज करने के लिए, try-catch स्टेटमेंट का इस्तेमाल किया जा सकता है. हालांकि, इसके लिए checkPermission तरीके का भी इस्तेमाल किया जा सकता है.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
अगर वेब ऐप्लिकेशन के पास सूचनाएं दिखाने की अनुमतियां नहीं हैं, तो requestPermission तरीके से एक सूचना बार दिखेगा:
हालांकि, यह बहुत ज़रूरी है कि यह याद रखा जाए कि requestPermission तरीका सिर्फ़ उन इवेंट हैंडलर में काम करता है जिन्हें उपयोगकर्ता की कार्रवाई से ट्रिगर किया जाता है. जैसे, माउस या कीबोर्ड इवेंट. ऐसा इसलिए किया जाता है, ताकि अनचाहे जानकारी बार से बचा जा सके. इस मामले में, उपयोगकर्ता की कार्रवाई, आईडी "show_button" वाले बटन पर क्लिक करना है.
अगर उपयोगकर्ता ने किसी बटन या लिंक पर साफ़ तौर पर क्लिक नहीं किया है, तो ऊपर दिया गया स्निपेट कभी काम नहीं करेगा. यह लिंक या बटन, किसी समय requestPermission को ट्रिगर करता है.
तीसरा चरण: लिसनर और अन्य कार्रवाइयां अटैच करना
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
इस समय, हो सकता है कि आप कोड को बेहतर बनाने के लिए, अपनी सूचना क्लास बनाकर इन सभी इवेंट और कार्रवाइयों को शामिल करना चाहें. हालांकि, यह इस ट्यूटोरियल का दायरा नहीं है.