Web Platform Dashboard nach Tools für Baselines abfragen

Jeremy Wagner

Veröffentlicht: 4. März 2025

Baseline wurde vom Chrome-Team entwickelt und wird jetzt von der WebDX Community Group definiert. Baseline sorgt für Klarheit bei Funktionen, die zwischen Browsern interoperabel sind. Sie soll Ihnen helfen, herauszufinden, welche Funktionen Sie in den wichtigsten Browser-Engines verwenden können und welche nicht. Sie müssen jedoch wissen, welche Funktionen das sind.

Glücklicherweise können Sie mit dem Web Platform Dashboard, das auf dem web-features-npm-Paket basiert, abfragen, welche Funktionen neu oder weitgehend verfügbar sind. Sie können auch über die HTTP API auf diese Informationen zugreifen, um Baseline-Daten in Ihren Tooling-Workflow einzubinden. In diesem Leitfaden wird beschrieben, wie das geht.

Relevante Baseline-Abfragesyntax des Web Platform Dashboards

Im Webplattform-Dashboard wird eine bestimmte Abfragesyntax verwendet, mit der Sie nach Unterstützung für Webfunktionen suchen können. Sie können diese Abfragesyntax direkt im Dashboard verwenden.

Wenn Sie in das Suchfeld oben auf der Seite tippen, werden Ihnen eine Reihe von Suchparametern angezeigt, mit denen Sie Webfunktionen filtern können.

Die Abfragesyntax ist ausdrucksstark und bietet Ihnen viel Flexibilität beim Filtern der Webfunktionen, die im Dashboard angezeigt werden. Der folgende Screenshot zeigt, wie der Abfrageparameter id verwendet werden kann, um die Suche auf eine bestimmte Funktion einzugrenzen:

Die Abfragesyntax ist dokumentiert. Es ist jedoch nicht erforderlich, sie vollständig zu kennen, um Baseline-Daten für Funktionen zu finden. Sie können alle diese 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 von Browsern unterstützt werden. Wenn Sie nach diesem Wert filtern, erhalten Sie nur Funktionen, die noch keinen Baseline-Status erreicht haben.
  • newly: Gibt Features zurück, die neu in der Baseline verfügbar sind.
  • widely: Gibt Funktionen zurück, die weitgehend verfügbar sind und seit mindestens 30 Monaten als Baseline gelten. Diese Funktionen können Sie verwenden, ohne sich Gedanken über die Browserunterstützung oder Polyfills machen zu müssen.
• baseline_date: Gibt mit dem YYYY-MM-DD..YYYY-MM-DD-Format eine Ober- und Untergrenze dafür an, wann Funktionen die Baseline erreicht haben. 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 Feature. Diese Kennungen sind im Paket web-features definiert. Der Merkmalseintrag für Promise.try() wird beispielsweise der ID promise-try zugeordnet.
• group: Einer der vielen aufgezählten Gruppennamen für Funktionen. Das ist nützlich, wenn Sie nur eine bestimmte Teilmenge von Webplattformfunktionen abfragen möchten. Sie können beispielsweise nach einer Liste von CSS-Funktionen mit dem Wert css filtern.

Das Dashboard-Frontend ist zwar nützlich, basiert aber auf einer HTTP-API, die Sie direkt abfragen können. Hier finden Sie ein Beispiel für einen Endpunkt, mit dem alle Baseline-Funktionen abgerufen werden, die neu verfügbar sind:

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

Die JSON-Antwortstruktur

Die JSON-Antwort, die Sie von der HTTP API erhalten, hat für jede Funktion eine einheitliche Form. Die zurückgegebene Antwort enthält das Attribut data auf der obersten Ebene. Diese Eigenschaft enthält ein Array mit allen übereinstimmenden Funktionen. Dies ist zwar keine vollständige Liste aller Felder, die in der JSON-Antwort verfügbar sind, aber hier sind einige nützliche Felder für Baseline:

• baseline: Enthält allgemeine Informationen zum Baseline-Status eines bestimmten Features mit den folgenden Unterfeldern:
  • status: Der Baseline-Status 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 angegebene Feature als „Baseline Newly available“ (Neu verfügbar) gekennzeichnet wurde. Dieses Feld wird nur angezeigt, wenn status entweder newly oder widely ist.
  • high_date: Das Datum, an dem das angegebene Feature allgemein verfügbar wurde. Dieses Feld ist nur verfügbar, wenn status widely ist.
• feature_id: Die ID für das Feature. Für das CSS-Raster wäre das beispielsweise der Wert "grid".
• name: Der formatierte Name des Features. Das kann in einigen Fällen ähnlich wie feature_id sein, ist aber in der Regel anders. Der feature_id-Wert für Promise.try() ist beispielsweise "promise-try", während das Feld name für dieselbe Funktion "Promise.try()" ist.
• spec: Dieses Feld enthält ein Unterfeld namens links, das ein Array von Links zu Spezifikationen und anderen Ressourcen ist.

