Como consultar o Painel da Web Platform para ferramentas de referência

Jeremy Wagner

Publicado em: 4 de março de 2025

O Baseline foi criado pela equipe do Chrome e agora é definido pelo WebDX Community Group (em inglês). O Baseline traz clareza aos recursos interoperáveis entre navegadores. Ele foi criado para ajudar você a identificar quais recursos podem ser usados (ou não) em todos os principais mecanismos de navegador. No entanto, você precisa de uma maneira de identificar esses recursos.

Felizmente, você pode consultar quais recursos estão disponíveis na linha de base ou em geral usando o painel da plataforma da Web, que é alimentado pelo pacote npm web-features. Você também pode acessar essas informações usando a API HTTP para integrar dados de comparativo de mercado ao fluxo de trabalho de ferramentas. Este guia explica como fazer isso.

A gramática de consulta de linha de base relevante do painel da plataforma da Web

O painel da plataforma da Web usa uma gramática de consulta específica para ajudar você a pesquisar o suporte a recursos da Web. Você pode usar essa gramática de consulta diretamente no painel.

Ao digitar na caixa de pesquisa na parte de cima da página, você vai encontrar vários parâmetros de consulta que podem ser usados para filtrar recursos da Web.

A gramática de consulta é expressiva, oferecendo muita flexibilidade na forma de filtrar os recursos da Web exibidos no painel. A captura de tela a seguir mostra como o parâmetro de consulta id pode ser usado para restringir a um recurso específico:

A gramática de consulta está documentada, mas não é necessário conhecer tudo para encontrar dados de comparativo de mercado para recursos. Você pode usar qualquer uma dessas opções no painel, mas aqui estão algumas que são especialmente úteis:

• baseline_status: use esse parâmetro para filtrar recursos por três valores enumerados:
  • limited: retorna recursos com suporte limitado do navegador. Se você filtrar por esse valor, vai receber apenas recursos que não atingiram nenhum status de comparativo de mercado.
  • newly: retorna recursos que são recém-disponibilizados no valor de referência.
  • widely: retorna recursos que são Baseline amplamente disponíveis, ou seja, que são Baseline há pelo menos 30 meses. Esses são recursos que você pode usar sem se preocupar com suporte do navegador ou polyfills.
• baseline_date: usa um formato YYYY-MM-DD..YYYY-MM-DD para especificar um limite superior e inferior de quando os recursos atingiram o valor de referência. Por exemplo, para encontrar todos os recursos no período de um ano, use um valor como 2024-01-01..2025-01-01.
• id: o identificador de um determinado recurso. Esses identificadores são definidos no pacote web-features. Por exemplo, a entrada de recurso para Promise.try() é mapeada para um ID de promise-try.
• group: um dos muitos nomes de grupos enumerados para recursos. Esse é um critério útil se você quiser consultar apenas um determinado subconjunto de recursos da plataforma Web. Por exemplo, você pode filtrar uma lista de recursos CSS com um valor de css.

Embora o front-end do painel seja útil, ele se baseia em uma API HTTP que pode ser consultada diretamente. Por exemplo, este é um endpoint que recebe todos os recursos básicos recém-disponibilizados:

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

Estrutura da resposta JSON

A resposta JSON que você recebe da API HTTP tem um formato consistente para cada recurso. A resposta retornada contém uma propriedade data no nível superior. Essa propriedade contém uma matriz de todos os recursos correspondentes. Embora esta não seja uma lista exaustiva de todos os campos disponíveis na resposta JSON, aqui estão alguns úteis quando se trata de Baseline:

• baseline: contém informações gerais sobre o status de valor de referência de um determinado recurso, com os seguintes subcampos:
  • status: o status de valor de referência de um recurso. Os valores podem ser limited, newly ou widely. Observação:esse será o único subcampo se status tiver um valor de limited.
  • low_date: indica a data em que o recurso passou a estar disponível na referência. Esse campo só aparece se status for newly ou widely.
  • high_date: indica a data em que o recurso especificado ficou disponível para todos. Este campo só está disponível se status for widely.
• feature_id: o ID do recurso. Por exemplo, para a grade CSS, esse seria um valor de "grid".
• name: o nome formatado do recurso. Em alguns casos, pode ser semelhante a feature_id, mas geralmente é diferente. Por exemplo, o valor de feature_id para Promise.try() é "promise-try", enquanto o campo name para o mesmo recurso é "Promise.try()".
• spec: esse campo contém um subcampo chamado links, que é uma matriz de links para especificações e outros recursos.

