Neu in Chrome 63

Das sind noch reichlich mehr!

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es für Entwickler bei Chrome 63 Neues gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Weitere Informationen finden Sie in der Änderungsliste des Chromium-Quell-Repositorys.

Dynamische Modulimporte

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

Glücklicherweise ändert sich das in Chrome 63 mit der neuen dynamischen Importsyntax. Damit können Sie zur Laufzeit Code dynamisch in Module und Skripts laden. Damit lässt sich ein Skript nur bei Bedarf per Lazy Loading laden, um die Leistung Ihrer Anwendung zu verbessern.

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

Anstatt Ihre gesamte Anwendung zu laden, wenn der Nutzer zum ersten Mal Ihre Seite aufruft, können Sie die Ressourcen abrufen, die Sie für die Anmeldung benötigen. Die anfängliche Ladung ist klein und schreit schnell. Sobald sich der Nutzer angemeldet hat, laden Sie den Rest, und schon kann es losgehen.

Asynchrone Iterationen und Generatoren

Das Schreiben von Code für Iterationen mit async-Funktionen kann hässlich sein. Es ist sogar der Kernteil meiner Lieblingsfrage zum Programmieren für Vorstellungsgespräche.

Mit den async generator functions und dem Protokoll für asynchrone Iterationen wird die Verbrauch bzw. Implementierung von Streaming-Datenquellen optimiert und meine Codierungsfrage 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 Iterationen können in for-of-Schleifen und auch zum Erstellen Ihrer eigenen benutzerdefinierten asynchronen Iterationen über asynchrone Iterations-Factorys verwendet werden.

Over-Scroll-Verhalten

Scrollen gehört zu den grundlegendsten Interaktionen mit einer Seite. Bestimmte Muster können jedoch schwierig zu handhaben sein. Das ist beispielsweise bei der Browser-Funktion Zum Aktualisieren ziehen der Fall, bei der der Nutzer am oberen Rand der Seite nach unten wischt.

Vorher, mit ganzer Seitenaktualisierung.

Aktualisieren Sie anschließend nur den Inhalt.

In einigen Fällen möchten Sie dieses Verhalten vielleicht überschreiben und Ihre eigenen Erfahrungen bereitstellen. Genau das macht die Progressive Web-App von Twitter. Wenn Sie nach unten ziehen, anstatt die gesamte Seite neu zu laden, werden einfach alle neuen Tweets zur aktuellen Ansicht hinzugefügt.

Chrome 63 unterstützt jetzt die CSS-Eigenschaft overscroll-behavior, mit der das standardmäßige Scrollverhalten des Browsers beim Überlauf überschrieben werden kann.

Mit ihrer Hilfe können Sie Folgendes tun:

Das Beste daran: overscroll-behavior wirkt sich nicht negativ auf die Seitenleistung aus.

Änderungen an der Benutzeroberfläche für Berechtigungen

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

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

In Chrome 59 haben wir damit begonnen, dieses Problem zu beheben, indem wir eine Berechtigung vorübergehend blockieren, wenn der Nutzer die Anfrage dreimal abgelehnt hat. Ab Version m63 bietet Chrome für Android modale Dialogfelder für Berechtigungsanfragen.

Denken Sie daran, dass dies nicht nur für Push-Benachrichtigungen gilt, sondern für alle Berechtigungsanfragen. Wenn Sie die Berechtigung zum entsprechenden Zeitpunkt und im entsprechenden Kontext einholen, haben wir festgestellt, dass die Wahrscheinlichkeit, dass Nutzer sie erteilen, zweieinhalb Mal höher ist.

…und vieles mehr

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

  • finally ist jetzt auf Promise-Instanzen verfügbar und wird aufgerufen, nachdem eine Promise erfüllt oder abgelehnt wurde.
  • Mit der neuen Device Memory JavaScript API erhalten Sie Hinweise zur Gesamtmenge des RAM-Speichers auf dem Gerät des Nutzers und können so Leistungseinschränkungen besser nachvollziehen. Sie können die Nutzung während der Laufzeit anpassen, wodurch die Komplexität auf Low-End-Geräten reduziert wird. So wird die Nutzung für die Nutzer verbessert und es wird weniger frustriert.
  • Mit der Intl.PluralRules API können Sie Anwendungen erstellen, die die Pluralbildung einer bestimmten Sprache verstehen. Dazu geben Sie an, welche Pluralform für eine Zahl und Sprache gilt. und kann bei Ordinalzahlen hilfreich sein.

Abonniere unseren YouTube-Kanal, um bei jeder Veröffentlichung eines neuen Videos per E-Mail eine Benachrichtigung zu erhalten.

Ich bin Pete LePage. Sobald Chrome 64 veröffentlicht wird, werde ich Ihnen die Neuheiten bei Chrome mitteilen.