शुरुआती जानकारी
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.");
}
दूसरा चरण: उपयोगकर्ता को किसी वेबसाइट को सूचनाएं दिखाने की अनुमति देना
अगर उपयोगकर्ता ने वेबसाइट को सूचनाएं दिखाने की अनुमति मैन्युअल रूप से नहीं दी है, तो हमारे बताए गए किसी भी कंस्ट्रक्टर को सुरक्षा से जुड़ी गड़बड़ी का मैसेज दिखेगा.
इस अपवाद को मैनेज करने के लिए, 'कोशिश करें' स्टेटमेंट का इस्तेमाल किया जा सकता है. हालांकि, इसी काम के लिए 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);
इस समय, हो सकता है कि आप कोड को साफ़ रखने के लिए, अपनी सूचना क्लास बनाने के लिए इन सभी इवेंट और कार्रवाइयों को शामिल करना चाहें. हालांकि, यह इस ट्यूटोरियल के दायरे से बाहर है.