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

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

Pete LePage

App Badging API क्या है?

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

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

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

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

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

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

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

सहायता

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

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

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

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

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

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

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

Web Push API

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

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

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

दोनों को मिलाकर

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

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

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

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

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

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

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

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

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

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

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

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

काम के लिंक

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