Neu in Chrome 76

Pete LePage

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

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 machen wir es Nutzern leichter, progressive Web-Apps auf dem Desktop zu installieren. Dazu fügen wir der Adressleiste, manchmal auch Omnibox genannt, eine Installationsschaltfläche hinzu.

Wenn Ihre Website die Kriterien für die Installation progressiver Web-Apps erfüllt, wird in Chrome in der Omnibox eine Schaltfläche „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.

Weitere Informationen finden Sie unter Adressleiste installieren für progressive Web-Apps auf dem Desktop.


Mehr Kontrolle über die PWA-Miniinfoleiste

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

Auf Mobilgeräten wird in Chrome die Mini-Infoleiste angezeigt, wenn ein Nutzer deine Website zum ersten Mal aufruft, sofern sie die Kriterien für die Installierbarkeit progressiver 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 und nicht mehr alle drei Tage überprüft. Wenn sich eine der Haupteigenschaften geändert hat, fordert Chrome ein neues WebAPK an und installiert es. Dadurch werden Titel, Symbole und andere Eigenschaften auf dem neuesten Stand.

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).

Das Lesen von Blobs ist einfacher

Blobs 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.

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 gleich, was es Neues bei Chrome gibt.