ऐप्लिकेशन आइकॉन के लिए बैज इस्तेमाल करना

ऐप्लिकेशन बैजिंग एपीआई की मदद से, इंस्टॉल किए गए वेब ऐप्लिकेशन, ऐप्लिकेशन के आइकॉन पर ऐप्लिकेशन के लिए बैज सेट कर सकते हैं.

Pete LePage

App Badging API क्या है?

Twitter पर आठ सूचनाएं और फ़्लैग टाइप का बैज दिखाने वाले दूसरे ऐप्लिकेशन का उदाहरण.
आठ सूचनाओं वाले Twitter और फ़्लैग टाइप का बैज दिखाने वाले दूसरे ऐप्लिकेशन का उदाहरण.

ऐप्लिकेशन बैजिंग एपीआई की मदद से, इंस्टॉल किए गए वेब ऐप्लिकेशन, ऐप्लिकेशन के लिए बैज सेट कर सकते हैं. यह बैज, ऐप्लिकेशन से जुड़ी ऑपरेटिंग सिस्टम की जगह पर दिखता है. जैसे, शेल्फ़ या होम स्क्रीन.

बैज की मदद से, उपयोगकर्ता को आसानी से यह सूचना दी जा सकती है कि कोई नई गतिविधि हुई है और उस पर ध्यान देने की ज़रूरत है. इसके अलावा, बैज की मदद से कम जानकारी भी दी जा सकती है, जैसे कि पढ़े नहीं गए ईमेल की संख्या.

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

इस्तेमाल के संभावित उदाहरण

इस एपीआई का इस्तेमाल करने वाले ऐप्लिकेशन के उदाहरणों में ये शामिल हैं:

  • चैट, ईमेल, और सोशल मीडिया ऐप्लिकेशन, ताकि नए मैसेज आने या न पढ़े गए आइटम की संख्या दिखाने का संकेत मिल सके.
  • प्रोडक्टिविटी ऐप्लिकेशन, यह बताने के लिए कि बैकग्राउंड में लंबे समय से चल रहा कोई टास्क (जैसे, इमेज या वीडियो रेंडर करना) पूरा हो गया है.
  • गेम में, यह बताने के लिए कि खिलाड़ी को कोई कार्रवाई करनी है. उदाहरण के लिए, शतरंज में जब खिलाड़ी की बारी होती है.

सहायता

ऐप्लिकेशन बैजिंग एपीआई, Windows और macOS पर Chrome 81 और Edge 81 या इसके बाद के वर्शन में काम करता है. ChromeOS के लिए, इस सुविधा पर काम चल रहा है. यह सुविधा आने वाले समय में रिलीज़ की जाएगी. Android पर, Badging API काम नहीं करता. इसके बजाय, Android ऐप्लिकेशन के लिए जिस तरह से, पढ़ी नहीं गई सूचना होने पर ऐप्लिकेशन आइकॉन पर बैज अपने-आप दिखता है उसी तरह से, इंस्टॉल किए गए वेब ऐप्लिकेशन के लिए भी ऐसा होता है.

इसे आज़माएं

  1. App Badging API का डेमो खोलें.
  2. जब कहा जाए, तब ऐप्लिकेशन इंस्टॉल करने के लिए इंस्टॉल करें पर क्लिक करें या उसे इंस्टॉल करने के लिए Chrome के मेन्यू का इस्तेमाल करें.
  3. इसे इंस्टॉल किए गए PWA के तौर पर खोलें. ध्यान दें, यह ऐप्लिकेशन, इंस्टॉल किए गए PWA के तौर पर (आपके टास्क बार या डॉक में) चल रहा होना चाहिए.
  4. ऐप्लिकेशन आइकॉन पर बैज सेट करने या हटाने के लिए, सेट करें या हटाएं बटन पर क्लिक करें. बैज की वैल्यू के लिए कोई नंबर भी दिया जा सकता है.

App Badging API का इस्तेमाल करने का तरीका

ऐप्लिकेशन बैजिंग एपीआई का इस्तेमाल करने के लिए, आपके वेब ऐप्लिकेशन को Chrome पर इंस्टॉल किए जाने से जुड़ी ज़रूरी शर्तें पूरी करनी होंगी. साथ ही, उपयोगकर्ताओं को इसे अपनी होम स्क्रीन पर जोड़ना होगा.

Badge API में navigator के लिए दो तरीके होते हैं:

  • setAppBadge(number): ऐप्लिकेशन का बैज सेट करता है. अगर कोई वैल्यू दी गई है, तो बैज को दी गई वैल्यू पर सेट करें. अगर कोई वैल्यू नहीं दी गई है, तो प्लैटफ़ॉर्म के हिसाब से कोई सफ़ेद बिंदु (या कोई दूसरा फ़्लैग) दिखाएं. number को 0 पर सेट करना, clearAppBadge() को कॉल करने जैसा ही है.
  • clearAppBadge(): ऐप्लिकेशन का बैज हटाता है.

