पुश नोटिफ़िकेशन की मदद से, अपने उपयोगकर्ताओं को ऐप्लिकेशन जैसा बेहतरीन अनुभव दिया जा सकता है. इससे उन्हें चैट मैसेज जैसे ज़रूरी और समय पर मिलने वाले अपडेट के बारे में सूचना मिलती है. सूचना प्लैटफ़ॉर्म, ब्राउज़र में अपेक्षाकृत नया है. जैसे-जैसे इस्तेमाल के उदाहरण और ज़रूरी शर्तें पूरी होती जाती हैं, हमें सूचनाओं के लिए एपीआई में कई बदलाव दिख रहे हैं. Chrome 50 (मार्च 2016 में बीटा वर्शन) में भी चार नई सुविधाएं हैं. इनसे डेवलपर को सूचनाओं पर ज़्यादा कंट्रोल मिलता है. आपको ये काम करने की अनुमति मिलती है:
- सूचना बटन में आइकॉन जोड़ना,
- एक जैसा अनुभव देने के लिए टाइमस्टैंप में बदलाव करना,
- सूचनाएं बंद करने के इवेंट को ट्रैक करके, सूचनाओं को सिंक करने और आंकड़ों को उपलब्ध कराने में मदद मिलती है,
- जब कोई सूचना, फ़िलहाल दिखाई जा रही सूचना की जगह ले लेती है, तो सूचना फिर से दिखाने की सुविधा को मैनेज करना.
Chrome 50 में पुश नोटिफ़िकेशन के लिए पेलोड भी जोड़े गए हैं. Chrome में लागू किए गए Notifications API के बारे में अप-टू-डेट रहने के लिए, स्पेसिफ़िकेशन और स्पेसिफ़िकेशन की समस्या ट्रैकर का पालन करें.
कस्टम आइकॉन की मदद से, ज़्यादा ध्यान खींचने वाले ऐक्शन बटन बनाएं
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 और उसके बाद के वर्शन में डार्क ग्रे फ़िल्टर और Lollipop से पहले के वर्शन में सफ़ेद फ़िल्टर लागू होगा. वहीं, डेस्कटॉप पर यह फ़ुल कलर में दिखेगा. (ध्यान दें: डेस्कटॉप पर इस सुविधा के आने वाले समय में उपलब्ध होने के बारे में चर्चा की जा रही है.) ऐसा हो सकता है कि कुछ प्लैटफ़ॉर्म पर कार्रवाई के आइकॉन भी न दिखें. इसलिए, पक्का करें कि आप आइकॉन का इस्तेमाल, कार्रवाई के बारे में जानकारी देने के लिए कर रहे हों, न कि सिर्फ़ इंटेंट के बारे में बताने के लिए.
आखिर में, रिसॉर्स डाउनलोड किए जाने चाहिए. इसलिए, आइकॉन को जितना हो सके उतना छोटा रखें और उन्हें अपने इंस्टॉल इवेंट में पहले से कैश मेमोरी में सेव कर लें. (यह लेख लिखे जाने के समय, Chrome में सूचना संसाधनों को फ़ेच करने की प्रोसेस को अब तक सर्विस वर्कर के ज़रिए नहीं भेजा गया है.)
सूचना बंद करने के इवेंट
सूचनाओं से जुड़ी एक सुविधा का अक्सर अनुरोध किया जाता है. यह सुविधा यह बताती है कि उपयोगकर्ता ने सूचना कब खारिज की है. सूचना से जुड़ी खास जानकारी में हाल ही में हुए बदलावों के बाद ही, हम ऐसा कर पाए. इन बदलावों के बाद, notificationclose इवेंट जोड़ा गया.
notificationclick और notificationclose इवेंट का इस्तेमाल करके, यह समझा जा सकता है कि आपके उपयोगकर्ता आपकी सूचनाओं के साथ कैसे इंटरैक्ट कर रहे हैं. क्या वे इन्हें लंबे समय तक खुला छोड़कर, बाद में खारिज कर रहे हैं या इन्हें तुरंत खारिज कर रहे हैं.
इसका एक लोकप्रिय इस्तेमाल, डिवाइसों के बीच सूचनाओं को सिंक करना है. अगर उपयोगकर्ता अपने डेस्कटॉप डिवाइस पर कोई सूचना खारिज करता है, तो उसी सूचना को उसके मोबाइल डिवाइस पर भी खारिज कर देना चाहिए. फ़िलहाल, हम बिना सूचना दिए ऐसा नहीं कर सकते. याद रखें कि हर पुश मैसेज के लिए सूचना दिखनी चाहिए. हालांकि, notificationclose का इस्तेमाल करके, इस समस्या को हल किया जा सकता है. इससे, अपने सर्वर पर उपयोगकर्ता के लिए सूचना की स्थिति को ट्रैक किया जा सकता है. साथ ही, उपयोगकर्ता के दूसरे डिवाइसों पर सूचना को सिंक किया जा सकता है.
notificationclose इवेंट का इस्तेमाल करने के लिए, उसे अपने सेवा वर्कर में रजिस्टर करें. यह इवेंट सिर्फ़ तब ट्रिगर होगा, जब उपयोगकर्ता ने किसी सूचना को जान-बूझकर खारिज किया हो. उदाहरण के लिए, अगर उपयोगकर्ता ने किसी खास सूचना को खारिज किया हो या Android पर अपनी ट्रे में मौजूद सभी सूचनाओं को खारिज किया हो.
अगर requireInteraction फ़्लैग गलत है या सेट नहीं है, तो अगर सूचना को उपयोगकर्ता मैन्युअल तरीके से नहीं, बल्कि सिस्टम अपने-आप खारिज करता है, तो notificationclose इवेंट ट्रिगर नहीं होगा.
इसे लागू करने का आसान तरीका यहां बताया गया है. जब उपयोगकर्ता सूचना को खारिज करता है, तो आपको सूचना ऑब्जेक्ट का ऐक्सेस मिलता है. इसकी मदद से, कस्टम लॉजिक लागू किया जा सकता है.
self.addEventListener('notificationclose', e => console.log(e.notification));
इसकी जांच सूचना जनरेटर में की जा सकती है. सूचना बंद करने पर, आपको सूचना मिलेगी.
किसी मौजूदा सूचना को बदलते समय, अपने उपयोगकर्ताओं को परेशान न करें
मुझे पूरा भरोसा है कि जब अंकल बेन ने कहा था कि "बड़ी ताकत के साथ ज़िम्मेदारी भी बढ़ जाती है", तब वे नोटिफ़िकेशन सिस्टम के बारे में बात कर रहे थे, न कि पीटर पार्कर की शक्तियों के बारे में. सूचना सिस्टम, उपयोगकर्ताओं के साथ इंटरैक्ट करने का एक बेहतरीन तरीका है. अगर आपने उनके भरोसे का गलत इस्तेमाल किया, तो वे सभी सूचनाएं बंद कर देंगे. इसके बाद, हो सकता है कि वे आपके चैनल की सदस्यता छोड़ दें.
सूचना बनाते समय, उपयोगकर्ता का ध्यान खींचने के लिए, उसे सूचना के साथ आवाज़ या कंपन की सुविधा सेट की जा सकती है. इसके अलावा, किसी मौजूदा सूचना को बदलने के लिए, नए सूचना ऑब्जेक्ट पर उसके 'टैग' एट्रिब्यूट का फिर से इस्तेमाल करें.
Chrome 50 से पहले, जब भी कोई सूचना बनाई जाती थी या किसी मौजूदा सूचना को बदला जाता था, तो सूचना मिलने पर डिवाइस वाइब्रेट होता था या सूचना की आवाज़ सुनाई देती थी. इससे, उपयोगकर्ताओं को परेशानी हो सकती थी. Chrome 50 में, 'फिर से सूचना दें' नाम के एक आसान बूलियन फ़्लैग की मदद से, अब आपके पास यह कंट्रोल करने का विकल्प है कि फिर से सूचना मिलने पर क्या करना है. बाद की सूचनाओं के लिए एक ही 'टैग' का इस्तेमाल करने पर, डिफ़ॉल्ट तौर पर कोई सूचना नहीं दी जाती. इसलिए, डेवलपर के तौर पर आपको फ़्लैग को "सही" पर सेट करके, उपयोगकर्ता को "फिर से सूचना भेजने" के लिए ऑप्ट-इन करना होगा.
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' पर दिखता है. हालांकि, यह डेस्कटॉप पर नहीं दिखता, लेकिन इसका असर मोबाइल और डेस्कटॉप, दोनों पर सूचनाओं के क्रम पर पड़ेगा.
का इस्तेमाल करने के सबसे सही तरीकों के साथ-साथ, पूरा दस्तावेज़ ज़रूर देखें