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

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

ऐप्लिकेशन बैजिंग एपीआई क्या है?

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

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

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

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

इस्तेमाल के उदाहरण

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

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

सपोर्ट करें

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

इसे आज़माएं

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

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

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

navigator पर, Badge API के दो तरीके इस्तेमाल किए जाते हैं:

  • 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() को कॉल करने के लिए किया जा सकता है.

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

वेब पुश एपीआई

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

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

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

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

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

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

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

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

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

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

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

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

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

एपीआई के साथ काम करता है

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

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

मददगार लिंक

Unस्प्लैश पर प्रतीक कतयाल की हीरो फ़ोटो