Neu in Chrome 55

Pete LePage

Auf YouTube ansehen

• Mit async und await können Sie Promise-basierten Code so schreiben, als wäre er synchron, ohne den Hauptthread zu blockieren.
• Zeigerereignisse bieten eine einheitliche Möglichkeit, alle Eingabeereignisse zu verarbeiten.
• Websites, die dem Startbildschirm hinzugefügt werden, erhalten automatisch die Berechtigung für persistent storage (dauerhaften Speicher).

Und das ist noch lange nicht alles.

Ich bin Pete LePage und das sind die Neuigkeiten für Entwickler in Chrome 55.

Pointer-Ereignisse

Früher war es ganz einfach, auf Dinge im Web zu verweisen. Man hatte eine Maus, bewegte sie, drückte manchmal auf Tasten und das war es. Aber das funktioniert hier nicht so gut.

Touch-Ereignisse sind gut, aber um Touch und Maus zu unterstützen, mussten Sie zwei Ereignismodelle unterstützen:

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

In Chrome wird jetzt eine einheitliche Eingabebehandlung ermöglicht, indem PointerEvents gesendet werden:

elem.addEventListener('pointermove', pointerMoveEvent);

Pointer-Ereignisse vereinheitlichen das Pointer-Eingabemodell für den Browser und fassen Touch-, Stift- und Mauseingaben in einer einzigen Reihe von Ereignissen zusammen. Sie werden in IE11, Edge, Chrome und Opera unterstützt und in Firefox teilweise.

Weitere Informationen finden Sie unter Pointing the Way Forward.

async und await

Asynchrones JavaScript kann schwierig zu verstehen sein. Hier ist eine Funktion mit all ihren „schönen“ 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 den Code mit promises neu schreiben, wird das Problem mit der Verschachtelung vermieden:

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 schwer zu lesen sein, wenn es lange Ketten asynchroner Abhängigkeiten gibt.

Chrome unterstützt jetzt die JavaScript-Schlüsselwörter async und await. So können Sie Promise-basiertes JavaScript schreiben, das so strukturiert und lesbar wie synchroner Code ist.

Stattdessen kann unsere 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 mit allen Details geschrieben: Async Functions - making promises friendly.

Nichtflüchtiger Speicher

Der Ursprungstest für persistenten Speicher ist jetzt beendet. Sie können jetzt Webspeicher als persistent markieren, damit Chrome den Speicher für Ihre Website nicht automatisch löscht.

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.");
  });
}

Außerdem wird Websites mit hoher Interaktion, die dem Startbildschirm hinzugefügt wurden oder für die Push-Benachrichtigungen aktiviert sind, automatisch die Berechtigung für die Persistenz erteilt.

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

Automatische Silbentrennung in CSS

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

Web Share API

Außerdem ist es jetzt einfacher, native Freigabefunktionen mit der neuen Web Share API aufzurufen, die als Origin Trial verfügbar ist. Paul (Mr. Web Intents) Kinlan hat alle Details in seinem Beitrag Navigator Share zusammengefasst.

Abschluss

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

Wenn Sie über Chrome auf dem Laufenden bleiben und wissen möchten, was als Nächstes ansteht, abonnieren Sie den Kanal. Außerdem finden Sie in den Videos vom Chrome Dev Summit weitere Informationen zu einigen der großartigen Dinge, an denen das Chrome-Team arbeitet.

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