Как запросить на панели мониторинга веб-платформы базовые инструменты

Jeremy Wagner

Опубликовано: 4 марта 2025 г.

Базовый уровень (Baseline) был разработан командой Chrome и теперь определяется группой сообщества WebDX . Базовый уровень вносит ясность в отношении функций, совместимых между браузерами. Он призван помочь вам определить, какие функции вы можете использовать, а какие нет, во всех основных браузерных движках. Однако вам нужен способ определить, что это за функции.

К счастью, у вас есть возможность узнать, какие функции доступны в базовой версии (новые или широко распространенные), используя панель управления веб-платформы , которая работает на основе пакета npm web-features . Вы также можете получить доступ к этой информации, используя его HTTP API, чтобы интегрировать данные базовой версии в свой рабочий процесс, и это руководство объясняет, как это сделать.

Соответствующая базовая грамматика запросов на панели управления веб-платформы.

Панель управления веб-платформы использует специальную грамматику запросов , которая помогает вам искать поддержку веб-функций. Вы можете использовать эту грамматику запросов непосредственно на самой панели управления.

При вводе запроса в поле поиска в верхней части страницы вам будет предложен ряд параметров запроса, которые можно использовать для фильтрации веб-функций.

Язык запросов выразителен, что обеспечивает большую гибкость в фильтрации веб-функций, отображаемых на панели управления. На следующем снимке экрана показано, как параметр запроса id можно использовать для сужения поиска до конкретной функции:

Язык запросов задокументирован, но знание всей грамматики не требуется для поиска базовых данных для объектов. Вы можете использовать любой из этих вариантов на панели управления, но вот некоторые из них, которые особенно полезны:

• baseline_status : Используйте этот параметр для фильтрации объектов по трем перечисляемым значениям:
  • limited : Возвращает функции с ограниченной поддержкой браузеров. Если вы отфильтруете по этому значению, вы получите только функции, которые еще не достигли базового статуса.
  • newly : Возвращает функции, которые являются базовыми и недавно доступными.
  • widely : Возвращает функции, которые являются базовыми и широко доступными (Baseline Widely available), то есть функции, которые были базовыми как минимум 30 месяцев. Это функции, которые вы можете использовать, не беспокоясь о поддержке браузеров или полифиллах.
• baseline_date : Использует формат YYYY-MM-DD..YYYY-MM-DD для указания верхней и нижней границы даты достижения объектами базового уровня. Например, чтобы найти все объекты за год, используйте значение типа 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 : Базовый статус для функции. Значения могут быть limited , newly или widely . Примечание: это будет единственное подполе, если status имеет значение limited .
  • low_date : Это указывает дату, когда данная функция стала доступна в базовой версии. Это поле отображается только в том случае, если 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, которая широко доступна в базовой версии. Вы можете использовать эту информацию, например, для отслеживания использования этой функции и информирования пользователей о том, что они могут использовать её во всех современных браузерах, не беспокоясь о поддержке.

Однако это только начало, и HTTP API может сделать для вас гораздо больше, чем просто получить данные по одному параметру.

Получите доступ ко всем новым и широко доступным функциям базовой версии.

Допустим, вам нужен скрипт, который будет собирать все функции, находящиеся в статусе «Базовая версия» или «Широко доступные». Это может быть полезно, например, если у вас есть скрипт, который запускается с определенным интервалом, и вы хотите получать обновленный список, изменяющийся по мере того, как функции переходят из статуса ограниченной доступности в статус базовой версии:

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. Если количество полученных функций превышает это число, на верхнем уровне 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');

Получите все новые функции CSS из базовой версии.

Допустим, вы инженер, специализирующийся на 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 можно запросить все новые доступные функции Baseline. Если же требуется расширить область поиска и включить широко доступные функции CSS Baseline, можно использовать подход из последнего примера кода и применить оператор отрицания к запросу, например, -baseline_status:limited AND group:css' .

Ещё одно поле, которое можно использовать для запросов, — это поле snapshot , полезное для поиска функций JavaScript, входящих в определённый набор функций ECMAScript. Следующий код проверяет наличие всех новых функций базовой версии, входящих в снимок 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_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 панели управления веб-платформой позволяет создавать инструменты, полезные для вашей работы, и получать информацию о том, насколько широко поддерживаются браузерами функции, которые вы хотите использовать в своем проекте. Это означает, что вы можете создавать веб-приложения, используя современные функции браузеров, которые можно безопасно использовать, что значительно повышает удобство работы разработчика.