วิธีค้นหาแดชบอร์ดแพลตฟอร์มเว็บสําหรับเครื่องมือพื้นฐาน

Jeremy Wagner

เผยแพร่: 4 มีนาคม 2025

Baseline สร้างขึ้นโดยทีม Chrome และตอนนี้กลุ่มชุมชน WebDX เป็นผู้กำหนด Baseline ช่วยให้ฟีเจอร์ที่ทำงานร่วมกันได้ระหว่างเบราว์เซอร์มีความชัดเจน โดยออกแบบมาเพื่อช่วยให้คุณทราบว่าฟีเจอร์ใดที่ใช้ได้หรือใช้ไม่ได้ในเครื่องมือเบราว์เซอร์หลักทั้งหมด แต่คุณต้องมีวิธีระบุว่าฟีเจอร์เหล่านั้นคืออะไร

โชคดีที่คุณสามารถค้นหาฟีเจอร์ที่พร้อมใช้งานใหม่หรือพร้อมใช้งานอย่างแพร่หลายได้โดยใช้แดชบอร์ดแพลตฟอร์มเว็บ ซึ่งขับเคลื่อนโดยweb-featuresแพ็กเกจ npm นอกจากนี้ คุณยังเข้าถึงข้อมูลนี้ได้โดยใช้ HTTP API เพื่อผสานรวมข้อมูลพื้นฐานเข้ากับเวิร์กโฟลว์เครื่องมือ และคู่มือนี้จะอธิบายวิธีดำเนินการ

ไวยากรณ์การค้นหาพื้นฐานที่เกี่ยวข้องของแดชบอร์ดแพลตฟอร์มเว็บ

แดชบอร์ดแพลตฟอร์มเว็บใช้ไวยากรณ์การค้นหาที่เฉพาะเจาะจงเพื่อช่วยคุณค้นหาการรองรับฟีเจอร์ของเว็บ คุณใช้ไวยากรณ์การค้นหานี้ได้โดยตรงในแดชบอร์ด

รายการฟีเจอร์ในแดชบอร์ดสถานะแพลตฟอร์มเว็บ ซึ่งแสดงพารามิเตอร์การค้นหา baseline_status ที่ทำงานเพื่อแสดงฟีเจอร์ Baseline ที่พร้อมใช้งานใหม่
รายการฟีเจอร์ในแดชบอร์ดแพลตฟอร์มเว็บ รายการนี้อิงตามการค้นหาที่แสดงเฉพาะฟีเจอร์ Baseline ที่เพิ่งพร้อมใช้งานโดยใช้baseline_status:newlyคำค้นหา

ขณะที่คุณพิมพ์ในช่องค้นหาที่ด้านบนของหน้า คุณจะเห็นพารามิเตอร์การค้นหาหลายรายการที่ใช้กรองฟีเจอร์ของเว็บได้

ฟีเจอร์การเติมข้อความอัตโนมัติของแดชบอร์ดสถานะแพลตฟอร์มเว็บ ซึ่งแสดงค่าเริ่มต้นเป็น "พื้นฐาน" และแสดงพารามิเตอร์การค้นหาทั้งหมดที่ใช้ได้ซึ่งเริ่มต้นด้วยค่าเริ่มต้นดังกล่าว
ช่องค้นหาในแดชบอร์ดสถานะแพลตฟอร์มเว็บจะแสดงพารามิเตอร์การค้นหาที่ใช้ได้ขณะที่คุณพิมพ์ ในกรณีนี้ การเติมข้อความอัตโนมัติจะแนะนำพารามิเตอร์ที่เกี่ยวข้องกับค่าพื้นฐานเพื่อกรองตามสถานะค่าพื้นฐาน หรือแม้แต่ช่วงวันที่

ไวยากรณ์การค้นหามีความชัดเจน ทำให้คุณมีความยืดหยุ่นในการกรองฟีเจอร์เว็บที่แสดงในแดชบอร์ด ภาพหน้าจอต่อไปนี้แสดงวิธีใช้พารามิเตอร์การค้นหา id เพื่อจำกัดให้เหลือเฉพาะฟีเจอร์ที่ต้องการ

แดชบอร์ดสถานะแพลตฟอร์มเว็บที่แสดงวิธีค้นหาการรองรับตามฟีเจอร์ในช่องค้นหาโดยใช้พารามิเตอร์รหัส
พารามิเตอร์ id ในตัวอย่างนี้มีค่าเป็น html ซึ่งบ่งบอกถึงการรองรับองค์ประกอบ <html> ซึ่งเป็น (ไม่น่าแปลกใจ) Baseline Widely available