दोनों खाली प्रॉमिस दिखाते हैं. इनका इस्तेमाल, गड़बड़ी को हैंडल करने के लिए किया जा सकता है.

बैज को मौजूदा पेज से या रजिस्टर किए गए सर्विस वर्कर से सेट किया जा सकता है. बैज को फ़ोरग्राउंड पेज या सेवा वर्कर में सेट या हटाने के लिए, इन फ़ंक्शन को कॉल करें:

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

कुछ मामलों में, हो सकता है कि ऑपरेटिंग सिस्टम बैज को सही तरीके से न दिखा पाए. ऐसे मामलों में, ब्राउज़र उस डिवाइस के लिए सबसे अच्छा कॉन्टेंट दिखाने की कोशिश करेगा. उदाहरण के लिए, Android पर Badging API काम नहीं करता. इसलिए, Android पर संख्या वाली वैल्यू के बजाय सिर्फ़ बिंदु दिखता है.

उपयोगकर्ता एजेंट, बैज को कैसे दिखाता है, इस बारे में कोई अनुमान न लगाएं. कुछ उपयोगकर्ता एजेंट, "4000" जैसे किसी नंबर को "99+" के तौर पर फिर से लिख सकते हैं. अगर आपने बैज को खुद से संतृप्त किया है, तो "+" नहीं दिखेगा. उदाहरण के लिए, इसे "99" पर सेट करके. असल संख्या चाहे जो भी हो, बस setAppBadge(unreadCount) को कॉल करें और यूज़र एजेंट को इसे दिखाने की अनुमति दें.

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

बैज को बैकग्राउंड में सेट करना और उसे सेवा वर्कर से हटाना

सेवा वर्कर का इस्तेमाल करके भी, बैकग्राउंड में ऐप्लिकेशन बैज सेट किया जा सकता है. ऐसा करने के लिए, समय-समय पर होने वाले बैकग्राउंड सिंक, पुश एपीआई या दोनों का इस्तेमाल करें.

समय-समय पर होने वाला बैकग्राउंड सिंक

समय-समय पर बैकग्राउंड में सिंक होने की सुविधा की मदद से, सेवा वर्कर समय-समय पर सर्वर को पोल कर सकता है. इसका इस्तेमाल, अपडेट किया गया स्टेटस पाने और navigator.setAppBadge() को कॉल करने के लिए किया जा सकता है.

हालांकि, सिंक को कितनी बार कॉल किया जाता है, इस पर पूरी तरह भरोसा नहीं किया जा सकता. इसे ब्राउज़र के हिसाब से कॉल किया जाता है.

Web Push API

Push API की मदद से, सर्वर सेवा वर्कर को मैसेज भेज सकते हैं. ये वर्कर, फ़ोरग्राउंड पेज के चालू न होने पर भी JavaScript कोड चला सकते हैं. इसलिए, सर्वर पुश, navigator.setAppBadge() को कॉल करके बैज को अपडेट कर सकता है.

हालांकि, ज़्यादातर ब्राउज़र, जैसे कि Chrome में यह ज़रूरी होता है कि जब भी कोई पुश मैसेज मिले, तो सूचना दिखे. कुछ मामलों में यह ठीक है, जैसे कि बैज अपडेट करते समय सूचना दिखाना. हालांकि, इससे बैज को बिना सूचना दिखाए अपडेट करना मुश्किल हो जाता है.

इसके अलावा, पुश मैसेज पाने के लिए, उपयोगकर्ताओं को आपकी साइट को सूचना भेजने की अनुमति देनी होगी.

दोनों का कॉम्बिनेशन

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

सुझाव/राय दें या शिकायत करें

Chrome की टीम, App Badging API के इस्तेमाल से जुड़े आपके अनुभवों के बारे में जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में कोई ऐसी चीज़ है जो आपकी उम्मीद के मुताबिक काम नहीं करती? क्या आपके आइडिया को लागू करने के लिए, कोई ऐसा तरीका या प्रॉपर्टी मौजूद नहीं है? क्या आपका सुरक्षा मॉडल के बारे में कोई सवाल या टिप्पणी है?

  • Badging API के GitHub repo पर, खास जानकारी से जुड़ी कोई समस्या दर्ज करें या किसी मौजूदा समस्या में अपने सुझाव/राय जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है?

  • https://new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें और कॉम्पोनेंट को UI>Browser>WebAppInstalls पर सेट करें. Glitch की मदद से, वीडियो में हुई गड़बड़ी को तुरंत और आसानी से शेयर किया जा सकता है.

एपीआई के लिए सहायता दिखाना

क्या आपको अपनी साइट पर App Badging API का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता करने से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

  • #BadgingAPI हैशटैग का इस्तेमाल करके, @ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मदद के लिए लिंक

Unsplash पर, प्रतीक कटायाल की ली गई हीरो फ़ोटो