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

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

Pete LePage

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

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

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

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

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

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

ऐप्लिकेशन के उदाहरणों में ये शामिल हैं:

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

सहायता

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

इसे आज़माएं

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

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

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

बैज एपीआई में, 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.
});

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

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

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

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

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

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

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

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

वेब पुश एपीआई

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

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

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

दोनों का संयोजन

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

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

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

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

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

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

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

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

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

यह एपीआई काम करता है

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

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

मददगार लिंक

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