Neu in Chrome 55

Pete LePage

Auf YouTube ansehen

  • Mit async und await können Sie Promise-basierten Code wie synchron schreiben, ohne den Hauptthread zu blockieren.
  • Zeigerereignisse bieten eine einheitliche Möglichkeit, alle Eingabeereignisse zu verarbeiten.
  • Dem Startbildschirm hinzugefügte Websites erhalten automatisch die Berechtigung für nichtflüchtigen Speicher.

Und das war noch nicht alles.

Ich bin Pete LePage. Das ist neu für Entwickler in Chrome 55.

Zeigerereignisse

Früher war es einfach, im Web auf Dinge zu zeigen. Sie hatten eine Maus, haben sie bewegt, manchmal Tasten drücken und das wars. Aber das funktioniert hier nicht so gut.

Touch-Ereignisse sind gut. Zur Unterstützung von Touch-Ereignissen und Maus mussten jedoch zwei Ereignismodelle unterstützt werden:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome ermöglicht jetzt durch das Senden von PointerEvents eine einheitliche Eingabeverarbeitung:

elem.addEventListener('pointermove', pointerMoveEvent);

Zeigerereignisse vereinheitlichen das Zeigereingabemodell für den Browser, sodass Touch, Stifte und Mäuse zu einem einzigen Ereignissatz zusammengeführt werden. Sie werden in IE11, Edge, Chrome, Opera und teilweise in Firefox unterstützt.

Weitere Informationen finden Sie unter Den Weg nach vorn zeigen.

async und await

Für asynchrones JavaScript ist es nicht immer leicht, die Ursache zu verstehen. Nehmen wir diese Funktion mit all ihren „lovely“ Callbacks:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

Wenn Sie sie mit promises neu schreiben, können Sie das Verschachtelungsproblem vermeiden:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Promise-basierter Code kann jedoch immer noch schwierig zu lesen sein, wenn es lange Verkettungen asynchroner Abhängigkeiten gibt.

Chrome unterstützt jetzt die JavaScript-Schlüsselwörter async und await. Damit kannst du Promise-basiertes JavaScript schreiben, das genauso strukturiert und lesbar wie synchroner Code sein kann.

Stattdessen kann die asynchrone Funktion so vereinfacht werden:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake hat einen tollen Beitrag zu diesem Thema: Async Functions – Making promises Friendly.

Nichtflüchtiger Speicher

Der Ursprungstest des nichtflüchtigen Speichers ist jetzt beendet. Sie können Webspeicher jetzt als persistent markieren, damit Chrome den Speicher für Ihre Website nicht automatisch geleert.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

Darüber hinaus wird Websites mit hoher Interaktion, die zum Startbildschirm hinzugefügt wurden oder für die Push-Benachrichtigungen aktiviert sind, automatisch die Berechtigung „Persistenz“ gewährt.

Im Post Persistent Storage von Chris Wilson finden Sie ausführliche Informationen und erfahren, wie Sie nichtflüchtigen Speicher für Ihre Website anfordern können.

Automatische CSS-Bindung

Die automatische CSS-Bindung, eine der am häufigsten von Chrome angeforderten Layoutfunktionen, wird jetzt auf Android und Mac unterstützt.

Web Share API

Und schließlich ist es mit der neuen Web Share API, die als Ursprungstest verfügbar ist, jetzt noch einfacher, native Freigabefunktionen aufzurufen. Paul (Mr. Web Intents) Kinlan findet alle Einzelheiten in seinem Beitrag Navigator Share.

Closing

Dies sind nur einige der Änderungen in Chrome 55 für Entwickler.

Wenn du immer über Chrome auf dem Laufenden bleiben und über die neuesten Entwicklungen auf dem Laufenden bleiben möchtest, abonniere den Kanal und schau dir die Videos vom Chrome Dev Summit an, um mehr über die großartigen Dinge zu erfahren, an denen das Chrome-Team gerade arbeitet.

Ich bin Pete LePage. Sobald Chrome 56 veröffentlicht wird, erzähle ich Ihnen die neuen Funktionen von Chrome.