Cara membuat kueri Dasbor Platform Web untuk alat Dasar Pengukuran

Jeremy Wagner

Dipublikasikan: 4 Maret 2025

Baseline berasal dari tim Chrome dan kini ditentukan oleh WebDX Community Group. Dasar memberikan kejelasan pada fitur yang dapat dioperasikan antar-browser. Dirancang untuk membantu Anda mengidentifikasi fitur yang dapat Anda gunakan—atau tidak dapat Anda gunakan—di semua mesin browser utama. Namun, Anda memerlukan cara untuk mengidentifikasi fitur tersebut.

Untungnya, Anda dapat membuat kueri fitur yang tersedia di Baseline Baru atau Luas menggunakan Dasbor Platform Web—yang didukung oleh paket npm web-features. Anda juga dapat mengakses informasi ini menggunakan HTTP API-nya untuk mengintegrasikan data Dasar ke dalam alur kerja alat Anda, dan panduan ini menjelaskan caranya.

Tata bahasa kueri Dasar yang relevan di Dasbor Platform Web

Dasbor Platform Web menggunakan tata bahasa kueri tertentu untuk membantu Anda menelusuri dukungan fitur web. Anda dapat menggunakan tata bahasa kueri ini langsung di dasbor.

Saat Anda mengetik di kotak penelusuran di bagian atas halaman, Anda akan melihat sejumlah parameter kueri yang dapat digunakan untuk memfilter fitur web.

Tata bahasa kueri sangat ekspresif, sehingga memberi Anda banyak fleksibilitas dalam cara memfilter fitur web yang ditampilkan di dasbor. Screenshot berikut menunjukkan cara parameter kueri id dapat digunakan untuk mempersempit fitur tertentu:

Tata bahasa kueri didokumentasikan, tetapi tidak semua tata bahasa tersebut diperlukan untuk menemukan data Dasar untuk fitur. Anda dapat menggunakan salah satu opsi ini di dasbor, tetapi berikut beberapa opsi yang sangat berguna:

• baseline_status: Gunakan parameter ini untuk memfilter fitur menurut tiga nilai yang di-enum:
  • limited: Menampilkan fitur yang memiliki dukungan browser terbatas. Jika memfilter menurut nilai ini, Anda hanya akan menerima fitur yang belum mencapai status Dasar apa pun.
  • newly: Menampilkan fitur yang tersedia Baru di Baseline.
  • widely: Menampilkan fitur yang tersedia secara luas di Baseline, yaitu fitur yang telah menjadi Baseline selama minimal 30 bulan. Ini adalah fitur yang dapat Anda gunakan tanpa mengkhawatirkan dukungan browser atau polyfill.
• baseline_date: Menggunakan format YYYY-MM-DD..YYYY-MM-DD untuk menentukan batas atas dan bawah saat fitur mencapai Baseline. Misalnya, untuk menemukan semua fitur dalam rentang satu tahun, gunakan nilai seperti 2024-01-01..2025-01-01.
• id: ID untuk fitur tertentu. ID ini ditentukan dalam paket web-features. Misalnya, entri fitur untuk Promise.try() dipetakan ke ID promise-try.
• group: Salah satu dari banyak nama grup yang di-enum untuk fitur. Ini adalah kriteria yang berguna jika Anda hanya ingin membuat kueri untuk subkumpulan fitur platform web tertentu. Misalnya, Anda dapat memfilter ke daftar fitur CSS dengan nilai css.

Meskipun frontend dasbor sangat berguna, dasbor ini berada di atas HTTP API yang dapat Anda kueri secara langsung. Misalnya, berikut endpoint yang mendapatkan semua fitur Baseline yang Baru tersedia:

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

Struktur respons JSON

Respons JSON yang Anda terima dari HTTP API memiliki bentuk yang konsisten untuk setiap fitur. Respons yang ditampilkan berisi properti data di tingkat teratas. Properti ini berisi array dari semua fitur yang cocok. Meskipun ini bukan daftar lengkap semua kolom yang tersedia dalam respons JSON, berikut beberapa kolom yang berguna terkait Baseline:

• baseline: Berisi informasi umum tentang status Dasar dari fitur tertentu, dengan sub-bidang berikut:
  • status: Status Baseline untuk fitur. Nilai dapat berupa limited, newly, atau widely. Catatan: ini akan menjadi satu-satunya sub-bidang jika status memiliki nilai limited.
  • low_date: Ini menunjukkan tanggal saat fitur tertentu menjadi Tersedia di Baseline. Kolom ini hanya muncul jika status adalah newly atau widely.
  • high_date: Ini menunjukkan tanggal saat fitur tertentu menjadi Tersedia luas di Baseline. Kolom ini hanya tersedia jika status adalah widely.
• feature_id: ID untuk fitur. Misalnya, untuk petak CSS, ini akan menjadi nilai "grid".
• name: Nama fitur yang diformat. Hal ini bisa serupa dengan feature_id dalam beberapa kasus, tetapi biasanya berbeda. Misalnya, nilai feature_id untuk Promise.try() adalah "promise-try", sedangkan kolom name untuk fitur yang sama adalah "Promise.try()".
• spec: Kolom ini berisi sub-kolom bernama links, yang merupakan array link ke spesifikasi dan resource lainnya.

