सूचना के लिए इंटरैक्शन ज़रूरी है - डेस्कटॉप पर एक सहज सूचना 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'
        });
        });
    }
    });
}

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