Neu in Chrome 85

Pete LePage

Chrome 85 wird jetzt in der stabilen Version eingeführt.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was es Neues für Entwickler in Chrome 85 gibt.

Sichtbarkeit von Inhalten

Rendering-Prozess von Browsern

Damit der Nutzer Ihr HTML sehen kann, muss der Browser eine Reihe von Schritten durchlaufen, bevor er überhaupt das erste Pixel rendern kann. Das geschieht für die gesamte Seite, auch für Inhalte, die nicht im Darstellungsbereich sichtbar sind.

Wenn Sie content-visibility: auto auf ein Element anwenden, wird dem Browser mitgeteilt, dass er die Rendering-Arbeit für dieses Element überspringen kann, bis es in den sichtbaren Bereich gescrollt wird. So wird das anfängliche Rendern beschleunigt.


.my-class {
  content-visibility: auto;
}

Damit content-visibility optimal wirkt, sollten Sie es auf übergeordnete Abschnitte mit komplexeren Layoutalgorithmen wie flexbox und grid anwenden oder auf Abschnitte, die untergeordnete Elemente mit eigenen enthaltenen Layouts haben.

Durch das Unterteilen von Inhalten und das Hinzufügen von content-visibility: auto; konnte die Rendering-Zeit dieser Seite von 232 ms auf nur 30 ms reduziert werden.

Hier findest du Informationen dazu, wie du die Sichtbarkeit von Inhalten nutzen kannst, um die Rendering-Leistung zu verbessern.

@property und CSS-Variablen

CSS-Variablen, die technisch als benutzerdefinierte Eigenschaften bezeichnet werden, sind großartig. Mit der Houdini CSS Properties and Values API können Sie einen Typ und einen Standard-Fallbackwert für Ihre benutzerdefinierten Eigenschaften definieren. Ich habe sie bereits in Neu in Chrome 78 behandelt, als wir die Unterstützung für die Definition in JavaScript hinzugefügt haben.

Ab Chrome 85 können Sie CSS-Eigenschaften auch direkt in Ihrem CSS definieren und festlegen. Was ich an CSS-Properties mag, ist, dass sie der Property eine semantische Bedeutung und Fallback-Werte geben und sogar CSS-Tests ermöglichen.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una hat einen tollen Beitrag @property: giving superpowers to CSS variables veröffentlicht, in dem sie erklärt, wie Sie sie verwenden können.

Installierte ähnliche Apps abrufen

Mit der getInstalledRelatedApps() API können Sie prüfen, ob Ihre App installiert ist, und dann die Nutzererfahrung anpassen.

Sie können Nutzern auf einer Landingpage beispielsweise unterschiedliche Inhalte präsentieren, je nachdem, ob Ihre App bereits installiert ist. Zentralisieren Sie sich überschneidende Funktionen in einer App, um Verwirrung zu vermeiden. Wenn Ihre native App bereits installiert ist, sollten Sie die Installation Ihrer PWA nicht bewerben.

Als die Funktion in Chrome 80 eingeführt wurde, funktionierte sie nur für Android-Apps. Unter Android kann jetzt auch geprüft werden, ob Ihre PWA installiert ist. Unter Windows kann geprüft werden, ob Ihre Windows-UWP-App installiert ist.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

In meinem Artikel Ist Ihre App installiert? getInstalledRelatedApps() gibt dir Auskunft. Auf web.dev erfährst du, wie es funktioniert und wie du deine Apps signierst, um zu beweisen, dass sie dir gehören.

App-Symbol-Verknüpfungen

App-Symbolverknüpfung unter Windows

In Chrome 84 haben wir die Unterstützung für App-Symbol-Verknüpfungen hinzugefügt. Ich habe versehentlich gesagt, dass sie überall verfügbar sind, aber sie waren nur auf Android-Geräten verfügbar. In Chrome 85 sind sie jetzt für Android und Windows sowie in Chrome und Edge verfügbar.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Weitere Informationen finden Sie im Artikel App Icon Shortcuts auf web.dev. Entschuldigen Sie die Verwirrung.

Origin Trial: Streaminganfragen mit fetch()

Ab Chrome 85 ist das fetch-Upload-Streaming als Origin-Trial verfügbar. Damit können Sie einen Abruf starten, bevor der Anfragetext fertig ist. Bisher konnten Sie eine Anfrage erst starten, wenn der gesamte Text fertig war. Jetzt können Sie Inhalte senden, auch wenn sie noch generiert werden.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Sie können es beispielsweise verwenden, um den Server aufzuwärmen oder Audio- oder Videodaten zu streamen, während sie vom Mikrofon oder der Kamera aufgenommen werden.

Jake hat sich in Streaming requests with the fetch API auf web.dev ausführlich damit beschäftigt und das Thema auch im neuesten Video HTTP203 - Streaming requests with fetch behandelt.

Und vieles mehr

Natürlich gibt es noch viel mehr.

Promise.any gibt ein Promise zurück, das durch das erste angegebene Promise erfüllt oder abgelehnt wird.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Mit .replaceAll() lassen sich alle Instanzen in einem String einfacher ersetzen. Reguläre Ausdrücke sind nicht mehr erforderlich.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

In Chrome 85 wird die Unterstützung für die Dekodierung von AVIF hinzugefügt. Dieses Bildformat wird mit AV1 codiert und von der Alliance for Open Media standardisiert. AVIF bietet im Vergleich zu JPEG und WebP erhebliche Kompressionsvorteile. Eine aktuelle Studie von Netflix ergab Einsparungen von 50% im Vergleich zu Standard-JPEG und von über 60% bei 4:4:4-Inhalten.

Die Entfernung von AppCache hat begonnen.

Weitere Informationen

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

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und ich habe mir endlich die Haare schneiden lassen.

Sobald Chrome 86 veröffentlicht wird, erfährst du hier, was es Neues in Chrome gibt.