Ada kolom lain, yang sering kali berisi informasi tentang kapan browser pendukung tertentu menerapkan fitur pada versi mana, data tentang Web Platform Tests, dan hal-hal lain yang mungkin atau tidak Anda pedulikan.

Contoh kueri

Setelah Anda mendapatkan penjelasan singkat tentang beberapa parameter kueri yang tersedia, lihat beberapa contoh kueri yang dapat Anda gunakan di alat dan skrip untuk memilih fitur status web yang dapat berguna bagi alur kerja Anda.

Mendapatkan data untuk satu fitur

Cara yang baik untuk memahami API adalah dengan memulai contoh dasar yang mendapatkan data untuk satu fitur web.

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

Dalam hal ini, kita menentukan parameter id dengan nilai grid untuk mendapatkan informasi dukungan fitur untuk petak CSS, yang tersedia secara luas di Baseline. Anda dapat menggunakan informasi ini, misalnya, untuk mendeteksi penggunaan fitur dan memberi tahu pengguna bahwa mereka dapat menggunakannya di semua mesin browser modern tanpa mengkhawatirkan dukungan.

Namun, ini baru permulaan, dan HTTP API dapat melakukan lebih banyak hal untuk Anda daripada mendapatkan data untuk satu fitur.

Mendapatkan semua fitur yang Baru dan Tersedia Luas di Baseline

Misalnya, Anda ingin memiliki skrip yang menarik semua fitur yang tersedia di Baseline Baru atau Tersedia Luas. Hal ini dapat berguna, misalnya, jika Anda memiliki skrip yang berjalan pada beberapa interval dan Anda ingin mendapatkan daftar terbaru yang berubah saat fitur muncul dari ketersediaan terbatas ke status Dasar:

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

Kueri ini tidak mendapatkan semua fitur Dasar yang Baru dan Tersedia Luas, tetapi hanya 100 fitur pertama. Jika jumlah fitur yang diambil melebihi jumlah ini, ada kolom metadata di tingkat teratas respons JSON yang dapat berisi hingga dua subkolom:

• next_page_token: String yang berisi token yang dapat Anda tambahkan ke string kueri permintaan GET ke backend. Saat Anda menggunakannya dan mengambil ulang data dari backend webstatus.dev, fitur ini akan menampilkan batch berikutnya dari fitur yang cocok. Catatan: Kolom ini tidak akan tersedia jika kueri saat ini menampilkan kurang dari 100 hasil, atau jika kueri saat ini berada di akhir set hasil.
• total: Bilangan bulat yang menunjukkan jumlah total fitur yang tersedia untuk kueri saat ini.

Kolom ini berguna untuk penomoran halaman. Dengan demikian, kita dapat mencoba kode berikut untuk mendapatkan semua hasil kueri yang menampilkan data dalam jumlah besar:

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

Mendapatkan semua fitur CSS yang Baru tersedia di Baseline

Misalnya, Anda adalah seorang engineer yang berfokus pada CSS, dan Anda tertarik untuk mengetahui fitur CSS mana yang menjadi fitur yang Baru Tersedia di Baseline. Ini adalah kasus penggunaan yang sempurna untuk nilai kueri group, serta cara menggunakan operator AND saat membuat kueri 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);
}

Saat menentukan nilai css untuk group, Anda dapat membuat kueri untuk semua fitur Dasar yang Baru tersedia. Jika ingin memperluas cakupan untuk menyertakan fitur CSS Dasar yang Tersedia Luas juga, Anda dapat menggunakan pendekatan dari contoh kode terakhir dan menggunakan operator negasi dengan kueri seperti -baseline_status:limited AND group:css'.

Kolom lain yang dapat Anda kueri adalah kolom snapshot, yang berguna untuk menemukan fitur JavaScript yang merupakan bagian dari serangkaian fitur ECMAScript tertentu. Kode berikut memeriksa semua fitur Baru tersedia yang sesuai dengan Baseline yang merupakan bagian dari snapshot 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);
}

Mendapatkan semua fitur Dasar dalam rentang tanggal

Kolom baseline_date dapat dikueri untuk menemukan semua fitur yang menjadi Dasar dalam rentang tanggal tertentu:

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

Contoh kode di atas akan membuat kueri untuk fitur CSS yang menjadi Tersedia Luas Baseline pada titik mana pun pada tahun 2022. Sintaksis kueri untuk baseline_date memungkinkan Anda menentukan tanggal mulai dan akhir, yang dipisahkan oleh ...

Kesimpulan

Kueri dalam panduan ini dimaksudkan sebagai titik awal bagi Anda untuk mulai bereksperimen dengan cara membuat kueri backend webstatus.dev. Dengan sejumlah parameter kueri yang tersedia, Anda akan bisa mendapatkan hasil yang spesifik untuk aplikasi Anda.

Mengetahui cara membuat kueri HTTP API Dasbor Platform Web memberi Anda kemampuan untuk membuat alat yang mungkin berguna untuk pekerjaan Anda, dan membuat Anda tetap mengetahui apakah fitur yang ingin Anda gunakan untuk project Anda memiliki dukungan browser yang cukup luas. Artinya, Anda dapat membangun aplikasi web menggunakan fitur browser modern yang dapat Anda gunakan dengan aman, sehingga memberikan pengalaman developer yang jauh lebih menyenangkan.