वेब ऐप बैजिंग एपीआई

हर ऐप एक बैज का हकदार है

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

लेकिन डिफ़ॉल्ट बैजिंग पर वापस जाएं। Google द्वारा वेब को लगातार आगे बढ़ाने के लिए धन्यवाद, आपका स्थापित प्रगतिशील वेब ऐप एक काउंटर को बैज के रूप में भी प्रदर्शित कर सकता है।

आवश्यक शर्तें

आपके वेब ऐप को बैज दिखाने में सक्षम होने के लिए, इसे Google के "इंस्टॉल योग्यता मानदंड" को पूरा करना होगा, जो नीचे परिशिष्ट में जुड़ा हुआ है। और यह बिल्कुल समझ में आता है: आपके सिस्टम में एक निश्चित स्थान रखने के लिए आपके पीडब्लूए को डिवाइस पर स्थापित करना होगा। विंडोज़ पर, आपके ऐप्स टास्क बार में रहते हैं और मैकोज़ पर यह डॉक में है।

यदि आप अभी तक नहीं जानते हैं, तो आपके वेब ऐप को "प्रगतिशील वेब ऐप्स" या संक्षेप में PWA नामक अनुप्रयोगों के एक नए वर्ग में विकसित करने के लिए उत्तरोत्तर बढ़ाया जा सकता है। PWA कई तरह की नई सुविधाओं का समर्थन करता है जो पहले केवल मूल ऐप्स के लिए उपलब्ध थीं। आप इस वेब ऐप पर पीडब्ल्यूए के बारे में कई लेख देख सकते हैं, जो स्वयं एक पीडब्ल्यूए है जिसे इंस्टॉल किया जा सकता है।

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

यह काम किस प्रकार करता है

वास्तविक कार्यान्वयन बहुत सीधा है और सभी उपयोग मामलों को कवर करने के लिए कोड की कुछ पंक्तियों की आवश्यकता होती है।

// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.

async function setSimpleBadge(){
  // Just a simple indicator without any value.
  // This is the simplest variant of a badge.
  await navigator?.setClientBadge();
}

async function incrementBadgeCount(){
  // Get our dummy count and update it,
  // just to give more context for this demo.
  const countNow = getUnreadMessagesCount();
  await setUnreadMessagesCount(countNow + 1);
  
  // Update the UI.
  await navigator.setAppBadge(countNow + 1)
    .catch((error) => { /* ... */ });
}

async function resetBadge(){
  // As simple as it gets: reset the badge UI.
  await navigator.clearClientBadge();
}

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

निष्कर्ष

जैसा कि आपने देखा, ऐप बैजिंग एपीआई का उपयोग करना वास्तव में सरल है। आपके परीक्षण के लिए क्रोमियम-आधारित ब्राउज़र के साथ-साथ एक साधारण PWA भी आवश्यक है जिसे इंस्टॉल किया जा सकता है। यह उम्मीद नहीं की जा सकती है कि यह एपीआई जल्द ही सफारी या फ़ायरफ़ॉक्स पर उपलब्ध होगा, क्योंकि इसका मतलब उन टीमों द्वारा सामान्य रूप से पीडब्लूए के प्रति अधिक प्रतिबद्धता भी है। लेकिन जहां संभव हो, आपके वेब ऐप के लिए एक उन्नत UX के लिए, यह एक शानदार जीत है और निश्चित रूप से इसका उपयोग किया जाना चाहिए!