Neu in Chrome 95

Pete LePage

Dazu sollten Sie Folgendes wissen:

Hallo, ich bin Pete LePage. Ich arbeite und filme von zu Hause aus. Sehen wir uns an, was es Neues für Entwickler in Chrome 95 gibt.

Routing mit URLPattern

Fast alle Web-Apps sind in irgendeiner Weise auf das Routing angewiesen. Das kann Code sein, der auf einem Server ausgeführt wird und einen Pfad zu Dateien auf der Festplatte zuordnet, oder Logik in einer Single-Page-App, die das DOM aktualisiert, wenn sich die URL ändert. URLPattern ist eine neue Webplattform-API, die die Syntax für Routingmuster standardisiert.

Es basiert auf vorhandenen Frameworks und erleichtert die Ausführung gängiger Routing-Aufgaben. Beispiel: Abgleich mit vollständigen URLs oder einem URL-Pfadnamen und Rückgabe von Informationen zu Token- und Gruppenübereinstimmungen.

Wenn Sie bereits mit der in Express, Ruby on Rails oder path-to-regexp verwendeten Routing-Syntax vertraut sind, kommt Ihnen das wahrscheinlich bekannt vor.

Erstellen Sie dazu eine neue URLPattern() und geben Sie die Details an, die Sie abgleichen möchten. Muster können Platzhalter, benannte Tokengruppen, Gruppen für reguläre Ausdrücke und Gruppenmodifizierer enthalten.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Sehen wir uns beispielsweise die URLPattern an, die von Google Docs verwendet werden könnten. Wir geben die kind der Datei, die Datei ID und die mode an, in der sie geöffnet werden soll. Um das Muster zu verwenden, können wir entweder test() oder exec() aufrufen.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern ist in Chrome und Edge ab Version 95 standardmäßig aktiviert. Für Browser oder Umgebungen wie Node, die sie noch nicht unterstützen, können Sie die Bibliothek urlpattern-polyfill verwenden.

Weitere Informationen finden Sie im Artikel URLPattern brings routing to the web platform von Jeff.

Farben mit der Eye Dropper API auswählen

Fast jede Design-App, die ich je verwendet habe, verfügt über ein Pipetten-Tool, mit dem sich die Farbe eines Elements leicht ermitteln lässt. Einige Browser haben eine Pipettenfunktion in <input type=color> integriert, aber das ist nicht ideal.

Die von einigen Mitarbeitern von Microsoft implementierte Pipette-API bringt diese Funktion ins Web. Dazu erstellen Sie eine neue EyeDropper()-Instanz und rufen dann open() auf.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Wie viele andere moderne Web-APIs funktioniert sie asynchron, sodass der Hauptthread nicht blockiert wird. Wenn der Nutzer auf die gewünschte Farbe klickt, wird diese ausgewählt.

Sie können eine kurze Demo ausprobieren und sich den Code auf Glitch ansehen.

PWA Summit

Haben Sie Anfang des Monats den PWA Summit gesehen?

Es war toll, dass so viele Leute über PWAs gesprochen und ihre Erfahrungen geteilt haben. Falls Sie es verpasst haben, sind die Videos alle verfügbar. Sie finden sie unter PWASummit.org oder auf dem YouTube-Kanal des PWA Summit.

Ursprungstest zur Reduzierung des User-Agents

Die Reduzierung des User-Agents soll die Möglichkeiten für passives Fingerprinting verringern, indem die Informationen im User-Agent-String auf die Marke und die Hauptversion des Browsers, die Unterscheidung zwischen Desktop und Mobilgerät sowie die Plattform, auf der er ausgeführt wird, beschränkt werden.

Ab Chrome 95 gibt es einen neuen Ursprungstest, mit dem Sie sich jetzt für den Empfang des reduzierten UA-Strings anmelden können. So können Sie Probleme erkennen und beheben, bevor der reduzierte UA zum Standardverhalten in Chrome wird.

Die Änderungen werden schrittweise über mehrere Releases hinweg angewendet. Alles, was Sie zur Vorbereitung und zum Testen benötigen, ist jedoch bereits jetzt verfügbar.

Alle Details und die Zeitachse finden Sie im Beitrag Ursprungstest zur Reduzierung des User-Agents auf developer.chrome.com.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 95.

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

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