Web Platform Dashboard nach Tools für Baselines abfragen

Jeremy Wagner

Veröffentlicht: 4. März 2025

Der Begriff Baseline wurde vom Chrome-Team entwickelt und wird jetzt von der WebDX Community Group definiert. Der Baseline-Test gibt Aufschluss über Funktionen, die zwischen Browsern interoperabel sind. Sie können damit ermitteln, welche Funktionen in allen gängigen Browser-Engines unterstützt werden und welche nicht. Sie müssen jedoch wissen, welche das sind.

Glücklicherweise können Sie über das Web Platform Dashboard, das auf dem web-features-npm-Paket basiert, abfragen, welche Funktionen als Baseline Newly oder Widely verfügbar eingestuft sind. Sie können auch über die HTTP API auf diese Informationen zugreifen, um Baseline-Daten in Ihren Tool-Workflow einzubinden. In diesem Leitfaden wird erläutert, wie das geht.

Die relevante Baseline-Abfragegrammatik des Web Platform Dashboards

Im Dashboard der Webplattform wird eine bestimmte Abfragegrammatik verwendet, um nach Support für Webfunktionen zu suchen. Sie können diese Abfragesprache direkt im Dashboard verwenden.

Wenn Sie oben auf der Seite in das Suchfeld etwas eingeben, werden eine Reihe von Abfrageparametern angezeigt, mit denen Sie Webfunktionen filtern können.

Die Abfragesprache ist ausdrucksstark und bietet viel Flexibilität bei der Filterung der Webfunktionen, die im Dashboard angezeigt werden. Im folgenden Screenshot wird gezeigt, wie Sie mit dem Abfrageparameter id die Ergebnisse auf eine bestimmte Funktion eingrenzen können:

Die Abfragesprache ist dokumentiert. Sie müssen sie aber nicht vollständig kennen, um Baseline-Daten für Funktionen zu finden. Sie können alle Optionen im Dashboard verwenden. Hier sind einige besonders nützliche:

• baseline_status: Mit diesem Parameter können Sie Features nach drei aufgezählten Werten filtern:
  • limited: Gibt Funktionen zurück, die nur eingeschränkt unterstützt werden. Wenn Sie nach diesem Wert filtern, werden nur Funktionen angezeigt, die noch keinen Baseline-Status erreicht haben.
  • newly: Gibt Funktionen zurück, die als „Baseline Newly available“ (Neu in der Baseline verfügbar) gekennzeichnet sind.
  • widely: Hier werden Funktionen zurückgegeben, die seit mindestens 30 Monaten als Standard verfügbar sind. Diese Funktionen können Sie ohne Bedenken verwenden, ohne sich Gedanken über den Browsersupport oder Polyfills machen zu müssen.
• baseline_date: Hier wird ein YYYY-MM-DD..YYYY-MM-DD-Format verwendet, um eine obere und untere Grenze für den Zeitpunkt anzugeben, zu dem die ursprünglichen Werte erreicht wurden. Wenn Sie beispielsweise alle Funktionen innerhalb eines Jahres finden möchten, verwenden Sie einen Wert wie 2024-01-01..2025-01-01.
• id: Die Kennung für ein bestimmtes Element. Diese Kennungen sind im Paket web-features definiert. Beispiel: Der Merkmalseintrag für Promise.try() wird der ID promise-try zugeordnet.
• group: Einer der vielen enumerierten Gruppennamen für Features. Das ist ein nützliches Kriterium, wenn Sie nur nach einer bestimmten Teilmenge der Webplattformfunktionen suchen möchten. So können Sie beispielsweise nach einer Liste von CSS-Funktionen mit dem Wert css filtern.

Das Dashboard-Frontend ist zwar sehr nützlich, basiert aber auf einer HTTP-API, die Sie direkt abfragen können. Hier ist beispielsweise ein Endpunkt, der alle Baseline-Funktionen abrufen kann, die neu verfügbar sind:

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

JSON-Antwortstruktur

Die JSON-Antwort, die Sie von der HTTP API erhalten, hat für jede Funktion dieselbe Struktur. Die zurückgegebene Antwort enthält auf oberster Ebene die Property data. Diese Eigenschaft enthält ein Array aller übereinstimmenden Elemente. Dies ist keine vollständige Liste aller Felder, die in der JSON-Antwort verfügbar sind. Hier sind einige nützliche Felder für die Baseline:

• baseline: Enthält allgemeine Informationen zum Referenzstatus eines bestimmten Elements mit den folgenden Unterfeldern:
  • status: Der Status der Baseline für ein Feature. Werte können limited, newly oder widely sein. Hinweis:Dies ist das einzige Unterfeld, wenn status den Wert limited hat.
  • low_date: Das Datum, an dem das betreffende Feature als neue Baseline verfügbar wurde. Dieses Feld wird nur angezeigt, wenn status entweder newly oder widely ist.
  • high_date: Das Datum, an dem das betreffende Feature allgemein verfügbar wurde. Dieses Feld ist nur verfügbar, wenn status den Wert widely hat.
• feature_id: Die ID des Features. Für das CSS-Raster wäre das beispielsweise der Wert "grid".
• name: Der formatierte Name der Funktion. Dieser Wert kann in einigen Fällen mit feature_id übereinstimmen, ist aber in der Regel anders. Angenommen, der Wert für feature_id für Promise.try() ist "promise-try", während das Feld name für dieselbe Funktion "Promise.try()" enthält.
• spec: Dieses Feld enthält ein Unterfeld namens links, das ein Array von Links zu Spezifikationen und anderen Ressourcen ist.

Es gibt noch weitere Felder, die oft Informationen dazu enthalten, wann und in welcher Version bestimmte unterstützte Browser die Funktion implementiert haben, Daten zu Webplattformtests und andere Informationen, die für Sie möglicherweise interessant sind.

