सूचना के लिए इंटरैक्शन ज़रूरी है - डेस्कटॉप पर एक सहज सूचना UX

Chrome में सूचनाएं और पुश मैसेज की सुविधा लॉन्च होने के बाद, हमें बहुत कुछ सीखने को मिला है. डेस्कटॉप-क्लास डिवाइसों के बारे में एक खास सुझाव यह था कि सूचनाएं तब तक उपयोगकर्ता की स्क्रीन पर दिखती रहेंगी, जब तक उपयोगकर्ता उन्हें हटा नहीं देता.

पेज खुला होने पर, एक आसान JavaScript टाइमर बनाया जा सकता है, जो सूचना को अपने-आप बंद कर देगा. हालांकि, अब हम सेवा वर्कर वाली दुनिया में हैं: जहां वेब ऐप्लिकेशन, विंडो के लाइफ़टाइम के बाद भी काम कर सकते हैं. साथ ही, संसाधनों को बचाने के लिए, सेवा वर्कर को जल्द से जल्द स्लीप मोड में डाल दिया जाता है. इसका मतलब है कि हमें उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, कोई दूसरा तरीका ढूंढना होगा.

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

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

ऐसा लग सकता है कि यह कोई खास बात नहीं है. हालांकि, इसका मतलब है कि जब तक कोई और निर्देश न दिया जाए, तब तक सूचना को कुछ समय बाद हटा दिया जाना चाहिए.

Chrome 47 (अक्टूबर 2015 में बीटा वर्शन) अब requireInteraction विकल्प के साथ काम करता है. अगर यह जानकारी साफ़ तौर पर नहीं दी गई है और true पर सेट नहीं की गई है, तो डेस्कटॉप पर सभी सूचनाएं 20 सेकंड के बाद खारिज हो जाएंगी. हालांकि, दिलचस्प बात यह है कि Chrome ने हाल ही में सभी डेस्कटॉप प्लैटफ़ॉर्म (ChromeOS को छोड़कर) से सूचना केंद्र को हटा दिया है. इसका मतलब है कि छोटा किए गए नोटिफ़िकेशन को खारिज माना जाता है और इन्हें किसी सेवा वर्कर में getNotifications को कॉल करके ऐक्सेस नहीं किया जा सकता.

Android के लिए Chrome पर, सूचनाएं सूचना ट्रे में छोटी कर दी जाती हैं. इसलिए, requireInteraction विकल्प को अनदेखा कर दिया जाता है.

navigator.serviceWorker.register('sw.js');

function showNotifications() {
    Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('requireInteraction: true', {
            body: 'Requires interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: true,
            tag: 'require-interaction'
        });

        registration.showNotification('requireInteraction: false', {
            body: 'Does not require interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: false,
            tag: 'no-require-interaction'
        });
        });
    }
    });
}

डेमो आज़माएं.

का इस्तेमाल करने के सबसे सही तरीकों के साथ-साथ, पूरा दस्तावेज़ ज़रूर देखें