Neu in Chrome 76

Pete LePage

In Chrome 76 haben wir Unterstützung für Folgendes hinzugefügt:

Ich bin Pete LePage und möchte euch zeigen, was es Neues für Entwickler in Chrome 76 gibt.

Omnibox-Installationsschaltfläche für PWAs

In Chrome 76 haben wir es Nutzern einfacher gemacht, progressive Web-Apps auf dem Computer zu installieren. Dazu haben wir der Adressleiste, die manchmal auch als Omnibox bezeichnet wird, eine Schaltfläche zum Installieren hinzugefügt.

Wenn Ihre Website die Kriterien für die Installierbarkeit von progressiven Web-Apps erfüllt, wird in Chrome in der Omnibox eine Schaltfläche „Installieren“ angezeigt, die den Nutzer darauf hinweist, dass Ihre PWA installiert werden kann. Wenn der Nutzer auf die Schaltfläche „Installieren“ klickt, ist das im Grunde dasselbe, als würde prompt() für das beforeinstallprompt-Ereignis aufgerufen. Das Installationsdialogfeld wird angezeigt und der Nutzer kann Ihre PWA ganz einfach installieren.

Weitere Informationen


Mehr Kontrolle über die Mini-Infoleiste für PWAs

Beispiel für die Mini-Infoleiste „Zum Startbildschirm hinzufügen“ für AirHorner

Auf Mobilgeräten zeigt Chrome die Mini-Infoleiste an, wenn ein Nutzer Ihre Website zum ersten Mal besucht und sie die Kriterien für die Installierbarkeit von progressiven Web-Apps erfüllt. Wir haben von Ihnen gehört, dass Sie die Mini-Infoleiste deaktivieren und stattdessen ein eigenes Installationsangebot einblenden möchten.

Ab Chrome 76 wird durch den Aufruf von preventDefault() für das beforeinstallprompt-Ereignis verhindert, dass die Mini-Infoleiste angezeigt wird.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Aktualisieren Sie die Benutzeroberfläche, damit Nutzer wissen, dass Ihre PWA installiert werden kann. Unter Patterns for Promoting PWA Installation finden Sie unsere empfohlenen Best Practices für die Förderung der Installation Ihrer Progressive Web-Apps.

Schnellere Updates für WebAPKs

Wenn eine progressive Web-App unter Android installiert wird, fordert Chrome automatisch ein Web-APK an und installiert es. Nach der Installation prüft Chrome regelmäßig, ob sich das Web-App-Manifest geändert hat, z. B. wenn Sie die Symbole oder Farben aktualisiert oder den App-Namen geändert haben, um festzustellen, ob ein neues WebAPK erforderlich ist.

Ab Chrome 76 wird das Manifest häufiger geprüft, nämlich täglich statt alle drei Tage. Wenn sich eine der wichtigsten Eigenschaften geändert hat, fordert Chrome ein neues WebAPK an und installiert es, damit Titel, Symbole und andere Eigenschaften auf dem neuesten Stand sind.

Weitere Informationen

Dunkler Modus

Viele Betriebssysteme unterstützen jetzt einen dunklen Modus oder ein dunkles Design.

Mit der Media-Query prefers-color-scheme können Sie das Erscheinungsbild Ihrer Website an den bevorzugten Modus des Nutzers anpassen.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom hat einen tollen Artikel Hello darkness, my old friend (Hallo Dunkelheit, mein alter Freund) auf web.dev geschrieben, in dem er alles erklärt, was Sie wissen müssen. Außerdem gibt er Tipps für die Gestaltung Ihrer Stylesheets, damit sowohl ein heller als auch ein dunkler Modus unterstützt werden.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 76 für Entwickler.

Promise.allSettled()

Ich persönlich freue mich sehr auf Promise.allSettled(). Sie ähnelt Promise.all(), wartet aber, bis alle Promises abgeschlossen sind, bevor sie zurückgegeben wird.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Blobs lassen sich leichter lesen

Blobs sind mit drei neuen Methoden einfacher zu lesen: text(), arrayBuffer() und stream(). Das bedeutet, dass wir keinen Wrapper mehr für den Dateireader erstellen müssen.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Bildunterstützung in der Async Clipboard API

Außerdem haben wir Unterstützung für Bilder in der asynchronen Zwischenablage-API hinzugefügt, sodass sich Bilder ganz einfach programmatisch kopieren und einfügen lassen.

Weitere Informationen

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

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 sobald Chrome 77 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.