Es gibt weitere Felder, die oft Informationen darüber enthalten, wann bestimmte unterstützende Browser die Funktion in welcher Version implementiert haben, Daten zu Web Platform Tests und andere Dinge, die Sie möglicherweise interessieren.

Beispielabfragen

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

Daten für ein einzelnes Feature abrufen

Am besten machen Sie sich mit der API vertraut, indem Sie mit einem einfachen Beispiel beginnen, in dem Daten für ein einzelnes Web-Feature 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 Unterstützung von CSS-Grid zu erhalten, das weitgehend verfügbar 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 die Unterstützung sorgen zu müssen.

Das ist jedoch erst der Anfang. Die HTTP API kann viel mehr als nur Daten für eine einzelne Funktion abrufen.

Alle neuen und weit verbreiteten Baseline-Funktionen erhalten

Angenommen, Sie möchten ein Skript, das alle Funktionen abruft, die entweder neu in der Baseline oder weitgehend verfügbar sind. Das kann beispielsweise nützlich sein, wenn Sie ein Skript haben, das in einem bestimmten Intervall ausgeführt wird, und Sie eine aktualisierte Liste erhalten möchten, die sich ändert, wenn Funktionen von der begrenzten Verfügbarkeit zum Baseline-Status wechseln:

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 neuen und weit verbreiteten Baseline-Funktionen abgerufen, sondern nur die ersten 100. Wenn die Anzahl der abgerufenen Funktionen diesen Wert überschreitet, gibt es auf der obersten Ebene der JSON-Antwort ein metadata-Feld, das bis zu zwei Unterfelder enthalten kann:

• next_page_token: Ein String mit einem Token, das Sie dem Abfragestring der GET-Anfrage an das Backend hinzufügen können. Wenn Sie sie verwenden und Daten aus dem Webstatus.dev-Backend noch einmal abrufen, wird die nächste Gruppe übereinstimmender Funktionen zurückgegeben. Hinweis:Dieses Feld ist nicht verfügbar, wenn die aktuelle Abfrage weniger als 100 Ergebnisse zurückgibt oder wenn die aktuelle Abfrage am Ende des Ergebnissatzes steht.
• total: Eine Ganzzahl, die die Gesamtzahl der für die aktuelle Abfrage verfügbaren Funktionen 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 Baseline-CSS-Funktionen

Angenommen, Sie sind ein Entwickler mit besonderem Fokus auf CSS und möchten wissen, welche CSS-Funktionen zu „Baseline Newly available features“ werden. Hier sehen Sie ein perfektes Beispiel für die Verwendung des Abfragewerts group und des Operators AND beim 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 alle neuen Baseline-Funktionen abfragen. Wenn Sie den Umfang auf die weitgehend verfügbaren Baseline-CSS-Funktionen ausweiten möchten, können Sie den Ansatz aus dem letzten Codebeispiel verwenden und den Negationsoperator 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 Teil einer bestimmten Gruppe von ECMAScript-Funktionen sind. Mit dem folgenden Code wird geprüft, ob alle neuen Baseline-Funktionen, die Teil des ecmascript-2023-Snapshots sind, verfügbar 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 Baseline-Funktionen in einem Zeitraum abrufen

Mit dem Feld baseline_date können Sie alle Funktionen abfragen, die in einem bestimmten Zeitraum zur Baseline 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);
}

Mit dem vorherigen Codebeispiel werden CSS-Funktionen abgefragt, die im Jahr 2022 zu einem beliebigen Zeitpunkt allgemein verfügbar waren. Mit der Abfragesyntax für baseline_date können Sie ein Anfangs- und ein Enddatum angeben, die durch .. getrennt sind.

Fazit

Die Abfragen in dieser Anleitung sollen Ihnen als Ausgangspunkt dienen, um zu testen, wie Sie das webstatus.dev-Backend abfragen können. Mit einer beliebigen Anzahl verfügbarer Suchparameter sollten Sie Ergebnisse erhalten, die speziell auf Ihre Anwendung zugeschnitten sind.

Wenn Sie wissen, wie Sie die HTTP API des Web Platform Dashboard abfragen, können Sie Tools erstellen, die für Ihre Arbeit nützlich sein könnten, und sich darüber informieren, ob die Funktionen, die Sie für Ihr Projekt verwenden möchten, eine ausreichende Browserunterstützung haben. Das bedeutet, dass Sie Webanwendungen mit modernen Browserfunktionen erstellen können, die Sie bedenkenlos verwenden können. So wird die Entwicklung für Sie viel angenehmer.