बेसलाइन टूल के लिए, वेब प्लैटफ़ॉर्म डैशबोर्ड से क्वेरी करने का तरीका

Jeremy Wagner

पब्लिश किया गया: 4 मार्च, 2025

Baseline को Chrome टीम ने बनाया था. अब इसे WebDX Community Group तय करता है. Baseline से, उन सुविधाओं के बारे में साफ़ तौर पर पता चलता है जो अलग-अलग ब्राउज़र पर काम करती हैं. इसे इस तरह से डिज़ाइन किया गया है कि आपको यह पता चल सके कि सभी मुख्य ब्राउज़र इंजन पर कौनसी सुविधाएं इस्तेमाल की जा सकती हैं या नहीं की जा सकती हैं. हालांकि, आपको यह पता होना चाहिए कि वे सुविधाएं कौनसी हैं.

अच्छी बात यह है कि आपके पास यह क्वेरी करने का विकल्प है कि वेब प्लैटफ़ॉर्म डैशबोर्ड का इस्तेमाल करके, कौनसी सुविधाएं नई या ज़्यादातर उपलब्ध हैं. यह web-features npm पैकेज की मदद से काम करता है. इस जानकारी को ऐक्सेस करने के लिए, इसके एचटीटीपी एपीआई का इस्तेमाल किया जा सकता है. इससे, बेसलाइन डेटा को अपने टूलिंग वर्कफ़्लो में इंटिग्रेट किया जा सकता है. इस गाइड में बताया गया है कि ऐसा कैसे किया जा सकता है.

वेब प्लैटफ़ॉर्म डैशबोर्ड की काम की बेसलाइन क्वेरी व्याकरण

वेब प्लैटफ़ॉर्म डैशबोर्ड, वेब सुविधा के साथ काम करने वाले ब्राउज़र को खोजने में आपकी मदद करने के लिए, खास क्वेरी व्याकरण का इस्तेमाल करता है. इस क्वेरी व्याकरण का इस्तेमाल सीधे डैशबोर्ड पर किया जा सकता है.

वेब प्लैटफ़ॉर्म स्टेटस डैशबोर्ड पर मौजूद सुविधाओं की सूची. इसमें, नई सुविधाओं को दिखाने के लिए baseline_status क्वेरी पैरामीटर का इस्तेमाल किया गया है.
वेब प्लैटफ़ॉर्म डैशबोर्ड पर मौजूद सुविधाओं की सूची. यह सूची, baseline_status:newly सर्च क्वेरी का इस्तेमाल करके की गई खोज पर आधारित है. इसमें सिर्फ़ नई सुविधाओं के लिए उपलब्ध बेसलाइन दिखाई जाती है.

पेज के सबसे ऊपर मौजूद खोज बॉक्स में टाइप करने पर, आपको कई क्वेरी पैरामीटर दिखेंगे. इनका इस्तेमाल करके, वेब सुविधाओं को फ़िल्टर किया जा सकता है.

वेब प्लैटफ़ॉर्म स्टेटस डैशबोर्ड की ऑटोकंप्लीट सुविधा, 'baseline' की शुरुआती वैल्यू दिखा रही है. इसमें उस शुरुआती वैल्यू से शुरू होने वाले सभी उपलब्ध क्वेरी पैरामीटर दिख रहे हैं.
Web Platform Status Dashboard पर मौजूद खोज बॉक्स में लिखते समय, उपलब्ध क्वेरी पैरामीटर दिखेंगे. इस मामले में, ऑटोकंप्लीट की सुविधा, बेसलाइन से जुड़े पैरामीटर के सुझाव देती है. इनकी मदद से, बेसलाइन की स्थिति या तारीख की सीमा के हिसाब से फ़िल्टर किया जा सकता है.

क्वेरी व्याकरण में कई तरह के विकल्प होते हैं. इससे आपको यह तय करने में आसानी होती है कि डैशबोर्ड पर कौनसी वेब सुविधाएं दिखानी हैं. इस स्क्रीनशॉट में दिखाया गया है कि किसी खास सुविधा के बारे में जानकारी पाने के लिए, id क्वेरी पैरामीटर का इस्तेमाल कैसे किया जा सकता है:

वेब प्लैटफ़ॉर्म के स्टेटस डैशबोर्ड की इमेज. इसमें दिखाया गया है कि आईडी पैरामीटर का इस्तेमाल करके, खोज बॉक्स में सुविधा के हिसाब से क्वेरी कैसे की जाती है.
इस उदाहरण में, id पैरामीटर की वैल्यू html है. इससे पता चलता है कि <html> एलिमेंट के साथ काम करता है. यह एलिमेंट, Baseline में उपलब्ध है.

क्वेरी व्याकरण के बारे में जानकारी दी गई है. हालांकि, सुविधाओं के लिए बेसलाइन डेटा ढूंढने के लिए, इस बारे में पूरी जानकारी होना ज़रूरी नहीं है. डैशबोर्ड पर इनमें से किसी भी विकल्प का इस्तेमाल किया जा सकता है. हालांकि, यहां कुछ ऐसे विकल्प दिए गए हैं जो खास तौर पर काम के हैं:

  • baseline_status: इस पैरामीटर का इस्तेमाल करके, सुविधाओं को तीन वैल्यू के हिसाब से फ़िल्टर करें:
    • limited: यह उन सुविधाओं को दिखाता है जो कुछ ही ब्राउज़र पर काम करती हैं. इस वैल्यू के हिसाब से फ़िल्टर करने पर, आपको सिर्फ़ ऐसी सुविधाएं दिखेंगी जो किसी भी बेसलाइन स्टेटस तक नहीं पहुंची हैं.
    • newly: यह सुविधा, Baseline Newly available के तौर पर उपलब्ध है.
    • widely: यह उन सुविधाओं को दिखाता है जो Baseline Widely available हैं. ये ऐसी सुविधाएं होती हैं जो कम से कम 30 महीनों से Baseline हैं. ये ऐसी सुविधाएं हैं जिनका इस्तेमाल, ब्राउज़र सपोर्ट या पॉलीफ़िल के बारे में चिंता किए बिना किया जा सकता है.
  • baseline_date: इसमें YYYY-MM-DD..YYYY-MM-DD फ़ॉर्मैट का इस्तेमाल किया जाता है. इससे यह तय किया जाता है कि सुविधाएं कब बेसलाइन तक पहुंचीं. इसके लिए, ऊपरी और निचली सीमा तय की जाती है. उदाहरण के लिए, एक साल की अवधि में मौजूद सभी सुविधाओं को ढूंढने के लिए, 2024-01-01..2025-01-01 जैसी वैल्यू का इस्तेमाल करें.
  • id: किसी सुविधा के लिए आइडेंटिफ़ायर. इन आइडेंटिफ़ायर को web-features पैकेज में तय किया जाता है. उदाहरण के लिए, Promise.try() के लिए सुविधा की एंट्री, promise-try के आईडी पर मैप होती है.
  • group: सुविधाओं के लिए, गिनती किए गए ग्रुप के कई नामों में से एक. अगर आपको सिर्फ़ वेब प्लैटफ़ॉर्म की सुविधाओं के किसी सबसेट के लिए क्वेरी करनी है, तो यह मानदंड आपके लिए काम का है. उदाहरण के लिए, css वैल्यू वाली सीएसएस सुविधाओं की सूची को फ़िल्टर किया जा सकता है.

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

https://api.webstatus.dev/v1/features?q=baseline_status:newly

JSON रिस्पॉन्स का स्ट्रक्चर

