如何查询 Web 平台仪表盘以获取 Baseline 工具

Jeremy Wagner

发布时间：2025 年 3 月 4 日

Baseline 最初由 Chrome 团队发起，现在由 WebDX 社区组 定义。Baseline 明确了浏览器之间可互操作的功能。它旨在帮助您确定可以在所有主要浏览器引擎中使用（或不能使用）哪些功能。但是，您需要一种方法来识别这些功能是什么。

值得庆幸的是，您可以使用 Web 平台仪表盘 查询哪些功能是 Baseline 新近可用或广泛可用的——该仪表盘由 web-features npm 包 提供支持。您还可以使用其 HTTP API 访问此信息，以将 Baseline 数据集成到您的工具工作流程中，本指南将解释如何操作。

Web 平台仪表盘相关的 Baseline 查询语法

Web 平台仪表盘使用特定的 查询语法 来帮助您搜索 Web 功能支持。您可以直接在仪表盘上使用此查询语法。

A list of features on the Web Platform Status dashboard, showing the baseline_status query parameter in action to display Baseline Newly available features.
Web 平台仪表盘上的功能列表。该列表基于一个搜索，该搜索仅显示使用 baseline_status:newly 搜索查询的 Baseline 新近可用功能。

当您在页面顶部的搜索框中键入内容时，将显示许多查询参数，您可以使用这些参数来过滤 Web 功能。

The autocomplete feature of the Web Platform Status Dashboard, showing an initial value of 'baseline', revealing all of the available query parameters beginning with that initial value.
d Web 平台状态仪表盘上的搜索框将在您键入时显示可用的查询参数。在本例中，自动完成功能建议使用与 Baseline 相关的参数，以按 Baseline 状态甚至日期范围进行过滤。

查询语法具有表现力，使您可以非常灵活地过滤仪表盘上显示的 Web 功能。以下屏幕截图显示了如何使用 id 查询参数缩小到特定功能

The Web Platform status dashboard showing how to query support by feature in the search box by using the id parameter.
本例中的 id 参数的值为 html，这表示对 <html> 元素的支持，而该元素（不出所料）是 Baseline 广泛可用的。

查询语法 已记录在案，但并非必须了解所有内容才能找到功能的 Baseline 数据。您可以在仪表盘上使用这些选项中的任何一个，但以下是一些特别有用的选项

  • baseline_status：使用此参数按三个枚举值过滤功能
    • limited：返回浏览器支持有限的功能。如果您按此值过滤，您将仅收到尚未达到任何 Baseline 状态的功能。
    • newly：返回 Baseline 新近可用的功能。
    • widely：返回 Baseline 广泛可用的功能，这些功能已成为 Baseline 至少 30 个月。这些是您可以期望使用而无需担心浏览器支持或 polyfill 的功能。
  • baseline_date：使用 YYYY-MM-DD..YYYY-MM-DD 格式来指定功能达到 Baseline 的上限和下限。例如，要查找一年内的所有功能，请使用类似 2024-01-01..2025-01-01 的值。
  • id：给定功能的标识符。这些标识符在 web-features 包中定义。例如，Promise.try() 的功能条目 映射到 promise-try 的 ID。
  • group：功能的许多 枚举组名称 之一。如果您只想查询 Web 平台功能的某个子集，这是一个有用的条件。例如，您可以使用 css 值过滤到 CSS 功能列表。

虽然仪表盘前端肯定很有用，但它位于您可以直接查询的 HTTP API 之上。例如，这是 一个端点，用于获取所有 Baseline 新近可用的功能

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

JSON 响应结构

