Come eseguire query sulla dashboard della piattaforma web per gli strumenti di riferimento

Jeremy Wagner

Data di pubblicazione: 4 marzo 2025

Baseline è stato creato dal team di Chrome ed è ora definito dal gruppo della community WebDX. Baseline chiarisce le funzionalità interoperabili tra i browser. È progettato per aiutarti a identificare le funzionalità che puoi o non puoi utilizzare in tutti i principali motori dei browser. Tuttavia, devi avere un modo per identificare queste funzionalità.

Fortunatamente, puoi eseguire query sulle funzionalità che sono disponibili di recente o ampiamente in Baseline utilizzando la dashboard della piattaforma web, basata sul pacchetto npm web-features. Puoi anche accedere a queste informazioni utilizzando la relativa API HTTP per integrare i dati di Baseline nel flusso di lavoro degli strumenti. Questa guida spiega come.

Grammatica delle query di Baseline pertinente della dashboard della piattaforma web

La dashboard della piattaforma web utilizza una grammatica di query specifica per aiutarti a cercare il supporto delle funzionalità web. Puoi utilizzare questa grammatica di query direttamente nella dashboard.

Quando digiti nella casella di ricerca nella parte superiore della pagina, ti verranno presentati una serie di parametri di query che puoi utilizzare per filtrare le funzionalità web.

La grammatica di query è espressiva e ti offre molta flessibilità nel modo in cui filtrare le funzionalità web visualizzate nella dashboard. Lo screenshot seguente mostra come utilizzare il parametro di query id per limitare la ricerca a una funzionalità specifica:

La grammatica di query è documentata, ma non è necessario conoscerla tutta per trovare i dati di Baseline per le funzionalità. Puoi utilizzare una qualsiasi di queste opzioni nella dashboard, ma ecco alcune particolarmente utili:

• baseline_status: utilizza questo parametro per filtrare le funzionalità in base a tre valori enumerati:
  • limited: restituisce le funzionalità con supporto del browser limitato. Se filtri in base a questo valore, riceverai solo le funzionalità che non hanno raggiunto lo stato di Baseline.
  • newly: restituisce le funzionalità disponibili di recente in Baseline.
  • widely: restituisce le funzionalità ampiamente disponibili in Baseline, ovvero le funzionalità che sono in Baseline da almeno 30 mesi. Queste sono le funzionalità che puoi utilizzare senza preoccuparti del supporto del browser o dei polyfill.
• baseline_date: utilizza un formato YYYY-MM-DD..YYYY-MM-DD per specificare un limite superiore e inferiore per la data in cui le funzionalità hanno raggiunto Baseline. Ad esempio, per trovare tutte le funzionalità nell'arco di un anno, utilizza un valore come 2024-01-01..2025-01-01.
• id: l'identificatore di una determinata funzionalità. Questi identificatori sono definiti nel pacchetto web-features. Ad esempio, la voce della funzionalità per Promise.try() viene mappata a un ID di promise-try.
• group: uno dei tanti nomi di gruppi enumerati per le funzionalità. Questo è un criterio utile se vuoi eseguire query solo su un determinato sottoinsieme di funzionalità della piattaforma web. Ad esempio, puoi filtrare un elenco di funzionalità CSS con un valore di css.

Sebbene il frontend della dashboard sia sicuramente utile, si basa su un'API HTTP su cui puoi eseguire query direttamente. Ad esempio, ecco un endpoint che recupera tutte le funzionalità di Baseline disponibili di recente:

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

Struttura della risposta JSON

La risposta JSON che ricevi dall'API HTTP ha una forma coerente per ogni funzionalità. La risposta restituita contiene una proprietà data di primo livello. Questa proprietà contiene un array di tutte le funzionalità corrispondenti. Sebbene questo non sia un elenco esaustivo di tutti i campi disponibili nella risposta JSON, ecco alcuni utili per quanto riguarda Baseline:

• baseline: contiene informazioni generali sullo stato di Baseline di una determinata funzionalità, con i seguenti sottocampi:
  • status: lo stato di Baseline di una funzionalità. I valori possono essere limited, newly o widely. Nota: questo sarà l'unico sottocampo se status ha un valore di limited.
  • low_date: indica la data in cui la funzionalità specificata è diventata disponibile di recente in Baseline. Questo campo viene visualizzato solo se status è newly o widely.
  • high_date: indica la data in cui la funzionalità specificata è diventata ampiamente disponibile in Baseline. Questo campo è disponibile solo se status è widely.
• feature_id: l'ID della funzionalità. Ad esempio, per la griglia CSS, questo sarebbe un valore di "grid".
• name: il nome formattato della funzionalità. In alcuni casi può essere simile a feature_id, ma di solito è diverso. Ad esempio, il valore feature_id per Promise.try() è "promise-try", mentre il campo name per la stessa funzionalità è "Promise.try()".
• spec: questo campo contiene un sottocampo denominato links, che è un array di link a specifiche e altre risorse.

