איך שולחים שאילתה למרכז הבקרה של פלטפורמת האינטרנט כדי לקבל כלים ליצירת בסיס

Jeremy Wagner

תאריך פרסום: 4 במרץ 2025

המונח Baseline (קו בסיס) הומצא על ידי צוות Chrome, ועכשיו הוא מוגדר על ידי קבוצת הקהילה WebDX. התכונה Baseline מאפשרת להבין אילו תכונות פועלות באופן תואם בדפדפנים שונים. הוא נועד לעזור לכם לזהות באילו תכונות אתם יכולים להשתמש – או לא יכולים להשתמש – בכל מנועי הדפדפנים העיקריים. עם זאת, צריך דרך לזהות מהן התכונות האלה.

למזלכם, אתם יכולים להשתמש בWeb Platform Dashboard כדי לברר אילו תכונות זמינות ב-Baseline Newly או ב-Baseline Widely. הלוח הזה מופעל על ידי חבילת npm‏ web-features. אפשר לגשת למידע הזה גם באמצעות HTTP API כדי לשלב נתוני בסיס בתהליך העבודה של כלי הדיווח. במדריך הזה מוסבר איך לעשות את זה.

הדקדוק הרלוונטי של שאילתת Baseline בלוח הבקרה של פלטפורמת האינטרנט

לוח הבקרה של פלטפורמת האינטרנט משתמש בתחביר שאילתות ספציפי כדי לעזור לכם לחפש תמיכה בתכונות אינטרנט. אפשר להשתמש בתחביר של השאילתה ישירות במרכז הבקרה.

כשמקלידים בתיבת החיפוש בחלק העליון של הדף, מוצגים מספר פרמטרים של שאילתות שאפשר להשתמש בהם כדי לסנן תכונות של אתרים.

תחביר השאילתה הוא רחב, ומאפשר לכם גמישות רבה בסינון תכונות האינטרנט שמוצגות בלוח הבקרה. בצילום המסך הבא אפשר לראות איך משתמשים בפרמטר השאילתה id כדי לצמצם את התוצאות לתכונה ספציפית:

הדקדוק של השאילתות מתועד, אבל לא צריך להכיר את כולו כדי למצוא נתוני בסיס של תכונות. אפשר להשתמש בכל אחת מהאפשרויות האלה בלוח הבקרה, אבל הנה כמה אפשרויות שימושיות במיוחד:

• ‫baseline_status: משתמשים בפרמטר הזה כדי לסנן תכונות לפי שלושה ערכים ממוספרים:
  • ‫limited: מחזירה תכונות שיש להן תמיכה מוגבלת בדפדפן. אם מסננים לפי הערך הזה, מקבלים רק תכונות שלא הגיעו לסטטוס בסיסי כלשהו.
  • ‫newly: מחזיר תכונות שזמינות בגרסה הבסיסית החדשה.
  • ‫widely: מחזירה תכונות שזמינות באופן נרחב ב-Baseline, כלומר תכונות שהיו ב-Baseline במשך 30 חודשים לפחות. אלה תכונות שאפשר להשתמש בהן בלי לדאוג לגבי תמיכה בדפדפן או polyfills.
• ‫baseline_date: משתמש בפורמט YYYY-MM-DD..YYYY-MM-DD כדי לציין את הגבול העליון והתחתון של התקופה שבה התכונות הגיעו ל-Baseline. לדוגמה, כדי למצוא את כל התכונות בטווח של שנה, משתמשים בערך כמו 2024-01-01..2025-01-01.
• id: המזהה של תכונה מסוימת. המזהים האלה מוגדרים בחבילה web-features. לדוגמה, רשומת התכונה של Promise.try() ממופה למזהה promise-try.
• ‫group: אחד מתוך שמות קבוצות ממוספרים רבים לתכונות. הקריטריון הזה שימושי אם רוצים לשלוח שאילתה רק לגבי קבוצת משנה מסוימת של תכונות פלטפורמת האינטרנט. לדוגמה, אפשר לסנן לרשימה של תכונות CSS עם ערך של css.

ממשק הקצה של מרכז הבקרה שימושי מאוד, אבל הוא מבוסס על HTTP API שאפשר לשלוח אליו שאילתות ישירות. לדוגמה, נקודת הקצה הבאה מקבלת את כל התכונות הבסיסיות שזמינות לאחרונה:

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

מבנה תגובת ה-JSON

