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

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

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

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

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

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

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

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

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

सहायता

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

इसे आज़माएं

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

ऐप्लिकेशन बैजिंग एपीआई को इस्तेमाल करने का तरीका

ऐप्लिकेशन बैजिंग एपीआई का इस्तेमाल करने के लिए, आपके वेब ऐप्लिकेशन को 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 और समय-समय पर बैकग्राउंड सिंक का एक साथ इस्तेमाल करना एक अच्छा विकल्प है. ज़्यादा प्राथमिकता वाली जानकारी, 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 पर, प्रतीक कटायाल की हीरो फ़ोटो