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

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

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. ऐप्लिकेशन आइकॉन पर बैज सेट करने या हटाने के लिए, सेट करें या हटाएं बटन पर क्लिक करें. बैज की वैल्यू के लिए कोई नंबर भी दिया जा सकता है.

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

ऐप्लिकेशन बैजिंग एपीआई का इस्तेमाल करने के लिए, आपके वेब ऐप्लिकेशन को 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 पर काम नहीं करता. इसलिए, Android कभी भी किसी न्यूमेरिक वैल्यू के बजाय सिर्फ़ डॉट दिखाता है.

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

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

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

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

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

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

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

Web Push API

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

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

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

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

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

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

Chrome टीम, ऐप्लिकेशन बैजिंग एपीआई के इस्तेमाल से जुड़े आपके अनुभव जानना चाहती है.

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

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

  • Badging API GitHub रेपो पर, स्पेसिफ़िकेशन की समस्या दर्ज करें या अपने विचारों को किसी मौजूदा समस्या में जोड़ें.

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

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

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

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

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

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

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

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