Há outros campos, geralmente com informações sobre quando navegadores específicos implementaram o recurso em qual versão, dados sobre Web Platform Tests e outras coisas que podem ou não ser importantes para você.

Exemplos de consultas

Agora que você tem uma explicação rápida de alguns dos parâmetros de consulta disponíveis, confira alguns exemplos de consultas que podem ser usadas nas suas ferramentas e scripts para selecionar recursos de status da Web que podem ser úteis para seu fluxo de trabalho.

Receber dados de um único recurso

Uma boa maneira de se familiarizar com a API é começar com um exemplo básico que recebe dados de um único recurso da 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);
}

Nesse caso, especificamos um parâmetro id com o valor grid para receber informações de suporte de recursos da grade CSS, que é o Baseline Amplamente disponível. Você pode usar essas informações, por exemplo, para detectar o uso do recurso e informar aos usuários que ele pode ser usado em todos os mecanismos de navegador modernos sem se preocupar com o suporte.

No entanto, este é apenas o começo, e a API HTTP pode fazer muito mais por você do que apenas receber dados para um único recurso.

Receber todos os recursos novos e amplamente disponíveis da Baseline

Digamos que você queira um script que reúna todos os recursos que estão na versão de base recém-lançada ou disponíveis para todos. Isso pode ser útil, por exemplo, se você tiver um script que é executado em algum intervalo e quiser receber uma lista atualizada que muda à medida que os recursos passam da disponibilidade limitada para o status de valor de referência:

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

Essa consulta não recebe todos os recursos novos e amplamente disponíveis da linha de base, apenas os 100 primeiros. Se o número de recursos recuperados exceder esse limite, haverá um campo metadata no nível superior da resposta JSON que pode conter até dois subcampos:

• next_page_token: uma string que contém um token que pode ser adicionado à string de consulta da solicitação GET ao back-end. Quando você o usa e busca novamente os dados do back-end webstatus.dev, ele retorna o próximo lote de recursos correspondentes. Observação:esse campo não estará disponível se a consulta atual retornar menos de 100 resultados ou se estiver no final do conjunto de resultados.
• total: um número inteiro que indica o número total de recursos disponíveis para a consulta atual.

Esses campos são úteis para paginação. Com eles, podemos testar o seguinte código para receber todos os resultados de uma consulta que retorna uma grande quantidade de dados:

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

Conheça todos os recursos de CSS recém-disponíveis da Baseline

Digamos que você seja um engenheiro com foco especial em CSS e queira saber quais recursos do CSS se tornam recursos recém-disponíveis da Baseline. Esse é um caso de uso perfeito para o valor de consulta group, bem como para usar o operador AND ao consultar 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);
}

Ao especificar um valor de css para group, é possível consultar todos os recursos disponíveis recentemente da comparação de mercado. Se você quiser expandir o escopo para incluir também recursos do CSS do Baseline amplamente disponível, use a abordagem do último exemplo de código e o operador de negação com uma consulta como -baseline_status:limited AND group:css'.

Outro campo que você pode consultar é o snapshot, útil para encontrar recursos JavaScript que fazem parte de um conjunto específico de recursos ECMAScript. O código a seguir verifica todos os recursos recém-disponibilizados da linha de base que fazem parte do 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);
}

Acessar todos os recursos de referência em um período

O campo baseline_date pode ser consultado para encontrar todos os recursos que se tornaram de referência em um período específico:

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

O exemplo de código anterior vai consultar recursos do CSS que se tornaram amplamente disponíveis na linha de base em algum momento de 2022. A sintaxe de consulta para baseline_date permite especificar uma data de início e de término, separadas por ...

Conclusão

As consultas neste guia são um ponto de partida para você começar a testar como consultar o back-end webstatus.dev. Com qualquer número de parâmetros de consulta disponíveis, você pode receber resultados específicos para seu aplicativo.

Saber como consultar a API HTTP do painel da plataforma Web permite criar ferramentas que podem ser úteis para seu trabalho e manter você informado sobre se os recursos que quer usar no projeto têm suporte de navegador amplo o suficiente. Isso significa que você pode criar aplicativos da Web usando recursos modernos do navegador que podem ser usados com segurança, proporcionando uma experiência de desenvolvimento muito mais agradável.