תגובת ה-JSON שמתקבלת מ-HTTP API היא בעלת מבנה עקבי לכל תכונה. התשובה שמוחזרת מכילה את המאפיין data ברמה העליונה. הנכס הזה מכיל מערך של כל התכונות התואמות. זו לא רשימה מלאה של כל השדות שזמינים בתגובת ה-JSON, אבל הנה כמה שדות שימושיים כשמדובר ב-Baseline:

• ‫baseline: מכיל מידע כללי על סטטוס הבסיס של תכונה מסוימת, עם שדות המשנה הבאים:
  • ‫status: סטטוס ה-Baseline של תכונה. הערכים האפשריים הם limited,‏ newly או widely. הערה: אם הערך של status הוא limited, זה יהיה שדה המשנה היחיד.
  • ‫low_date: התאריך שבו התכונה הזו הפכה לזמינה ב-Baseline. השדה הזה מופיע רק אם הערך של 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, שהוא מערך של קישורים למפרטים ולמשאבים אחרים.

יש שדות אחרים, שלרוב מכילים מידע על מועד ההטמעה של התכונה בדפדפנים תומכים ספציפיים, באיזו גרסה, נתונים על בדיקות של פלטפורמת האינטרנט ועוד דברים שאולי יעניינו אתכם ואולי לא.

שאילתות לדוגמה

אחרי שקיבלתם הסבר קצר על חלק מפרמטרי השאילתה שזמינים, הנה כמה דוגמאות לשאילתות שבהן תוכלו להשתמש בכלים ובסקריפטים שלכם כדי לבחור תכונות סטטוס של אתרים שיכולות להיות שימושיות לתהליך העבודה שלכם.

קבלת נתונים של תכונה אחת

דרך טובה להכיר את ה-API היא להתחיל עם דוגמה בסיסית שמקבלת נתונים של תכונת אינטרנט אחת.

// 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 grid, שהיא Baseline Widely available. לדוגמה, אפשר להשתמש במידע הזה כדי לזהות את השימוש בתכונה ולעדכן את המשתמשים שהם יכולים להשתמש בה בכל מנועי הדפדפנים המודרניים בלי לדאוג לגבי תמיכה.

אבל זו רק ההתחלה, ו-HTTP API יכול לעשות הרבה יותר מאשר להשיג נתונים לתכונה אחת.

גישה לכל התכונות החדשות והזמינות של Baseline

נניח שאתם רוצים סקריפט ששולף את כל התכונות שזמינות ב-Baseline Newly או ב-Widely. לדוגמה, אם יש לכם סקריפט שפועל במרווחי זמן מסוימים ואתם רוצים לקבל רשימה מעודכנת שמשתנה כשתכונות עוברות מזמינות מוגבלת לסטטוס בסיסי:

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, אלא רק את 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, אפשר לשלוח שאילתה לגבי כל התכונות החדשות שזמינות ב-Baseline. אם רוצים להרחיב את ההיקף כך שיכלול גם תכונות CSS שזמינות באופן נרחב, אפשר להשתמש בגישה שמוצגת בדוגמת הקוד האחרונה ולהשתמש באופרטור השלילה עם שאילתה כמו -baseline_status:limited AND group:css'.

שדה נוסף שאפשר להריץ עליו שאילתות הוא השדה snapshot, שימושי למציאת תכונות של JavaScript שכלולות בקבוצה ספציפית של תכונות ECMAScript. הקוד הבא בודק את כל התכונות החדשות שזמינות ב-Baseline ושנכללות בתמונת המצב 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);
}

דוגמת הקוד שלמעלה תבצע שאילתה לגבי תכונות CSS שהפכו לזמינות באופן נרחב ב-Baseline בכל שלב בשנת 2022. תחביר השאילתה של baseline_date מאפשר לכם לציין תאריך התחלה ותאריך סיום, שמופרדים באמצעות ...

סיכום

השאילתות במדריך הזה נועדו לשמש כנקודת התחלה להתנסות בשאילתות של ה-backend של webstatus.dev. בעזרת כל מספר של פרמטרים זמינים של שאילתה, תוכלו לקבל תוצאות שספציפיות לאפליקציה שלכם.

הידע על שאילתות של HTTP API בלוח הבקרה של פלטפורמת האינטרנט מאפשר לכם ליצור כלים שיכולים להיות שימושיים לעבודה שלכם, ולקבל מידע על התמיכה בדפדפנים בתכונות שבהן אתם רוצים להשתמש בפרויקט. המשמעות היא שאתם יכולים ליצור אפליקציות אינטרנט באמצעות תכונות דפדפן מודרניות שאתם יכולים להשתמש בהן בבטחה, וליהנות מחוויית פיתוח הרבה יותר טובה.