Neu in Chrome 63

Pete LePage

Und es gibt noch viel mehr!

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

Möchten Sie die vollständige Liste der Änderungen sehen? Liste der Änderungen im Chromium-Quell-Repository

Dynamische Modulimporte

Das Importieren von JavaScript-Modulen ist sehr praktisch, aber statisch. Sie können Module nicht basierend auf Laufzeitbedingungen importieren.

In Chrome 63 ändert sich das zum Glück mit der neuen Syntax für dynamische Importe. Damit können Sie Code zur Laufzeit dynamisch in Module und Skripts laden. Damit lässt sich ein Script nur bei Bedarf verzögert laden, was die Leistung Ihrer Anwendung verbessert.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Anstatt Ihre gesamte Anwendung zu laden, wenn der Nutzer Ihre Seite zum ersten Mal aufruft, können Sie die Ressourcen abrufen, die für die Anmeldung erforderlich sind. Die erste Ladung ist klein und blitzschnell. Laden Sie dann den Rest, sobald sich der Nutzer anmeldet.

Asynchrone Iteratoren und Generatoren

Code zu schreiben, der eine Art von Iteration mit async-Funktionen durchführt, kann schwierig sein. Tatsächlich ist es der Kern meiner Lieblingsfrage für Programmierer im Vorstellungsgespräch.

Mit asynchronen Generatorfunktionen und dem asynchronen Iterations-Protokoll wird die Nutzung oder Implementierung von Streaming-Datenquellen vereinfacht und meine Programmierfrage wird viel einfacher.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Asynchrone Iteratoren können in for-of-Schleifen verwendet werden. Außerdem können Sie mit asynchronen Iterator-Factories eigene benutzerdefinierte asynchrone Iteratoren erstellen.

Overscroll-Verhalten

Scrollen ist eine der grundlegendsten Möglichkeiten, mit einer Seite zu interagieren. Bestimmte Muster können jedoch schwierig zu handhaben sein. Ein Beispiel ist die Funktion Zum Aktualisieren nach unten ziehen in Browsern. Dabei wird durch Wischen nach unten am oberen Seitenrand ein Hard-Reload ausgelöst.

Vorher mit Aktualisierung der gesamten Seite.

Aktualisieren Sie danach nur den Inhalt.

In einigen Fällen kann es sinnvoll sein, dieses Verhalten zu überschreiben und eine eigene Benutzeroberfläche zu erstellen. Genau das macht die progressive Web-App von Twitter: Wenn Sie nach unten ziehen, wird nicht die gesamte Seite neu geladen, sondern es werden einfach neue Tweets zur aktuellen Ansicht hinzugefügt.

Chrome 63 unterstützt jetzt die CSS-Eigenschaft overscroll-behavior. Dadurch lässt sich das standardmäßige Scrollverhalten des Browsers bei Überlauf ganz einfach überschreiben.

Mit ihrer Hilfe können Sie Folgendes tun:

Und das Beste: overscroll-behavior hat keine negativen Auswirkungen auf die Leistung Ihrer Seite.

Änderungen an der Berechtigungs-UI

Ich mag Web-Push-Benachrichtigungen, aber ich bin wirklich frustriert von der Anzahl der Websites, die beim Laden der Seite ohne Kontext um Erlaubnis bitten – und ich bin nicht allein.

90% aller Berechtigungsanfragen werden ignoriert oder vorübergehend blockiert.

In Chrome 59 haben wir begonnen, dieses Problem zu beheben, indem wir eine Berechtigung vorübergehend blockiert haben, wenn der Nutzer die Anfrage dreimal abgelehnt hat. Ab M63 werden Berechtigungsanfragen in Chrome für Android als modale Dialogfelder angezeigt.

Das gilt nicht nur für Push-Benachrichtigungen, sondern für alle Berechtigungsanfragen. Wenn Sie Berechtigungen zum richtigen Zeitpunkt und im richtigen Kontext anfordern, sind Nutzer zweieinhalb Mal so wahrscheinlich bereit, sie zu erteilen.

…und vieles mehr

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

  • finally ist jetzt für Promise-Instanzen verfügbar und wird aufgerufen, nachdem eine Promise erfüllt oder abgelehnt wurde.
  • Mit der neuen Device Memory JavaScript API können Sie Leistungsbeschränkungen besser nachvollziehen, da Sie Hinweise zum gesamten RAM auf dem Gerät des Nutzers erhalten. Sie können die Nutzererfahrung zur Laufzeit anpassen, um die Komplexität auf Low-End-Geräten zu verringern und Nutzern eine bessere Erfahrung mit weniger Frustration zu bieten.
  • Mit der Intl.PluralRules API können Sie Anwendungen erstellen, die die Pluralisierung einer bestimmten Sprache verstehen. Dazu wird angegeben, welche Pluralform für eine bestimmte Zahl und Sprache gilt. Außerdem kann sie bei Ordnungszahlen helfen.

Abonniere unseren YouTube-Kanal, um eine E-Mail-Benachrichtigung zu erhalten, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 64 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.