आपको एचटीटीपी एपीआई से मिलने वाले JSON जवाब का फ़ॉर्मैट, हर सुविधा के लिए एक जैसा होता है. जवाब में, सबसे ऊपर data प्रॉपर्टी शामिल होती है. इस प्रॉपर्टी में, मैच करने वाली सभी सुविधाओं का कलेक्शन होता है. यह JSON रिस्पॉन्स में उपलब्ध सभी फ़ील्ड की पूरी सूची नहीं है. हालांकि, यहां बेसलाइन के लिए कुछ काम के फ़ील्ड दिए गए हैं:

  • baseline: इसमें किसी सुविधा के बेसलाइन स्टेटस के बारे में सामान्य जानकारी होती है. इसमें ये सब-फ़ील्ड शामिल होते हैं:
    • status: किसी सुविधा के लिए, बेसलाइन स्टेटस. वैल्यू limited, newly या widely हो सकती है. ध्यान दें: अगर status की वैल्यू limited है, तो यह सिर्फ़ एक सब-फ़ील्ड होगा.
    • low_date: इससे पता चलता है कि दी गई सुविधा, नई सुविधा के तौर पर कब उपलब्ध हुई. यह फ़ील्ड सिर्फ़ तब दिखता है, जब status को newly या widely पर सेट किया गया हो.
    • high_date: इससे पता चलता है कि दी गई सुविधा, बेसलाइन के तौर पर कब से उपलब्ध है. यह फ़ील्ड सिर्फ़ तब उपलब्ध होता है, जब status को widely पर सेट किया गया हो.
  • feature_id: सुविधा का आईडी. उदाहरण के लिए, सीएसएस ग्रिड के लिए, यह "grid" की वैल्यू होगी.
  • name: सुविधा का फ़ॉर्मैट किया गया नाम. कुछ मामलों में, यह feature_id के जैसा हो सकता है. हालांकि, आम तौर पर यह अलग होता है. उदाहरण के लिए, Promise.try() के लिए feature_id की वैल्यू "promise-try" है, जबकि इसी सुविधा के लिए name फ़ील्ड "Promise.try()" है.
  • spec: इस फ़ील्ड में links नाम का एक सब-फ़ील्ड होता है. यह स्पेसिफ़िकेशन और अन्य संसाधनों के लिंक का कलेक्शन होता है.

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

क्वेरी के उदाहरण

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

किसी एक सुविधा के लिए डेटा पाना

एपीआई के बारे में जानने का सबसे अच्छा तरीका यह है कि आप एक बुनियादी उदाहरण से शुरुआत करें. इससे आपको किसी एक वेब सुविधा के लिए डेटा मिलेगा.

// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');

// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;

// Fetch the resource:
const response = await fetch(url);

if (response.ok) {
  // Convert the response to JSON:
  const { data } = await response.json();

  // Log data for each feature to the:
  console.log(data);
}

इस मामले में, हम id पैरामीटर को grid वैल्यू के साथ सेट करते हैं, ताकि सीएसएस ग्रिड के लिए सुविधा से जुड़ी सहायता की जानकारी मिल सके. यह सुविधा, Baseline Widely available है. उदाहरण के लिए, इस जानकारी का इस्तेमाल यह पता लगाने के लिए किया जा सकता है कि सुविधा का इस्तेमाल किया जा रहा है या नहीं. साथ ही, उपयोगकर्ताओं को यह बताया जा सकता है कि वे इसे सभी मॉडर्न ब्राउज़र इंजन में इस्तेमाल कर सकते हैं. इसके लिए, उन्हें यह चिंता करने की ज़रूरत नहीं है कि यह सुविधा काम करेगी या नहीं.

हालांकि, यह सिर्फ़ शुरुआत है. एचटीटीपी एपीआई, किसी एक सुविधा के लिए डेटा पाने के अलावा, आपके लिए और भी बहुत कुछ कर सकता है.

बेसलिन में नई और ज़्यादातर लोगों के लिए उपलब्ध सभी सुविधाएं पाएं

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

const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

इस क्वेरी में, नई और ज़्यादातर लोगों के लिए उपलब्ध सभी बेसलाइन सुविधाएं नहीं मिलती हैं. इसमें सिर्फ़ पहली 100 सुविधाएं मिलती हैं. अगर इस संख्या से ज़्यादा सुविधाएं मिलती हैं, तो JSON रिस्पॉन्स के टॉप लेवल पर एक metadata फ़ील्ड होता है. इसमें ज़्यादा से ज़्यादा दो सब-फ़ील्ड हो सकते हैं:

  • next_page_token: यह एक स्ट्रिंग है. इसमें एक ऐसा टोकन होता है जिसे GET अनुरोध की क्वेरी स्ट्रिंग में बैकएंड में जोड़ा जा सकता है. इसका इस्तेमाल करने और webstatus.dev बैकएंड से डेटा को फिर से फ़ेच करने पर, यह मिलती-जुलती सुविधाओं का अगला बैच दिखाएगा. ध्यान दें: अगर मौजूदा क्वेरी से 100 से कम नतीजे मिलते हैं या मौजूदा क्वेरी, नतीजों के सेट के आखिर में है, तो यह फ़ील्ड उपलब्ध नहीं होगा.
  • total: यह एक पूर्णांक है. इससे पता चलता है कि मौजूदा क्वेरी के लिए कुल कितनी सुविधाएं उपलब्ध हैं.

