Neu in Chrome Version 103

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Es gibt einen neuen HTTP 103-Statuscode, mit dem der Browser entscheiden kann, welcher Inhalt vorab geladen werden soll, bevor die Seite überhaupt angezeigt wird.
  • Mit der Local Font Access API können Webanwendungen auf dem Computer des Nutzers installierte Schriftarten auflisten und verwenden.
  • Mit AbortSignal.timeout() lassen sich Zeitüberschreitungen in asynchronen APIs einfacher implementieren.
  • Und es gibt viele weitere.

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es bei Chrome 103 Neues gibt.

HTTP 103-Statuscode 103 – Frühzeitige Hinweise

Eine Möglichkeit, die Seitenleistung zu verbessern, sind Ressourcenhinweise. Sie geben dem Browser „Hinweise“ darüber, was er später braucht. Dazu gehören z. B. das Vorabladen von Dateien oder das Herstellen einer 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 auf diese Hinweise jedoch erst reagieren, wenn der Server mindestens einen Teil der Seite sendet.

Angenommen, der Browser fordert eine Seite an, der Server benötigt aber einige hundert Millisekunden, um sie zu generieren. Bis der Browser die Seite empfängt, steht sie im Wartezustand. Wenn der Server jedoch weiß, dass die Seite immer bestimmte Unterressourcen benötigt, z. B. eine CSS-Datei, etwas JavaScript und einige Bilder, kann er sofort mit dem neuen Statuscode HTTP 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-Antwort 200 senden. Sobald die Seite eingeht, hat der Browser bereits damit begonnen, die erforderlichen Ressourcen zu laden.

Da es sich um einen neuen HTTP-Statuscode handelt, sind Aktualisierungen auf Ihrem Server erforderlich.

Erste Schritte mit HTTP 103 – Erste Hinweise:

Lokale Font Access-API

Schriftarten im Web waren schon immer eine Herausforderung, besonders für Apps, in 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 hat. Außerdem gab es keine Möglichkeit, auf die vollständigen Daten in der Schriftarttabelle zuzugreifen, was entscheidend ist, wenn Sie Ihren 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 Daten der Schriftartentabelle zugreifen.

Wenn Sie eine Liste der auf dem Gerät installierten Schriftarten abrufen möchten, müssen Sie zuerst die entsprechende 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. Sie 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 einem Teil der Schriftarten interessiert sind, können Sie diese filtern, indem Sie den Parameter postscriptNames hinzufügen.

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

Weitere Informationen finden Sie in Toms Artikel Use advanced typography with local fonts (Erweiterte Typografie mit lokalen Schriftarten verwenden) auf web.dev.

Vereinfachte Zeitüberschreitungen mit AbortSignal.timeout()

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

Für eine fetch()-Anfrage können Sie beispielsweise eine AbortSignal erstellen und an fetch() übergeben. Wenn Sie fetch() abbrechen möchten, bevor es zurückgegeben wird, rufen Sie abort() für die Instanz von AbortSignal auf. Wenn Sie möchten, dass der Vorgang nach einer bestimmten Zeit abgebrochen wird, mussten Sie ihn bisher in eine setTimeout() einbinden.

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 das mit der neuen statischen timeout()-Methode für AbortSignal jetzt noch einfacher geworden. Sie gibt ein AbortSignal-Objekt zurück, das nach der angegebenen Anzahl von Millisekunden automatisch abgebrochen wird. Was früher nur ein paar Zeilen Code war, 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
  • Chromium gleicht jetzt Firefox ab, indem popstate sofort nach URL-Änderungen ausgelöst wird. Die Ereignisse sind auf beiden Plattformen jetzt in der Reihenfolge popstate, dann hashchange.
  • Und Element.isVisible() gibt an, ob ein Element sichtbar ist oder nicht.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 103 finden Sie unter den folgenden Links.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 104 veröffentlicht ist, melde ich Ihnen, was es bei Chrome Neues gibt.