كيفية طلب بيانات من لوحة بيانات منصّة الويب لمعرفة أدوات Baseline

Jeremy Wagner

تاريخ النشر: 4 مارس 2025

تم إنشاء Baseline من قِبل فريق Chrome، ويتم الآن تحديدها من قِبل مجموعة WebDX Community. توفّر Baseline الوضوح بشأن الميزات التي يمكن استخدامها بشكل متوافق بين المتصفّحات. تم تصميم هذه الأداة لمساعدتك في تحديد الميزات التي يمكنك استخدامها أو التي لا يمكنك استخدامها في جميع محركات المتصفحات الرئيسية. مع ذلك، أنت بحاجة إلى طريقة لتحديد هذه الميزات.

لحسن الحظ، يمكنك الاستعلام عن الميزات التي أصبحت متاحة حديثًا أو على نطاق واسع في Baseline باستخدام لوحة بيانات Web Platform، التي تستند إلى حزمة npm web-features. يمكنك أيضًا الوصول إلى هذه المعلومات باستخدام واجهة HTTP API لدمج بيانات Baseline في سير عمل أدواتك، ويوضّح هذا الدليل كيفية إجراء ذلك.

قواعد طلب البحث ذات الصلة في "لوحة بيانات المنصة على الويب"

تستخدم لوحة بيانات "منصة الويب" قواعد نحوية خاصة بالطلبات لمساعدتك في البحث عن مدى توفّر ميزات الويب. يمكنك استخدام قواعد طلب البحث هذه مباشرةً في لوحة البيانات نفسها.

أثناء الكتابة في مربّع البحث في أعلى الصفحة، سيظهر لك عدد من مَعلمات طلب البحث التي يمكنك استخدامها لفلترة ميزات الويب.

قواعد بناء طلب البحث معبّرة، ما يمنحك الكثير من المرونة في كيفية فلترة ميزات الويب المعروضة على لوحة البيانات. تعرض لقطة الشاشة التالية كيفية استخدام مَعلمة طلب البحث id لتضييق نطاق البحث إلى ميزة معيّنة:

تم توثيق قواعد الاستعلام، ولكن لا يُشترط معرفة كل هذه القواعد للعثور على بيانات "المقياس الأساسي" للميزات. يمكنك استخدام أيّ من هذه الخيارات في لوحة البيانات، ولكن إليك بعض الخيارات المفيدة بشكل خاص:

• baseline_status: استخدِم هذه المَعلمة لفلترة الميزات حسب ثلاث قيم مُعدَّدة:
  • ‫limited: تعرض هذه السمة الميزات التي تتوافق مع عدد محدود من المتصفحات. إذا فلتَرت حسب هذه القيمة، لن تتلقّى سوى الميزات التي لم تصل إلى أي حالة من حالات "الحد الأدنى".
  • ‫newly: تعرض هذه السمة الميزات التي أصبحت متاحة حديثًا في الإصدار الأساسي.
  • ‫widely: تعرض هذه السمة الميزات المتوفّرة على نطاق واسع في Baseline، وهي الميزات التي كانت متوفّرة في Baseline لمدة 30 شهرًا على الأقل. هذه هي الميزات التي يمكنك استخدامها بدون القلق بشأن توافق المتصفح أو polyfills.
• ‫baseline_date: تستخدم تنسيق YYYY-MM-DD..YYYY-MM-DD لتحديد الحدّين الأعلى والأدنى للوقت الذي بلغت فيه الميزات المستوى الأساسي. على سبيل المثال، للعثور على جميع الميزات في نطاق عام واحد، استخدِم قيمة مثل 2024-01-01..2025-01-01.
• id: معرّف ميزة معيّنة يتم تحديد هذه المعرّفات في حزمة web-features. على سبيل المثال، يتم ربط إدخال الميزة Promise.try() بمعرّف promise-try.
• group: هو أحد أسماء المجموعات المُعدّدة للميزات. هذه معايير مفيدة إذا كنت تريد الاستعلام عن مجموعة فرعية معيّنة فقط من ميزات النظام الأساسي للويب. على سبيل المثال، يمكنك الفلترة للوصول إلى قائمة بميزات CSS التي تتضمّن القيمة css.

على الرغم من أنّ واجهة لوحة البيانات الأمامية مفيدة بالتأكيد، إلا أنّها تستند إلى واجهة HTTP API يمكنك طلبها مباشرةً. على سبيل المثال، إليك نقطة نهاية تعرض جميع ميزات Baseline التي أصبحت متاحة حديثًا:

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

بنية استجابة JSON

تتضمّن استجابة JSON التي تتلقّاها من HTTP API بنية متسقة لكل ميزة. يحتوي الردّ الذي تم إرجاعه على السمة data في المستوى الأعلى. تحتوي هذه السمة على مصفوفة تضمّ جميع الميزات المطابقة. على الرغم من أنّ هذه القائمة ليست شاملة لكل الحقول المتاحة في استجابة JSON، إليك بعض الحقول المفيدة عندما يتعلّق الأمر بالقياس الأساسي:

