Neu in Chrome 55

Pete LePage

Auf YouTube ansehen

• Mit async und await können Sie versprechenbasierten Code schreiben, als wäre er synchron, ohne den Hauptthread zu blockieren.
• Mauszeigerereignisse bieten eine einheitliche Möglichkeit, alle Eingabeereignisse zu verarbeiten.
• Websites, die dem Startbildschirm hinzugefügt werden, erhalten automatisch die Berechtigung Dauerhafter Speicher.

Und es gibt noch viel mehr.

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

Zeiger-Ereignisse

Es war einmal ganz einfach, im Web auf Dinge zu zeigen. Sie hatten eine Maus, haben sie bewegt, manchmal Tasten gedrückt 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);

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

elem.addEventListener('pointermove', pointerMoveEvent);

Mit Zeigerereignissen wird das Zeigereingabemodell für den Browser vereinheitlicht. Touchbedienung, Stifte und Mäuse werden in einer einzigen Gruppe von Ereignissen zusammengefasst. Sie werden in IE11, Edge, Chrome, Opera und teilweise in Firefox unterstützt.

Weitere Informationen finden Sie unter Pointing the Way Forward.

async und await

Asynchrones JavaScript kann schwierig zu verstehen sein. Sehen wir uns diese Funktion mit all ihren „lieben“ Callbacks an:

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, lässt sich 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 schwer zu lesen sein, wenn es lange Ketten von asynchronen Abhängigkeiten gibt.

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

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 Artikel dazu geschrieben: Async Functions – making promises friendly (Async-Funktionen – Versprechen freundlich machen).

Nichtflüchtiger Speicher

Der Test für den Ursprung des nichtflüchtigen Speichers ist jetzt vorbei. Sie können den Webspeicher jetzt als persistent kennzeichnen, damit Chrome den Speicherplatz 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 erhalten Websites, die eine hohe Interaktionsrate haben, dem Startbildschirm hinzugefügt wurden oder für die Push-Benachrichtigungen aktiviert sind, automatisch die Berechtigung zur dauerhaften Speicherung.

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

Automatische Trennlinie in CSS

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

Web Share API

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

Abschluss

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

Wenn Sie über Neuigkeiten zu Chrome auf dem Laufenden bleiben möchten, abonnieren Sie den Kanal. In den Videos vom Chrome Dev Summit erfahren Sie mehr über die spannenden Projekte, an denen das Chrome-Team gerade arbeitet.

Ich bin Pete LePage. Sobald Chrome 56 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.