Neu in Chrome 76

Chrome 76 bietet Unterstützung für:

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

PWA-Omnibox-Installationsschaltfläche

In Chrome 76 machen wir es Nutzern einfacher, progressive Web-Apps auf dem Desktop zu installieren. Dazu fügen wir der Adressleiste, manchmal auch Omnibox genannt, eine Installationsschaltfläche hinzu.

Wenn deine Website die Kriterien für die Installierbarkeit von progressiven Web-Apps erfüllt, zeigt Chrome in der Omnibox eine Installationsschaltfläche an, die den Nutzer darauf hinweist, dass deine PWA installiert werden kann. Wenn der Nutzer auf die Installationsschaltfläche klickt, entspricht das im Wesentlichen dem Aufruf von prompt() für das beforeinstallprompt-Ereignis. Dort wird das Installationsdialogfeld angezeigt, sodass der Nutzer die PWA ganz einfach installieren kann.

Ausführliche Informationen findest du unter Installation der Adressleiste für progressive Web-Apps auf dem Desktop.


Mehr Kontrolle über die PWA-Miniinfobar

Beispiel für die Miniinfobar „Zum Startbildschirm hinzufügen“ bei AirHorner

Auf Mobilgeräten wird in Chrome die Mini-Infoleiste angezeigt, wenn ein Nutzer deine Website zum ersten Mal besucht, wenn sie die Voraussetzungen für die Installierbarkeit von progressiven Web-Apps erfüllt. Viele Nutzer haben uns mitgeteilt, dass sie das Einblenden der Mini-Infobar verhindern und stattdessen eigene Installationsangebote anbieten möchten.

Ab Chrome 76 wird die Miniinfoleiste nicht mehr angezeigt, wenn preventDefault() für das beforeinstallprompt-Ereignis aufgerufen 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 unbedingt die Benutzeroberfläche, um Nutzer darüber zu informieren, dass Ihre PWA installiert werden kann. Unter Muster für die Förderung der PWA-Installation findest du unsere empfohlenen Best Practices zum Fördern der Installation deiner progressiven 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. ob Sie die Symbole oder Farben aktualisiert oder den App-Namen geändert haben, um festzustellen, ob ein neues WebAPK erforderlich ist.

Ab Chrome 76 prüft Chrome das Manifest häufiger: täglich statt alle drei Tage. Wenn sich wichtige Eigenschaften geändert haben, fordert Chrome ein neues WebAPK an und installiert es. Dabei werden der Titel, die Symbole und andere Eigenschaften auf dem neuesten Stand.

Ausführliche Informationen findest du unter Häufigere Aktualisierung von WebAPKs.

Dunkler Modus

Viele Betriebssysteme unterstützen jetzt den dunklen Modus.

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

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

Tom findet auf web.dev den Artikel Hello Darkness, my Old. Er enthält alles, was du wissen musst, sowie Tipps zur Erstellung von Stylesheets, die sowohl einen hellen als auch einen dunklen Modus unterstützen.

…und vieles mehr

Dies sind nur einige der Änderungen in Chrome 76 für Entwickler. Und natürlich gibt es noch viel mehr.

Promise.allSettled()

Ich persönlich finde Promise.allSettled() sehr spannend. Es ähnelt Promise.all(), mit der Ausnahme, dass vor der Rückgabe gewartet wird, bis alle Versprechen erfüllt sind.

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 einfacher lesen

Blobs sind mit drei neuen Methoden einfacher zu lesen: text(), arrayBuffer() und stream(). Das bedeutet, dass wir keinen Wrapper für den Dateilesegerät mehr 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 asynchronen Zwischenablage-API

Außerdem unterstützen wir Bilder in der Asynchronous Clipboard API, sodass sich Bilder noch einfacher programmatisch kopieren und einfügen lassen.

Weitere Informationen

Hier werden nur einige der wichtigsten Highlights vorgestellt. Weitere Änderungen in Chrome 76 findest du 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 werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 77 veröffentlicht wird, melde ich mich, um Sie über die Neuheiten in Chrome zu informieren.