• ‫baseline: يحتوي على معلومات عامة حول حالة "الحد الأدنى" لميزة معيّنة، مع الحقول الفرعية التالية:
  • status: تمثّل هذه السمة حالة Baseline لإحدى الميزات. يمكن أن تكون القيم limited أو newly أو widely. ملاحظة: سيكون هذا الحقل الفرعي الوحيد إذا كانت قيمة status هي limited.
  • low_date: يشير ذلك إلى التاريخ الذي أصبحت فيه الميزة المحدّدة متاحة حديثًا في الإصدار الأساسي. لا يظهر هذا الحقل إلا إذا كانت قيمة status هي newly أو widely.
  • high_date: يشير ذلك إلى التاريخ الذي أصبحت فيه الميزة المحدّدة متاحة على نطاق واسع في Baseline. لا يتوفّر هذا الحقل إلا إذا كانت قيمة status هي widely.
• ‫feature_id: تمثّل هذه السمة معرّف الميزة. على سبيل المثال، بالنسبة إلى شبكة CSS، ستكون القيمة "grid".
• ‫name: الاسم المنسّق للعنصر. يمكن أن يكون هذا الرمز مشابهًا للرمز feature_id في بعض الحالات، ولكنّه عادةً ما يكون مختلفًا. على سبيل المثال، قيمة feature_id للسمة Promise.try() هي "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 للحصول على معلومات حول توافق ميزة شبكة CSS، وهي ميزة متاحة على نطاق واسع في Baseline. يمكنك استخدام هذه المعلومات، على سبيل المثال، لرصد استخدام الميزة وإعلام المستخدمين بإمكانية استخدامها في جميع محركات المتصفحات الحديثة بدون القلق بشأن التوافق.

هذه مجرد بداية، ويمكن لواجهة برمجة التطبيقات HTTP أن تقدّم لك مزايا أكثر من الحصول على بيانات لميزة واحدة.

الحصول على جميع ميزات Baseline Newly and 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);
}

لا يحصل هذا الاستعلام على جميع ميزات Baseline Newly and Widely available، بل على أول 100 ميزة فقط. إذا كان عدد العناصر التي تم استرجاعها يتجاوز هذا الحد، سيكون هناك حقل metadata في المستوى الأعلى من استجابة JSON يمكن أن يحتوي على حقلَين فرعيَين:

• 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');

التعرّف على جميع ميزات CSS الجديدة المتاحة في Baseline

لنفترض أنّك مهندس تركّز بشكل خاص على CSS، وتريد معرفة ميزات CSS التي أصبحت من الميزات الجديدة المتوفّرة في Baseline. هذه حالة استخدام مثالية لقيمة طلب البحث group، بالإضافة إلى كيفية استخدام عامل التشغيل AND عند الاستعلام عن webstatus.dev:

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);
}

عند تحديد قيمة css لـ group، يمكنك البحث عن جميع الميزات الجديدة المتوفرة في الإصدار الأساسي. إذا أردت توسيع النطاق ليشمل ميزات CSS الأساسية المتاحة على نطاق واسع أيضًا، يمكنك استخدام الأسلوب من نموذج الرمز الأخير واستخدام عامل النفي مع طلب بحث مثل -baseline_status:limited AND group:css'.

هناك حقل آخر يمكنك البحث فيه وهو الحقل snapshot، وهو مفيد للعثور على ميزات JavaScript التي تشكّل جزءًا من مجموعة معيّنة من ميزات ECMAScript. يتحقّق الرمز التالي من جميع ميزات Baseline Newly المتاحة التي تشكّل جزءًا من لقطة 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 للعثور على جميع الميزات التي أصبحت من ميزات Baseline خلال نطاق زمني محدّد:

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);
}

ستبحث عيّنة الرمز البرمجي السابقة عن ميزات CSS التي أصبحت متاحة على نطاق واسع في Baseline في أي وقت من عام 2022. يتيح لك بناء جملة طلب البحث الخاص بـ baseline_date تحديد تاريخَي البدء والانتهاء، مفصولَين بعلامة ...

الخاتمة

تهدف الاستعلامات الواردة في هذا الدليل إلى أن تكون نقطة بداية لتجربة كيفية الاستعلام عن الخلفية webstatus.dev. باستخدام أي عدد من مَعلمات طلب البحث المتاحة، من المفترض أن تتمكّن من الحصول على نتائج خاصة بتطبيقك.

إنّ معرفة كيفية طلب بيانات من واجهة برمجة تطبيقات HTTP في "لوحة بيانات منصة الويب" يتيح لك إنشاء أدوات قد تكون مفيدة لعملك، كما يبقيك على اطّلاع على ما إذا كانت الميزات التي تريد استخدامها في مشروعك متوافقة مع عدد كافٍ من المتصفحات. وهذا يعني أنّه يمكنك إنشاء تطبيقات ويب باستخدام ميزات المتصفّح الحديثة التي يمكنك استخدامها بأمان، ما يوفّر تجربة مطوّر أكثر متعة.