ये फ़ील्ड, पेज नंबर डालने की सुविधा के लिए काम के हैं. इनकी मदद से, हम क्वेरी के सभी नतीजे पाने के लिए, यहां दिया गया कोड इस्तेमाल कर सकते हैं. इस क्वेरी से ज़्यादा डेटा मिलता है:

async function queryWebStatusDashboard (query, token) {
  const urlBase = 'https://api.webstatus.dev/v1/features?q=';
  let queryUrl = `${urlBase}${encodeURIComponent(query)}`;

  if (token) {
    queryUrl += `&page_token=${encodeURIComponent(token)}`;
  }

  const response = await fetch(queryUrl);

  if (response.ok) {
    const { data, metadata } = await response.json();

    console.log(data);

    // See if there's a page token in this query:
    if ('next_page_token' in metadata) {
      const { next_page_token } = metadata;
      queryWebStatusDashboard(query, next_page_token);
    } else {
      console.log('All results collected');
    }
  }
}

// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');

सीएसएस की नई सुविधाओं के बारे में जानें

मान लें कि आप एक इंजीनियर हैं और सीएसएस पर खास तौर पर ध्यान देते हैं. आपको यह जानना है कि सीएसएस की कौनसी सुविधाएं, नई उपलब्ध सुविधाओं के तौर पर बेसलाइन बन जाती हैं. यह group क्वेरी वैल्यू के इस्तेमाल का सबसे सही उदाहरण है. साथ ही, इसमें यह भी बताया गया है कि webstatus.dev पर क्वेरी करते समय, AND ऑपरेटर का इस्तेमाल कैसे करें:

const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

group के लिए css की वैल्यू तय करते समय, नई सुविधाओं के लिए क्वेरी की जा सकती है. अगर आपको स्कोप को बढ़ाकर, सीएसएस की उन सुविधाओं को भी शामिल करना है जो आम तौर पर उपलब्ध हैं, तो कोड के आखिरी सैंपल में दिए गए तरीके का इस्तेमाल किया जा सकता है. साथ ही, -baseline_status:limited AND group:css' जैसी क्वेरी के साथ नेगेशन ऑपरेटर का इस्तेमाल किया जा सकता है.

snapshot फ़ील्ड के लिए भी क्वेरी की जा सकती है. यह फ़ील्ड, JavaScript की उन सुविधाओं को ढूंढने के लिए काम का है जो ECMAScript की सुविधाओं के किसी खास सेट का हिस्सा हैं. नीचे दिए गए कोड से, नई सुविधाओं के लिए सभी बेसलाइन की जांच की जाती है. ये सुविधाएं, ecmascript-2023 स्नैपशॉट का हिस्सा हैं:

const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

किसी तारीख की सीमा के अंदर, Baseline की सभी सुविधाएं पाना

किसी खास तारीख की सीमा में, बेसलाइन बनने वाली सभी सुविधाओं को ढूंढने के लिए, baseline_date फ़ील्ड को क्वेरी किया जा सकता है:

const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);

if (response.ok) {
  const { data } = await response.json();

  console.log(data);
}

ऊपर दिए गए कोड के सैंपल से, सीएसएस की उन सुविधाओं के बारे में क्वेरी की जाएगी जो 2022 में किसी भी समय, Baseline Widely available बन गई थीं. baseline_date के लिए क्वेरी सिंटैक्स का इस्तेमाल करके, शुरू और खत्म होने की तारीख तय की जा सकती है. इन तारीखों को .. से अलग किया जाता है.

नतीजा

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

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