您从 HTTP API 收到的 JSON 响应对于每个功能都具有一致的形状。返回的响应在顶层包含一个 data 属性。此属性包含所有匹配功能的数组。虽然这不是 JSON 响应中所有可用字段的详尽列表，但以下是与 Baseline 相关的一些有用字段

  • baseline：包含有关给定功能的 Baseline 状态的常规信息，以及以下子字段
    • status：功能的 Baseline 状态。值可以是 limited、newly 或 widely。注意： 如果 status 的值为 limited，则这将是唯一的子字段。
    • low_date：指示给定功能成为 Baseline 新近可用的日期。仅当 status 为 newly 或 widely 时，才会显示此字段。
    • high_date：指示给定功能成为 Baseline 广泛可用的日期。仅当 status 为 widely 时，此字段才可用。
  • feature_id：功能的 ID。例如，对于 CSS Grid，这将是 "grid" 值。
  • name：功能的格式化名称。在某些情况下，这可能与 feature_id 类似，但通常不同。例如，Promise.try() 的 feature_id 值为 "promise-try"，而同一功能的 name 字段为 "Promise.try()"。
  • spec：此字段包含一个名为 links 的子字段，这是一个指向规范和其他资源的链接数组。

还有其他字段，通常包含有关特定支持浏览器在哪个版本中实现该功能的信息、关于 Web 平台测试 的数据以及您可能关心或不关心的其他内容。

示例查询

现在您已经快速了解了一些可用的查询参数，请查看一些示例查询，您可以在工具和脚本中使用这些查询来选择对您的工作流程有用的 Web 状态功能。

获取单个功能的数据

熟悉 API 的一个好方法是从一个基本示例开始，该示例获取单个 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);
}

在本例中，我们指定一个 id 参数，其值为 grid，以获取 CSS Grid 的功能支持信息，CSS Grid 是 Baseline 广泛可用的。例如，您可以使用此信息来检测功能的使用情况，并让用户知道他们可以在所有现代浏览器引擎中使用它，而无需担心支持问题。

但这只是一个开始，HTTP API 可以为您做的不仅仅是获取单个功能的数据。

获取所有 Baseline 新近可用和广泛可用的功能

假设您想要有一个脚本，该脚本拉取所有 Baseline 新近可用或广泛可用的功能。例如，如果您有一个以一定间隔运行的脚本，并且您希望获得一个更新的列表，该列表会随着功能从有限可用性变为 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);
}

此查询不会获取所有 Baseline 新近可用和广泛可用的功能，而仅获取前 100 个。如果检索到的功能数量超过此数量，则 JSON 响应的顶层会有一个 metadata 字段，该字段最多可以包含两个子字段

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

获取所有 Baseline 新近可用的 CSS 功能

假设您是一位特别关注 CSS 的工程师，并且您有兴趣了解哪些 CSS 功能成为 Baseline 新近可用的功能。这是 group 查询值以及如何在查询 webstatus.dev 时使用 AND 运算符的完美用例

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

当为 group 指定 css 值时，您可以查询所有 Baseline 新近可用的功能。如果您想扩大范围以包括 Baseline 广泛可用的 CSS 功能，您可以使用最后一个代码示例中的方法，并使用否定运算符进行查询，例如 -baseline_status:limited AND group:css'。

您可以查询的另一个字段是 snapshot 字段，这对于查找属于特定 ECMAScript 功能集一部分的 JavaScript 功能很有用。以下代码检查属于 ecmascript-2023 快照的所有 Baseline 新近可用的功能

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

上面的代码示例将查询在 2022 年任何时候成为 Baseline 广泛可用的 CSS 功能。baseline_date 的查询语法允许您指定开始日期和结束日期，以 .. 分隔。

结论

本指南中的查询旨在作为您开始试验如何查询 webstatus.dev 后端的起点。借助任意数量的可用查询参数，您应该能够获得特定于您的应用程序的结果。

了解如何查询 Web 平台仪表盘的 HTTP API 使您能够构建可能对您的工作有用的工具，并让您随时了解您想要用于项目的功能是否具有足够广泛的浏览器支持。这意味着您可以使用现代浏览器功能构建 Web 应用程序，您可以安全地使用这些功能，从而提供更愉快的开发者体验。