सूचनाएं एपीआई का इस्तेमाल करना

Ernest Delgado

परिचय

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 तरीके से एक इन्फ़ोबार दिखेगा:

Google Chrome में सूचनाओं की अनुमति देने वाला इन्फ़ोबार.

हालांकि, यह बहुत ज़रूरी है कि 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);

इस समय, आपको इन सभी इवेंट और कार्रवाइयों को इनकैप्सुलेट करना पड़ सकता है. इसके लिए, आपको अपनी सूचना क्लास बनानी होगी, ताकि कोड को साफ़ रखा जा सके. हालांकि, यह इस ट्यूटोरियल के दायरे से बाहर है.