Neu in Chrome Version 103

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Der neue HTTP 103-Statuscode hilft dem Browser bei der Entscheidung, welche Inhalte vorab geladen werden sollen, bevor die Seite überhaupt angezeigt wird.
  • Mit der Local Font Access API können Webanwendungen Schriftarten auflisten und verwenden, die auf dem Computer des Nutzers installiert sind.
  • Mit AbortSignal.timeout() können Sie Zeitüberschreitungen für asynchrone APIs einfacher implementieren.
  • Und es gibt noch viele weitere.

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 103 für Entwickler neu ist.

HTTP 103-Statuscode 103 - frühe Hinweise

Eine Möglichkeit, die Seitenleistung zu verbessern, besteht darin, Ressourcenhinweise zu verwenden. Sie geben dem Browser „Hinweise“ darauf, welche Inhalte er später möglicherweise benötigt. Beispielsweise durch Vorabladen von Dateien oder durch eine Verbindung zu einem anderen Server.

<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 berücksichtigen, wenn der Server mindestens einen Teil der Seite gesendet hat.

Angenommen, 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 Unterressourcen 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 Unterressourcen vorab zu laden.

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

Da es sich um einen neuen HTTP-Statuscode handelt, sind für die Verwendung Aktualisierungen an Ihrem Server erforderlich.

Erste Schritte mit HTTP 103

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 Daten der Schrifttabelle zuzugreifen. Das ist aber wichtig, wenn Sie Ihren eigenen benutzerdefinierten Textstapel implementieren möchten.

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

Wenn Sie eine Liste der auf dem Gerät installierten Schriftarten abrufen möchten, müssen Sie zuerst die 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. Er gibt ein Array aller Schriftarten zurück, 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 der 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 Erweiterte Typografie mit lokalen Schriftarten verwenden 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 eine AbortSignal erstellen und an fetch() übergeben. Wenn Sie die fetch() abbrechen möchten, bevor sie zurückgegeben wird, rufen Sie abort() auf der Instanz der AbortSignal auf. Bisher mussten Sie ein Script, das nach einer bestimmten Zeit abgebrochen werden sollte, in setTimeout() einschließen.

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

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

Zum Glück ist dies jetzt mit der neuen statischen Methode timeout() für AbortSignal einfacher geworden. Es gibt ein AbortSignal-Objekt zurück, das nach der angegebenen Anzahl von Millisekunden automatisch abgebrochen wird. Was früher ein paar Codezeilen 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 freigegeben werden
  • Chromium gleicht jetzt Firefox an, indem popstate sofort nach URL-Änderungen ausgelöst wird. Die Reihenfolge der Ereignisse ist jetzt auf beiden Plattformen: popstate und dann hashchange.
  • Element.isVisible() gibt an, ob ein Element sichtbar ist oder nicht.

Weitere Informationen

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

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 104 veröffentlicht ist, melde ich mich, um Ihnen die neuen Funktionen von Chrome mitzuteilen.