Ngày xuất bản: 4 tháng 3 năm 2025
Baseline (Đường cơ sở) do nhóm Chrome khởi xướng và hiện được Nhóm cộng đồng WebDX xác định. Baseline giúp làm rõ các tính năng có thể tương tác giữa các trình duyệt. Tính năng này được thiết kế để giúp bạn xác định những tính năng có thể sử dụng (hoặc không thể sử dụng) trên tất cả các công cụ trình duyệt chính. Tuy nhiên, bạn cần có cách để xác định những tính năng đó.
May mắn là bạn có thể truy vấn những tính năng Mới có hoặc Có rộng rãi trên Baseline bằng Trang tổng quan nền tảng web (được hỗ trợ bởi gói web-features npm). Bạn cũng có thể truy cập vào thông tin này bằng cách sử dụng HTTP API để tích hợp dữ liệu Baseline vào quy trình làm việc của công cụ. Hướng dẫn này sẽ giải thích cách thực hiện.
Ngữ pháp truy vấn Baseline có liên quan của Trang tổng quan nền tảng web
Trang tổng quan nền tảng web sử dụng một ngữ pháp truy vấn cụ thể để giúp bạn tìm kiếm thông tin hỗ trợ về tính năng web. Bạn có thể sử dụng ngữ pháp truy vấn này ngay trên trang tổng quan.
baseline_status:newly.
Khi bạn nhập vào hộp tìm kiếm ở đầu trang, bạn sẽ thấy một số tham số truy vấn mà bạn có thể sử dụng để lọc các tính năng web.
Ngữ pháp truy vấn có tính biểu đạt, giúp bạn linh hoạt hơn trong cách lọc các tính năng web xuất hiện trên trang tổng quan. Ảnh chụp màn hình sau đây cho thấy cách sử dụng tham số truy vấn id để thu hẹp phạm vi tìm kiếm xuống một tính năng cụ thể:
id trong ví dụ này có giá trị là html, cho biết tính năng hỗ trợ phần tử <html> (không có gì đáng ngạc nhiên) là tính năng Có rộng rãi trên Baseline.
Ngữ pháp truy vấn được ghi lại, nhưng bạn không cần phải biết tất cả để tìm dữ liệu Baseline cho các tính năng. Bạn có thể sử dụng bất kỳ lựa chọn nào trong số này trên trang tổng quan, nhưng sau đây là một số lựa chọn đặc biệt hữu ích:
baseline_status: Sử dụng tham số này để lọc các tính năng theo 3 giá trị được liệt kê:limited: Trả về các tính năng có tính năng hỗ trợ trình duyệt hạn chế. Nếu bạn lọc theo giá trị này, bạn sẽ chỉ nhận được các tính năng chưa đạt đến trạng thái Baseline nào.newly: Trả về các tính năng Mới có trên Baseline.widely: Trả về các tính năng Có rộng rãi trên Baseline, tức là các tính năng đã có trên Baseline trong ít nhất 30 tháng. Đây là những tính năng mà bạn có thể sử dụng mà không cần lo lắng về tính năng hỗ trợ trình duyệt hoặc polyfill.
baseline_date: Sử dụng định dạngYYYY-MM-DD..YYYY-MM-DDđể chỉ định giới hạn trên và giới hạn dưới cho thời điểm các tính năng đạt đến trạng thái Baseline. Ví dụ: để tìm tất cả các tính năng trong khoảng thời gian một năm, hãy sử dụng giá trị như2024-01-01..2025-01-01.id: Giá trị nhận dạng cho một tính năng nhất định. Các giá trị nhận dạng này được xác định trong gói web-features. Ví dụ: mục tính năng choPromise.try()liên kết đến mã nhận dạngpromise-try.group: Một trong nhiều tên nhóm được liệt kê cho các tính năng. Đây là tiêu chí hữu ích nếu bạn chỉ muốn truy vấn một số tính năng nhất định của nền tảng web. Ví dụ: bạn có thể lọc thành danh sách các tính năng CSS có giá trị làcss.
Mặc dù giao diện người dùng của trang tổng quan chắc chắn hữu ích, nhưng giao diện này dựa trên một HTTP API mà bạn có thể truy vấn trực tiếp. Ví dụ: đây là một điểm cuối nhận tất cả các tính năng Mới có trên Baseline:
https://api.webstatus.dev/v1/features?q=baseline_status:newly
Cấu trúc phản hồi JSON
Phản hồi JSON mà bạn nhận được từ HTTP API có hình dạng nhất quán cho mọi tính năng. Phản hồi được trả về chứa thuộc tính data ở cấp cao nhất. Thuộc tính này chứa một mảng gồm tất cả các tính năng phù hợp. Mặc dù đây không phải là danh sách đầy đủ tất cả các trường có trong phản hồi JSON, nhưng sau đây là một số trường hữu ích liên quan đến Baseline:
baseline: Chứa thông tin chung về trạng thái Baseline của một tính năng nhất định, với các trường con sau:status: Trạng thái Baseline của một tính năng. Giá trị có thể làlimited,newlyhoặcwidely. Lưu ý: Đây sẽ là trường con duy nhất nếustatuscó giá trị làlimited.low_date: Cho biết ngày mà tính năng nhất định trở thành tính năng Mới có trên Baseline. Trường này chỉ xuất hiện nếustatuslànewlyhoặcwidely.high_date: Cho biết ngày mà tính năng nhất định trở thành tính năng Có rộng rãi trên Baseline. Trường này chỉ có nếustatuslàwidely.
feature_id: Mã nhận dạng của tính năng. Ví dụ: đối với lưới CSS, giá trị này sẽ là"grid".name: Tên được định dạng của tính năng. Trong một số trường hợp, tên này có thể tương tự nhưfeature_id, nhưng thường khác. Ví dụ: giá trịfeature_idchoPromise.try()là"promise-try", trong khi trườngnamecho cùng một tính năng là"Promise.try()".spec: Trường này chứa một trường con có tên làlinks, là một mảng các đường liên kết đến thông số kỹ thuật và các tài nguyên khác.
Có các trường khác, thường chứa thông tin về thời điểm các trình duyệt hỗ trợ cụ thể triển khai tính năng ở phiên bản nào, dữ liệu về Kiểm thử nền tảng web và những thông tin khác mà bạn có thể quan tâm hoặc không quan tâm.
Câu hỏi mẫu
Bây giờ bạn đã có phần giải thích nhanh về một số tham số truy vấn có sẵn, hãy xem một số câu hỏi mẫu mà bạn có thể sử dụng trong các công cụ và tập lệnh để chọn các tính năng trạng thái web có thể hữu ích cho quy trình làm việc của bạn.
Nhận dữ liệu cho một tính năng
Một cách hay để làm quen với API là bắt đầu với một ví dụ cơ bản nhận dữ liệu cho một tính năng 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);
}
Trong trường hợp này, chúng tôi chỉ định tham số id có giá trị là grid để nhận thông tin hỗ trợ về tính năng cho lưới CSS, là tính năng Có rộng rãi trên Baseline. Ví dụ: bạn có thể sử dụng thông tin này để phát hiện việc sử dụng tính năng và cho người dùng biết rằng họ có thể sử dụng tính năng này trong tất cả các công cụ trình duyệt hiện đại mà không cần lo lắng về tính năng hỗ trợ.
Tuy nhiên, đây chỉ là bước khởi đầu và HTTP API có thể giúp bạn làm được nhiều việc hơn là chỉ nhận dữ liệu cho một tính năng.
Nhận tất cả các tính năng Mới có và Có rộng rãi trên Baseline
Giả sử bạn muốn có một tập lệnh kéo tất cả các tính năng Mới có hoặc Có rộng rãi trên Baseline. Ví dụ: điều này có thể hữu ích nếu bạn có một tập lệnh chạy theo một khoảng thời gian nhất định và bạn muốn nhận danh sách cập nhật thay đổi khi các tính năng xuất hiện từ trạng thái lượng hàng có hạn sang trạng thái 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);
}
Truy vấn này không nhận tất cả các tính năng Mới có và Có rộng rãi trên Baseline, mà chỉ nhận 100 tính năng đầu tiên. Nếu số lượng tính năng được truy xuất vượt quá con số này, thì sẽ có một trường metadata ở cấp cao nhất của phản hồi JSON có thể chứa tối đa 2 trường con:
next_page_token: Một chuỗi chứa mã thông báo mà bạn có thể thêm vào chuỗi truy vấn của yêu cầuGETđến phần phụ trợ. Khi bạn sử dụng mã thông báo này và tìm nạp lại dữ liệu từ phần phụ trợ webstatus.dev, mã thông báo này sẽ trả về lô tính năng phù hợp tiếp theo. Lưu ý: Trường này sẽ không có nếu truy vấn hiện tại trả về ít hơn 100 kết quả hoặc nếu truy vấn hiện tại ở cuối tập kết quả.total: Một số nguyên cho biết tổng số tính năng có sẵn cho truy vấn hiện tại.
Các trường này hữu ích cho việc phân trang. Với các trường này, chúng ta có thể thử đoạn mã sau để nhận tất cả kết quả cho một truy vấn trả về lượng lớn dữ liệu:
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');
Nhận tất cả các tính năng CSS Mới có trên Baseline
Giả sử bạn là một kỹ sư tập trung đặc biệt vào CSS và bạn muốn biết những tính năng CSS nào trở thành tính năng Mới có trên Baseline. Đây là trường hợp sử dụng hoàn hảo cho giá trị truy vấn group, cũng như cách sử dụng toán tử AND khi truy vấn 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);
}
Khi chỉ định giá trị css cho group, bạn có thể truy vấn tất cả các tính năng Mới có trên Baseline. Nếu bạn muốn mở rộng phạm vi để bao gồm cả các tính năng CSS Có rộng rãi trên Baseline, bạn có thể sử dụng phương pháp trong mẫu mã mẫu cuối cùng và sử dụng toán tử phủ định với một truy vấn như -baseline_status:limited AND group:css'.
Một trường khác mà bạn có thể truy vấn là trường snapshot, hữu ích cho việc tìm các tính năng JavaScript thuộc một tập hợp tính năng ECMAScript cụ thể. Đoạn mã sau đây kiểm tra tất cả các tính năng Mới có trên Baseline thuộc ảnh chụp nhanh 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);
}
Nhận tất cả các tính năng Baseline trong một phạm vi ngày
Bạn có thể truy vấn trường baseline_date để tìm tất cả các tính năng trở thành tính năng Baseline trong một phạm vi ngày cụ thể:
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);
}
Mẫu đoạn mã trước đây sẽ truy vấn các tính năng CSS trở thành tính năng Có rộng rãi trên Baseline vào bất kỳ thời điểm nào trong năm 2022. Cú pháp truy vấn cho baseline_date cho phép bạn chỉ định ngày bắt đầu và ngày kết thúc, được phân tách bằng ...
Kết luận
Các truy vấn trong hướng dẫn này nhằm mục đích là điểm xuất phát để bạn bắt đầu thử nghiệm cách truy vấn phần phụ trợ webstatus.dev. Với bất kỳ số lượng tham số truy vấn có sẵn nào, bạn sẽ có thể nhận được kết quả dành riêng cho ứng dụng của mình.
Việc biết cách truy vấn HTTP API của Trang tổng quan nền tảng web giúp bạn có thể xây dựng các công cụ có thể hữu ích cho công việc của mình và giúp bạn biết liệu các tính năng mà bạn muốn sử dụng cho dự án của mình có đủ tính năng hỗ trợ trình duyệt hay không. Điều này có nghĩa là bạn có thể xây dựng các ứng dụng web bằng các tính năng trình duyệt hiện đại mà bạn có thể sử dụng một cách an toàn, mang lại trải nghiệm nhà phát triển thú vị hơn nhiều.