Beispielabfragen

Nachdem Sie nun eine kurze Erklärung einiger der verfügbaren Abfrageparameter erhalten haben, sehen Sie sich einige Beispielabfragen an, die Sie in Ihren Tools und Scripts verwenden können, um Webstatusfunktionen auszuwählen, die für Ihren Workflow nützlich sein könnten.

Daten für ein einzelnes Element abrufen

Eine gute Möglichkeit, sich mit der API vertraut zu machen, ist ein einfaches Beispiel, bei dem Daten für eine einzelne Webfunktion abgerufen werden.

// 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 diesem Fall geben wir einen id-Parameter mit dem Wert grid an, um Informationen zur Featureunterstützung für das CSS-Raster zu erhalten, das in der Baseline weit verbreitet ist. Sie können diese Informationen beispielsweise verwenden, um die Nutzung der Funktion zu erkennen und Nutzer darüber zu informieren, dass sie sie in allen modernen Browser-Engines verwenden können, ohne sich um den Support kümmern zu müssen.

Das ist aber erst der Anfang. Die HTTP API kann noch viel mehr für Sie tun, als nur Daten für eine einzelne Funktion abzurufen.

Alle neuen und weithin verfügbaren Baseline-Funktionen erhalten

Angenommen, Sie möchten ein Script haben, das alle Funktionen abruft, die entweder als „Neu in der Baseline“ oder „Weitgehend verfügbar“ gekennzeichnet sind. Das kann beispielsweise nützlich sein, wenn Sie ein Script haben, das in einem bestimmten Intervall ausgeführt wird, und eine aktualisierte Liste erhalten möchten, die sich ändert, wenn Funktionen von der eingeschränkten Verfügbarkeit in den Status „Baseline“ übergehen:

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

Mit dieser Abfrage werden nicht alle Baseline-Funktionen für neu und weithin verfügbare Funktionen zurückgegeben, sondern nur die ersten 100. Wenn die Anzahl der abgerufenen Elemente diese Zahl überschreitet, gibt es auf der obersten Ebene der JSON-Antwort ein Feld metadata, das bis zu zwei untergeordnete Felder enthalten kann:

• next_page_token: Ein String mit einem Token, das du dem Abfragestring der GET-Anfrage an das Backend hinzufügen kannst. Wenn du ihn verwendest und Daten noch einmal aus dem Webstatus.dev-Backend abfragst, wird der nächste Batch mit übereinstimmenden Funktionen zurückgegeben. Hinweis:Dieses Feld ist nicht verfügbar, wenn die aktuelle Abfrage weniger als 100 Ergebnisse zurückgibt oder sich die aktuelle Abfrage am Ende des Ergebnissatzes befindet.
• total: Eine Ganzzahl, die die Gesamtzahl der für die aktuelle Abfrage verfügbaren Features angibt.

Diese Felder sind für die Paginierung nützlich. Mit ihnen können wir den folgenden Code ausprobieren, um alle Ergebnisse für eine Abfrage abzurufen, die eine große Menge an Daten zurückgibt:

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

Alle neu verfügbaren CSS-Funktionen von Baseline abrufen

Angenommen, Sie sind Entwickler mit Schwerpunkt auf CSS und möchten wissen, welche CSS-Funktionen zu den neuen Baseline-Funktionen gehören. Dies ist ein idealer Anwendungsfall für den Abfragewert group und die Verwendung des Operators AND bei Abfragen von 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);
}

Wenn Sie für group den Wert css angeben, können Sie nach allen neu verfügbaren Baseline-Funktionen suchen. Wenn Sie den Umfang auf die weit verbreiteten CSS-Funktionen der Baseline ausweiten möchten, können Sie den Ansatz aus dem letzten Codebeispiel verwenden und den Negationoperator mit einer Abfrage wie -baseline_status:limited AND group:css' verwenden.

Ein weiteres Feld, das Sie abfragen können, ist das Feld snapshot. Es ist nützlich, um JavaScript-Funktionen zu finden, die zu einer bestimmten Gruppe von ECMAScript-Funktionen gehören. Im folgenden Code wird nach allen neu verfügbaren Funktionen der Baseline gesucht, die Teil des ecmascript-2023-Snapshots sind:

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

Alle grundlegenden Funktionen innerhalb eines Zeitraums abrufen

Das Feld baseline_date kann abgefragt werden, um alle Funktionen zu finden, die innerhalb eines bestimmten Zeitraums als Baseline festgelegt wurden:

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

Im vorherigen Codebeispiel wird nach CSS-Funktionen gesucht, die irgendwann im Jahr 2022 allgemein verfügbar wurden. Mit der Abfragesyntax für baseline_date können Sie ein Start- und ein Enddatum angeben, die durch .. getrennt sind.

Fazit

Die Abfragen in diesem Leitfaden sollen Ihnen als Ausgangspunkt dienen, um zu experimentieren, wie Sie das webstatus.dev-Backend abfragen. Mit einer beliebigen Anzahl von verfügbaren Abfrageparametern sollten Sie in der Lage sein, Ergebnisse zu erhalten, die für Ihre Anwendung spezifisch sind.

Wenn Sie wissen, wie Sie die HTTP API des Web Platform Dashboards abfragen, können Sie Tools erstellen, die für Ihre Arbeit nützlich sein könnten. Außerdem erfahren Sie, ob die Funktionen, die Sie für Ihr Projekt verwenden möchten, von einer ausreichend großen Anzahl von Browsern unterstützt werden. So können Sie Webanwendungen mit modernen Browserfunktionen erstellen, die Sie sicher verwenden können. Das macht die Entwicklung viel angenehmer.