ไวยากรณ์การค้นหามีอยู่ในเอกสาร แต่คุณไม่จำเป็นต้องทราบทั้งหมดเพื่อค้นหาข้อมูลพื้นฐานสำหรับฟีเจอร์ คุณใช้ตัวเลือกใดก็ได้เหล่านี้ในแดชบอร์ด แต่ตัวเลือกต่อไปนี้มีประโยชน์เป็นพิเศษ

  • baseline_status: ใช้พารามิเตอร์นี้เพื่อกรองฟีเจอร์ตามค่าที่แจงนับ 3 ค่า ดังนี้
    • limited: แสดงฟีเจอร์การคืนสินค้าที่รองรับเบราว์เซอร์แบบจำกัด หากกรองตามค่านี้ คุณจะได้รับเฉพาะฟีเจอร์ที่ยังไม่ได้อยู่ในสถานะใดๆ ของ Baseline
    • newly: แสดงฟีเจอร์ที่เพิ่งพร้อมใช้งานใน Baseline
    • widely: แสดงฟีเจอร์ที่พร้อมใช้งานอย่างกว้างขวางใน Baseline ซึ่งเป็นฟีเจอร์ที่อยู่ใน Baseline มาอย่างน้อย 30 เดือน ฟีเจอร์เหล่านี้เป็นฟีเจอร์ที่คุณคาดหวังว่าจะได้ใช้โดยไม่ต้องกังวลเกี่ยวกับการรองรับเบราว์เซอร์หรือ Polyfill
  • baseline_date: ใช้รูปแบบ YYYY-MM-DD..YYYY-MM-DD เพื่อระบุขอบเขตบนและล่างเมื่อฟีเจอร์ต่างๆ ถึงเกณฑ์พื้นฐาน เช่น หากต้องการค้นหาฟีเจอร์ทั้งหมดในช่วง 1 ปี ให้ใช้ค่าอย่าง 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

  • baseline: มีข้อมูลทั่วไปเกี่ยวกับสถานะพื้นฐานของฟีเจอร์ที่ระบุ โดยมีฟิลด์ย่อยต่อไปนี้
    • status: สถานะ Baseline ของฟีเจอร์ ค่าอาจเป็น limited, newly หรือ widely หมายเหตุ: นี่จะเป็นฟิลด์ย่อยเพียงฟิลด์เดียวหาก status มีค่าเป็น limited
    • low_date: ระบุวันที่ฟีเจอร์ที่ระบุพร้อมใช้งานเป็น Baseline Newly ฟิลด์นี้จะปรากฏก็ต่อเมื่อ status เป็น newly หรือ widely เท่านั้น
    • high_date: ระบุวันที่ที่ฟีเจอร์ที่ระบุพร้อมใช้งานเป็นเกณฑ์พื้นฐานอย่างกว้างขวาง ฟิลด์นี้จะใช้ได้ก็ต่อเมื่อ 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 ที่พร้อมใช้งานอย่างแพร่หลาย คุณสามารถใช้ข้อมูลนี้ เช่น เพื่อตรวจหาการใช้งานฟีเจอร์และแจ้งให้ผู้ใช้ทราบว่าสามารถใช้ฟีเจอร์นี้ในเครื่องมือเบราว์เซอร์สมัยใหม่ทั้งหมดได้โดยไม่ต้องกังวลเรื่องการรองรับ

อย่างไรก็ตาม นี่เป็นเพียงจุดเริ่มต้นเท่านั้น และ HTTP API สามารถทำอะไรให้คุณได้มากกว่าการรับข้อมูลสำหรับฟีเจอร์เดียว

รับฟีเจอร์ทั้งหมดของ Baseline ที่เพิ่งเปิดตัวและพร้อมใช้งานอย่างแพร่หลาย

สมมติว่าคุณต้องการสคริปต์ที่ดึงฟีเจอร์ทั้งหมดที่อยู่ในระดับพื้นฐานที่เพิ่งเปิดตัวหรือพร้อมใช้งานในวงกว้าง ซึ่งอาจมีประโยชน์ เช่น หากคุณมีสคริปต์ที่ทำงานเป็นช่วงๆ และต้องการรับรายการที่อัปเดตซึ่งเปลี่ยนแปลงเมื่อฟีเจอร์ต่างๆ เปลี่ยนจากสถานะพร้อมใช้งานแบบจำกัดเป็นสถานะพื้นฐาน

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 รายการแรกเท่านั้น หากจำนวนฟีเจอร์ที่ดึงข้อมูลเกินกว่านี้ จะมีฟิลด์ metadata ที่ระดับบนสุดของการตอบกลับ JSON ซึ่งมีฟิลด์ย่อยได้สูงสุด 2 รายการ ดังนี้

  • 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 ใดบ้างที่กลายเป็นฟีเจอร์ใหม่ที่พร้อมใช้งาน นี่คือกรณีการใช้งานที่เหมาะสมที่สุดสำหรับ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 ด้วย คุณสามารถใช้วิธีจากตัวอย่างโค้ดล่าสุดและใช้นิเสธโอเปอเรเตอร์กับคําค้นหา เช่น -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 ภายในช่วงวันที่ที่เฉพาะเจาะจงได้โดยใช้ฟิลด์ 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 ที่กลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานอย่างแพร่หลาย ณ จุดใดก็ตามในปี 2022 ไวยากรณ์การค้นหาสำหรับ baseline_date ช่วยให้คุณระบุวันที่เริ่มต้นและวันที่สิ้นสุดโดยคั่นด้วย ..

บทสรุป

การค้นหาในคู่มือนี้มีไว้เพื่อเป็นจุดเริ่มต้นให้คุณเริ่มทดสอบวิธีค้นหาแบ็กเอนด์ของ webstatus.dev เมื่อมีพารามิเตอร์การค้นหาจำนวนเท่าใดก็ตาม คุณควรจะได้รับผลลัพธ์ที่เฉพาะเจาะจงกับแอปพลิเคชันของคุณ

การทราบวิธีค้นหา HTTP API ของแดชบอร์ดแพลตฟอร์มเว็บจะช่วยให้คุณสร้างเครื่องมือที่อาจมีประโยชน์ต่อการทำงาน และช่วยให้คุณทราบว่าฟีเจอร์ที่ต้องการใช้ในโปรเจ็กต์นั้นได้รับการรองรับจากเบราว์เซอร์อย่างกว้างขวางเพียงพอหรือไม่ ซึ่งหมายความว่าคุณสามารถสร้างเว็บแอปพลิเคชันโดยใช้ฟีเจอร์เบราว์เซอร์สมัยใหม่ที่คุณใช้ได้อย่างปลอดภัย ซึ่งจะช่วยให้คุณได้รับประสบการณ์การพัฒนาที่สนุกสนานมากยิ่งขึ้น