Pपुश नोटिफ़िकेशन की मदद से, अपने उपयोगकर्ताओं को ऐप्लिकेशन जैसा बेहतरीन अनुभव दिया जा सकता है. इससे उन्हें चैट मैसेज जैसे ज़रूरी अपडेट समय-समय पर मिलते रहेंगे. सूचना प्लैटफ़ॉर्म फ़िलहाल ब्राउज़र के लिहाज़ से नया है. जैसे-जैसे ज़्यादा से ज़्यादा इस्तेमाल के उदाहरण और ज़रूरतें तैयार की जा रही हैं, वैसे-वैसे हमें सूचनाओं के लिए, एपीआई में कई बदलाव दिख रहे हैं. Chrome 50 (मार्च 2016 में बीटा वर्शन) कोई अपवाद नहीं है. इसमें चार से कम ऐसी नई सुविधाएं शामिल हैं जो डेवलपर को सूचनाओं पर ज़्यादा कंट्रोल देती हैं. ये काम किए जा सकते हैं:
- सूचना बटन में आइकॉन जोड़ना,
- टाइमस्टैंप में बदलाव करें, ताकि दर्शकों को एक जैसा अनुभव दिया जा सके.
- सूचनाएं सिंक करने और आंकड़े उपलब्ध कराने में मदद करने के लिए सूचना के बंद होने के इवेंट ट्रैक करें,
- इस विकल्प को चुनने पर, फिर से सूचना देने की सुविधा को मैनेज किया जा सकता है.
Chrome 50 में पुश नोटिफ़िकेशन के लिए पेलोड भी जोड़े गए हैं. Chrome में लागू किए गए Notifications API के बारे में अप-टू-डेट रहने के लिए, spec और खास जानकारी को ट्रैक करने वाले टूल का पालन करें.
कस्टम आइकॉन की मदद से, ऐक्शन बटन बनाएं
हाल ही में, Chrome 49 में सूचना के लिए इस्तेमाल होने वाले बटन के बारे में एक पोस्ट में मैंने बताया कि सूचना देने वाले बटन को आकर्षक और दिलचस्प बनाने के लिए, आप उनमें इमेज अटैच नहीं कर सकते. हालांकि, इनलाइन इमोजी वगैरह के लिए आप यूनिकोड वर्णों का इस्तेमाल कर सकते हैं. अब आपको परेशान होने की कोई ज़रूरत नहीं है: हाल ही में जोड़े गए इस बदलाव से, अब ऐक्शन बटन पर इमेज के बारे में जानकारी दी जा सकती है:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
कार्रवाई आइकॉन का दिखने का तरीका, प्लैटफ़ॉर्म के हिसाब से अलग-अलग होता है. उदाहरण के लिए, Android पर आइकॉन में Lollipop और उसके बाद के वर्शन पर गहरे स्लेटी रंग का फ़िल्टर लागू होगा. वहीं, डेस्कटॉप पर यह सफ़ेद रंग का फ़िल्टर होगा. वहीं, डेस्कटॉप पर यह पूरी तरह मान्य होगा. (ध्यान दें: डेस्कटॉप पर, आने वाले समय में इस सुविधा के बारे में चर्चा की जा सकती है.) कुछ प्लैटफ़ॉर्म शायद ऐक्शन आइकॉन भी न दिखा पाएं. इसलिए, पक्का करें कि ऐक्शन के बारे में जानकारी देने के लिए आइकॉन का इस्तेमाल किया जा रहा हो, न कि इंटेंट के इकलौते इंंडिकेटर के रूप में.
संसाधनों को डाउनलोड करना ज़रूरी है. इसलिए, आइकॉन को जितना हो सके उतना छोटा रखें और उन्हें अपने इंस्टॉल इवेंट में, पहले से कैश मेमोरी में सेव करें. (इसे लिखते समय, Chrome में सूचना के संसाधनों के फ़ेच को अभी तक सर्विस वर्कर के ज़रिए रूट नहीं किया गया है.)
सूचना बंद होने के इवेंट
सूचनाओं की अक्सर अनुरोध की जाने वाली सुविधा से यह पता किया जा सकता है कि उपयोगकर्ता ने सूचना को कब खारिज किया था. हमारे पास ऐसा करने का कोई तरीका तब तक नहीं था, जब तक कि सूचना की खास बातों में हाल ही में हुए बदलावों के सेट में, Notificationclose इवेंट नहीं जोड़ा गया है.
नोटिफ़िकेशन क्लिक और नोटिफ़िकेशन बंद होने के इवेंट का उपयोग करके, आप यह समझ सकते हैं कि आपके उपयोगकर्ता आपके नोटिफ़िकेशन के साथ कैसे इंटरैक्ट कर रहे हैं. क्या वे उन्हें लंबे समय तक खुला छोड़ रहे हैं और फिर सक्रिय रूप से उन्हें खारिज कर रहे हैं या वे तुरंत उस पर कार्रवाई कर रहे हैं.
इस्तेमाल का एक लोकप्रिय उदाहरण, डिवाइसों के बीच सूचनाओं को सिंक करना है. अगर उपयोगकर्ता अपने डेस्कटॉप डिवाइस पर किसी सूचना को खारिज करता है, तो उसके मोबाइल डिवाइस पर भी वह सूचना खारिज कर दी जाएगी. हमारे पास अभी तक यह करने की क्षमता नहीं है (याद रखें कि हर पुश मैसेज में एक सूचना दिखानी ज़रूरी है), लेकिन नोटिफ़िकेशन बंद करने से, आपको अपने सर्वर पर उपयोगकर्ता की सूचना की स्थिति को ट्रैक करने और उसे अन्य डिवाइस से सिंक करने की सुविधा मिलती है, क्योंकि उपयोगकर्ता उनका इस्तेमाल करता है.
नोटिफ़िकेशन बंद होने के इवेंट का इस्तेमाल करने के लिए, उसे अपने सर्विस वर्कर में रजिस्टर करें. यह सिर्फ़ तब ट्रिगर होगा, जब उपयोगकर्ता किसी सूचना को खारिज कर दे. उदाहरण के लिए, अगर उपयोगकर्ता किसी खास सूचना को खारिज करता है या अपनी ट्रे में (Android पर) सभी सूचनाओं को खारिज करता है.
अगर ज़रूरी इंटरैक्शन फ़्लैग गलत है या सेट नहीं किया गया है, तो अगर उपयोगकर्ता ने सूचना को मैन्युअल तरीके से खारिज नहीं किया, बल्कि सिस्टम अपने-आप खारिज कर देगा, तो नोटिफ़िकेशन बंद होने का इवेंट ट्रिगर नहीं होगा.
लागू करने का एक आसान तरीका नीचे दिखाया गया है. जब उपयोगकर्ता किसी सूचना को खारिज करता है, तब आपको सूचना ऑब्जेक्ट का ऐक्सेस मिल जाता है. इस ऑब्जेक्ट से, पसंद के मुताबिक लॉजिक का इस्तेमाल किया जा सकता है.
self.addEventListener('notificationclose', e => console.log(e.notification));
सूचना जनरेटर में इसकी जांच की जा सकती है. सूचना बंद करने पर आपको एक सूचना मिलेगी.
किसी मौजूदा सूचना को बदलने पर, उपयोगकर्ताओं को परेशान न करें
मुझे पूरा यकीन है कि अंकल बेन को पीटर पार्कर के बजाय, नोटिफ़िकेशन सिस्टम के बारे में बात करनी होगी, क्योंकि उन्होंने कहा था कि "शक्ति के साथ ज़िम्मेदारी भी अच्छी होगी". सूचना देने वाला सिस्टम, उपयोगकर्ताओं से इंटरैक्ट करने का एक बेहतर ज़रिया है. अगर उस व्यक्ति के भरोसे का गलत इस्तेमाल किया जाता है, तो वह सभी सूचनाएं बंद कर देगा और शायद आप उसे पूरी तरह से खो दें.
कोई सूचना बनाते समय इसे इस तरह सेट किया जा सकता है कि वह उपयोगकर्ता का ध्यान खींचने के लिए, सुनाई देने वाली सूचना या वाइब्रेट हो. इसके अलावा, नए नोटिफ़िकेशन ऑब्जेक्ट पर किसी मौजूदा सूचना के 'टैग' एट्रिब्यूट का फिर से इस्तेमाल करके, उस सूचना को बदला जा सकता है.
Chrome 50 से पहले, जब भी कोई सूचना बनाई जाती है या किसी मौजूदा सूचना को बदला जाता है, तो उस पर वाइब्रेशन पैटर्न चलता है या सुनाई देने वाली सूचना सुनाई देती है. इससे आपके उपयोगकर्ताओं को परेशानी हो सकती है. अब Chrome 50 में, 'renotify' नाम के एक आसान बूलियन फ़्लैग के ज़रिए, आपके पास यह कंट्रोल होता है कि फिर से सूचना देने के दौरान क्या होता है. बाद में मिलने वाली सूचनाओं के लिए एक जैसे 'टैग' का इस्तेमाल करने पर, नई डिफ़ॉल्ट सुविधा साइलेंट रहेगी. साथ ही, आपको डेवलपर के तौर पर फ़्लैग को "true" पर सेट करके, उपयोगकर्ता को "फिर से सूचना देना" के लिए ऑप्ट-इन करना होगा.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
सूचना जनरेटर में जाकर, इस सुविधा को आज़माया जा सकता है.
उपयोगकर्ता को दिखने वाले टाइमस्टैंप को मैनेज करें
Android पर Chrome की सूचनाएं, डिवाइस बनाने के समय को डिफ़ॉल्ट रूप से सबसे ऊपर दाएं कोने में दिखाती हैं. माफ़ करें, शायद आपके सिस्टम ने इस सूचना को जनरेट किया था. उदाहरण के लिए, हो सकता है कि इवेंट डिवाइस के ऑफ़लाइन होने पर ट्रिगर हुआ हो या आने वाली मीटिंग के लिए सूचना दिखाई गई हो. Chrome 50 के बाद से, Chrome ने एक नई 'टाइमस्टैंप' प्रॉपर्टी जोड़ी है. इससे डेवलपर, सूचना में दिखने के लिए समय तय कर सकते हैं.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
फ़िलहाल, टाइमस्टैंप सिर्फ़ Android पर Chrome पर दिखता है. यह डेस्कटॉप पर नहीं दिखेगा. हालांकि, इसका असर मोबाइल और डेस्कटॉप, दोनों पर सूचना के क्रम पर पड़ेगा.