Neu in Chrome Version 103

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Es gibt einen neuen HTTP-Statuscode 103, der dem Browser hilft, zu entscheiden, welche Inhalte vorab geladen werden sollen, bevor die Seite überhaupt geladen wird.
  • Mit der Local Font Access API können Webanwendungen auf dem Computer des Nutzers installierte Schriftarten auflisten und verwenden.
  • AbortSignal.timeout() ist eine einfachere Möglichkeit, Zeitüberschreitungen für asynchrone APIs zu implementieren.
  • Und es gibt noch viel mehr.

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 103 gibt.

HTTP-Statuscode 103 – Early Hints

Eine Möglichkeit, die Seitenleistung zu verbessern, besteht darin, Ressourcenhinweise zu verwenden. Sie geben dem Browser „Hinweise“ dazu, was er später möglicherweise benötigt. Beispiele: Dateien vorab laden oder eine Verbindung zu einem anderen Server herstellen.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Der Browser kann diese Hinweise jedoch erst verarbeiten, wenn der Server mindestens einen Teil der Seite gesendet hat.

Stellen Sie sich vor, der Browser fordert eine Seite an, aber der Server benötigt einige Hundert Millisekunden, um sie zu generieren. Bis der Browser die Seite empfängt, wartet er einfach. Wenn der Server jedoch weiß, dass für die Seite immer eine bestimmte Gruppe von untergeordneten Ressourcen benötigt wird, z. B. eine CSS-Datei, etwas JavaScript und einige Bilder, kann er sofort mit dem neuen HTTP-Statuscode 103 „Early Hints“ antworten und den Browser auffordern, diese untergeordneten Ressourcen vorab zu laden.

Sobald der Server die Seite generiert hat, kann er sie mit der normalen HTTP 200-Antwort senden. Wenn die Seite geladen wird, hat der Browser bereits mit dem Laden der erforderlichen Ressourcen begonnen.

Da es sich um einen neuen HTTP-Statuscode handelt, müssen Sie Ihren Server aktualisieren, um ihn verwenden zu können.

Erste Schritte mit HTTP 103 Early Hints:

Local Font Access API

Schriftarten im Web waren schon immer eine Herausforderung, insbesondere für Apps, mit denen Nutzer eigene Grafiken und Designs erstellen können. Bisher konnten Web-Apps nur Webschriftarten verwenden. Es gab keine Möglichkeit, eine Liste der Schriftarten abzurufen, die der Nutzer auf seinem Computer installiert hatte. Außerdem gab es keine Möglichkeit, auf die vollständigen Schriftarttabellendaten zuzugreifen, was wichtig ist, wenn Sie einen eigenen benutzerdefinierten Text-Stack implementieren müssen.

Mit der neuen Local Font Access API können Webanwendungen die lokalen Schriftarten auf dem Gerät des Nutzers auflisten und auf die Schriftarttabellendaten zugreifen.

Wenn Sie eine Liste der auf dem Gerät installierten Schriftarten abrufen möchten, müssen Sie zuerst eine Berechtigung anfordern.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Rufen Sie dann window.queryLocalFonts() auf. Es wird ein Array mit allen Schriftarten zurückgegeben, die auf dem Gerät des Nutzers installiert sind.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Wenn Sie nur an einer Teilmenge von Schriftarten interessiert sind, können Sie sie filtern, indem Sie einen postscriptNames-Parameter hinzufügen.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Weitere Informationen finden Sie im Artikel Use advanced typography with local fonts von Tom auf web.dev.

Einfachere Zeitlimits mit „AbortSignal.timeout()“

In JavaScript werden AbortController und AbortSignal verwendet, um einen asynchronen Aufruf abzubrechen.

Wenn Sie beispielsweise eine fetch()-Anfrage stellen, können Sie ein AbortSignal erstellen und an fetch() übergeben. Wenn Sie die fetch() abbrechen möchten, bevor sie zurückgegeben wird, rufen Sie abort() für die Instanz von AbortSignal auf. Bisher mussten Sie den Befehl in ein setTimeout() einfügen, wenn er nach einer bestimmten Zeit abgebrochen werden sollte.

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Dank einer neuen statischen Methode timeout() in AbortSignal ist das jetzt einfacher. Es wird ein AbortSignal-Objekt zurückgegeben, das nach der angegebenen Anzahl von Millisekunden automatisch abgebrochen wird. Was früher einige Zeilen Code waren, ist jetzt nur noch eine.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() wird in Chrome 103 unterstützt und ist bereits in Firefox und Safari verfügbar.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Das Bilddateiformat avif kann jetzt über Web Share geteilt werden.
  • In Chromium wird popstate jetzt wie in Firefox unmittelbar nach URL-Änderungen ausgelöst. Die Reihenfolge der Ereignisse ist jetzt auf beiden Plattformen: popstate, dann hashchange.
  • Element.isVisible() gibt an, ob ein Element sichtbar ist oder nicht.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 103.

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 104 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.