सूचना एपीआई को समझना

Html5rocks लेखों के अनुवाद की एक श्रृंखला जारी रखना। हमने पहले से ही फोंट एम्बेड करने के तरीके, वीडियो के साथ काम करने के तरीके के बारे में बात की थी, आज हम नोटिफिकेशन एपीआई का उपयोग करके ब्राउज़र में पॉप-अप संदेश बनाने के बारे में बात करेंगे। दुर्भाग्य से, यह अब तक केवल क्रोम में काम करता है, लेकिन पहले से ही विनिर्देश का एक प्रारंभिक संस्करण है। बिल्ली के विवरण के तहत।

पहले, जांचें कि क्या इस कार्यक्षमता का उपयोग करना संभव है:

if (window.webkitNotifications) {
console.log( "Notifications are supported!" );
}
else {
console.log( "Notifications are not supported for this Browser/OS version yet." );
}


WebkitNotifications नाम अस्थायी है - मानक अभी भी स्वीकृत नहीं है।

अगला, हम स्वयं ही अलर्ट बनाते हैं, जो या तो एक साधारण टेक्स्ट संदेश या html हो सकता है। नीचे एक फ़ंक्शन है जो सेटिंग्स के आधार पर दोनों प्रकार के अलर्ट बनाता है:

function createNotificationInstance(options) {
if (options.notificationType == 'simple' ) {
return window.webkitNotifications.createNotification(
'icon.png' , 'Notification Title' , 'Notification content...' );
} else if (options.notificationType == 'html' ) {
return window.webkitNotifications.createHTMLNotification( 'http://someurl.com' );
}
}


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

document .querySelector( '#show_button' ).addEventListener( 'click' , function () {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
createNotificationInstance({ notificationType: 'html' });
} else {
window.webkitNotifications.requestPermission();
}
}, false );


यदि अनुमतियां अभी तक जारी नहीं की गई हैं, तो हम इस संदेश को देखेंगे:



यहाँ मुख्य बिंदु यह है कि requestPermission विधि को केवल एक घटना के परिणामस्वरूप कहा जा सकता है, जैसे कि एक कुंजी पर माउस क्लिक। इस प्रकार, संदेश प्रदर्शित करने के लिए हमें हमेशा उपयोगकर्ता गतिविधि की आवश्यकता होती है।

हम एक चेतावनी की उपस्थिति से संबंधित कुछ कार्यों का कारण भी बन सकते हैं - पृष्ठभूमि का रंग बदलना, एक ध्वनि खेलना, और इसी तरह। यह कैसे करें नीचे दिखाया गया है:

document .querySelector( '#show_button' ).addEventListener( 'click' , function () {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = createNotificationInstance({notificationType: 'html' });
notification_test.ondisplay = function () { ... do something ... };
notification_test.onclose = function () { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false );


यहां आप किसी भी उपयोगकर्ता के नवीनतम ट्वीट्स को डाउनलोड करने का एक उदाहरण देख सकते हैं

और आखिरी टिप्पणी। स्क्रीन पर केवल 5 संदेश एक बार में प्रदर्शित किए जा सकते हैं, बाकी दृश्यमान लोगों को बंद करने के बाद दिखाई देंगे।