Esistono altri campi, che spesso contengono informazioni su quando i browser di supporto specifici hanno implementato la funzionalità nella versione, dati sui test della piattaforma web e altre informazioni che potrebbero interessarti o meno.

Esempi di query

Ora che hai una breve spiegazione di alcuni dei parametri di query disponibili, dai un'occhiata ad alcuni esempi di query che puoi utilizzare negli strumenti e negli script per selezionare le funzionalità dello stato web che potrebbero essere utili per il tuo flusso di lavoro.

Recuperare i dati per una singola funzionalità

Un buon modo per familiarizzare con l'API è iniziare con un esempio di base che recupera i dati per una singola funzionalità 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);
}

In questo caso, specifichiamo un parametro id con un valore di grid per ottenere informazioni sul supporto delle funzionalità per la griglia CSS, che è ampiamente disponibile in Baseline. Puoi utilizzare queste informazioni, ad esempio, per rilevare l'utilizzo della funzionalità e informare gli utenti che possono utilizzarla in tutti i motori dei browser moderni senza preoccuparsi del supporto.

Questo è solo l'inizio, tuttavia, e l'API HTTP può fare molto di più per te che recuperare i dati per una singola funzionalità.

Recuperare tutte le funzionalità disponibili di recente e ampiamente in Baseline

Supponiamo che tu voglia avere uno script che recuperi tutte le funzionalità disponibili di recente o ampiamente in Baseline. Questo potrebbe essere utile, ad esempio, se hai uno script che viene eseguito a intervalli regolari e vuoi ottenere un elenco aggiornato che cambia man mano che le funzionalità passano dalla disponibilità limitata allo stato di 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);
}

Questa query non recupera tutte le funzionalità disponibili di recente e ampiamente in Baseline, ma solo le prime 100. Se il numero di funzionalità recuperate supera questo valore, nella risposta JSON di primo livello è presente un campo metadata che può contenere fino a due sottocampi:

• next_page_token: una stringa contenente un token che puoi aggiungere alla stringa di query della richiesta GET al backend. Quando lo utilizzi e recuperi di nuovo i dati dal backend webstatus.dev, verrà restituito il batch successivo di funzionalità corrispondenti. Nota: questo campo non sarà disponibile se la query corrente restituisce meno di 100 risultati o se la query corrente si trova alla fine del set di risultati.
• total: un numero intero che indica il numero totale di funzionalità disponibili per la query corrente.

Questi campi sono utili per l'impaginazione. Con questi, possiamo provare il seguente codice per ottenere tutti i risultati di una query che restituisce una grande quantità di dati:

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

Recuperare tutte le funzionalità CSS disponibili di recente in Baseline

Supponiamo che tu sia un ingegnere con un focus speciale su CSS e che ti interessi sapere quali funzionalità CSS diventano disponibili di recente in Baseline. Questo è un caso d'uso perfetto per il valore di query group, nonché per l'utilizzo dell'operatore AND quando esegui query su 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);
}

Quando specifichi un valore di css per group, puoi eseguire query su tutte le funzionalità disponibili di recente in Baseline. Se vuoi espandere l'ambito per includere anche le funzionalità CSS ampiamente disponibili in Baseline, puoi utilizzare l'approccio dell'ultimo esempio di codice e utilizzare l'operatore di negazione con una query come -baseline_status:limited AND group:css'.

Un altro campo su cui puoi eseguire query è il campo snapshot, utile per trovare le funzionalità JavaScript che fanno parte di un insieme specifico di funzionalità ECMAScript. Il codice seguente verifica tutte le funzionalità disponibili di recente in Baseline che fanno parte dello 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);
}

Recuperare tutte le funzionalità di Baseline in un intervallo di date

È possibile eseguire query sul campo baseline_date per trovare tutte le funzionalità che sono diventate di Baseline in un intervallo di date specifico:

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

L'esempio di codice precedente eseguirà una query sulle funzionalità CSS che sono diventate ampiamente disponibili in Baseline in qualsiasi momento nel 2022. La sintassi della query per baseline_date ti consente di specificare una data di inizio e una di fine, separate da ...

Conclusione

Le query in questa guida hanno lo scopo di essere un punto di partenza per iniziare a sperimentare come eseguire query sul backend webstatus.dev. Con un numero qualsiasi di parametri di query disponibili, dovresti essere in grado di ottenere risultati specifici per la tua applicazione.

Sapere come eseguire query sull'API HTTP della dashboard della piattaforma web ti consente di creare strumenti che potrebbero essere utili per il tuo lavoro e di tenerti informato sul fatto che le funzionalità che vuoi utilizzare per il tuo progetto abbiano un supporto del browser sufficientemente ampio. Ciò significa che puoi creare applicazioni web utilizzando le funzionalità dei browser moderni che puoi utilizzare in sicurezza, offrendo un'esperienza di sviluppo molto più piacevole.