In Chrome 76 wurde Unterstützung für Folgendes hinzugefügt:
prefers-color-scheme
-Medienabfrage, mit der Websites den dunklen Modus unterstützen können.- Eine Schaltfläche „Installieren“ in der Omnibox, die die Installation von progressiven Web-Apps auf dem Computer vereinfacht.
- Verhindern, dass die Mini-Infoleiste in Progressiven Web-Apps auf Mobilgeräten angezeigt wird
- Häufigere Aktualisierungen von WebAPKs
- Und vieles mehr.
Ich bin Pete LePage. Sehen wir uns an, was in Chrome 76 für Entwickler neu ist.
Schaltfläche „PWA in der Omnibox installieren“
In Chrome 76 können Nutzer Progressive Web-Apps auf dem Computer noch einfacher installieren. Dazu haben wir der Adressleiste, auch Omnibox genannt, eine Schaltfläche zum Installieren hinzugefügt.
Wenn Ihre Website die Kriterien für die Installation progressiver Web-Apps erfüllt, wird in Chrome in der Omnibox eine Schaltfläche zum Installieren angezeigt, die Nutzer darauf hinweist, dass Ihre PWA installiert werden kann. Wenn der Nutzer auf die Schaltfläche „Installieren“ klickt, ist das im Grunde dasselbe wie der Aufruf von prompt()
beim Ereignis beforeinstallprompt
. Es wird das Installationsdialogfeld angezeigt, über das der Nutzer Ihre PWA ganz einfach installieren kann.
Ausführliche Informationen finden Sie unter Adressleiste für progressive Web-Apps auf dem Computer installieren.
Mehr Kontrolle über die PWA-Miniinfoleiste

Auf Mobilgeräten wird in Chrome die Mini-Infoleiste angezeigt, wenn ein Nutzer Ihre Website zum ersten Mal besucht und sie die Kriterien für die Installierbarkeit von progressiven Web-Apps erfüllt. Sie haben uns mitgeteilt, dass Sie die Mini-Infoleiste verhindern und stattdessen ein eigenes Installationsangebot präsentieren möchten.
Ab Chrome 76 wird die Mini-Infoleiste nicht mehr angezeigt, wenn preventDefault()
für das Ereignis beforeinstallprompt
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 Ihre Benutzeroberfläche, damit Nutzer wissen, dass Ihre PWA installiert werden kann. In Musterbeispiele für die Installation von PWAs bewerben finden Sie unsere empfohlenen Best Practices für die Bewerbung der Installation Ihrer Progressiven Web-Apps.
Schnellere Updates für WebAPKs
Wenn eine progressive Webanwendung auf Android installiert wird, fordert Chrome automatisch ein Web-APK an und installiert es. Nach der Installation prüft Chrome regelmäßig, ob sich das Manifest der Web-App geändert hat, z. B. ob Sie die Symbole, Farben oder den App-Namen aktualisiert haben, um festzustellen, ob eine neue WebAPK erforderlich ist.
Ab Chrome 76 wird das Manifest häufiger geprüft – nicht mehr alle drei Tage, sondern täglich. Wenn sich eine der wichtigen Eigenschaften geändert hat, fordert Chrome eine neue WebAPK an und installiert sie, damit Titel, Symbole und andere Eigenschaften auf dem neuesten Stand sind.
Ausführliche Informationen finden Sie unter WebAPKs häufiger aktualisieren.
Dunkler Modus
Viele Betriebssysteme unterstützen jetzt einen dunklen Modus oder ein dunkles Design.
Mit der prefers-color-scheme
-Medienabfrage 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 auf web.dev mit allem, was Sie wissen müssen, sowie Tipps zur Strukturierung Ihrer Stylesheets, damit sie sowohl einen hellen als auch einen dunklen Modus unterstützen.
…und vieles mehr
Das sind nur einige der Änderungen in Chrome 76 für Entwickler. Es gibt natürlich noch viele weitere.
Promise.allSettled()
Ich persönlich freue mich sehr auf Promise.allSettled()
. Sie ähnelt Promise.all()
, wartet aber, bis alle Versprechen erfüllt 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 jetzt leichter lesen
Blob
s lassen sich mit drei neuen Methoden leichter lesen: text()
, arrayBuffer()
und stream()
. Das bedeutet, dass wir keinen Wrapper mehr um den Dateileser herum 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 die Asynchrone Zwischenablage API um die Unterstützung von Bildern erweitert. So können Bilder jetzt ganz einfach programmatisch kopiert und eingefügt werden.
Weitere Informationen
Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 76.
- Das ist neu in den Chrome-Entwicklertools (Version 76)
- Einstellung und Entfernung von Funktionen in Chrome 76
- Aktualisierungen von ChromeStatus.com für Chrome 76
- Neuerungen bei JavaScript in Chrome 76
- Liste der Änderungen am Chromium-Quellcode-Repository
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, sobald wir ein neues Video veröffentlichen.
Ich bin Pete LePage. Sobald Chrome 77 veröffentlicht wird, erzähle ich Ihnen gern, was es Neues in Chrome gibt.