Neu in Chrome 95

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage, arbeite von zu Hause aus und drehe von zu Hause aus. Als Nächstes sehen wir uns an, was es für Entwickler bei Chrome 95 Neues gibt.

Routen mit URLPattern

Nahezu alle Webanwendungen sind irgendwie vom Routing abhängig. Dabei kann es sich um Code handeln, der auf einem Server ausgeführt wird, der einen Pfad zu Dateien auf dem Laufwerk zuordnet, oder um Logik in einer einseitigen Anwendung, die das DOM aktualisiert, wenn sich die URL ändert. URLPattern ist eine neue Webplattform-API, die die Syntax von Routingmustern standardisiert.

Es baut auf der Grundlage vorhandener Frameworks auf und erleichtert die Ausführung gängiger Routingaufgaben. Beispiel: Abgleich mit vollständigen URLs oder einem URL-Pfadnamen, wobei Informationen über das Token und die Gruppenübereinstimmungen zurückgegeben werden.

Wenn Sie mit der Routingsyntax in Express, Ruby on Rails oder path-to-regexp bereits vertraut sind, wird Ihnen dies wahrscheinlich bekannt vorkommen.

Erstellen Sie dafür eine neue URLPattern() und geben Sie die Details für den Musterabgleich an. Muster können Platzhalter, benannte Tokengruppen, Gruppen mit regulären Ausdrücken und Gruppenmodifikatoren enthalten.

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

Sehen wir uns zum Beispiel URLPattern an, das möglicherweise von Google Docs verwendet wird. Wir geben die kind der Datei, die Datei ID und die mode an, in der sie geöffnet werden soll. Zur Verwendung des Musters können wir dann 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 dies noch nicht unterstützen, können Sie die urlpattern-polyfill-Bibliothek verwenden.

Ausführliche Informationen finden Sie in Jeffs Artikel URLPattern bringsrouting to the web platform.

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 Objekts leichter ermitteln lässt. Bei einigen Browsern ist die Pipette in <input type=color> integriert. Das ist jedoch nicht ideal.

Mit der Eye Dropper API, die von einigen Microsoft-Mitarbeitern implementiert wurde, können Sie diese Funktionen auch im Web nutzen. Wenn Sie sie verwenden möchten, erstellen Sie eine neue EyeDropper()-Instanz und rufen Sie dafür 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 Nutzende auf die gewünschte Farbe klicken, wird sie aufgelöst.

Du kannst eine kurze Demo ausprobieren und dir den Code auf Glitch ansehen.

PWA Summit

Hast du Anfang des Monats am PWA Summit teilgenommen?

Es war toll, dass so viele über PWAs sprechen und von ihren Erfahrungen berichten. Falls ihr verpasst habt, könnt ihr euch alle Videos unter PWASummit.org oder auf dem YouTube-Kanal des PWA Summit ansehen.

Ursprungstest zur User-Agent-Reduktion

Die User-Agent-Reduktion ist eine Maßnahme zur Reduzierung von passiven Fingerabdruckoberflächen. Dabei werden die Informationen im User-Agent-String so reduziert, dass nur die Marke und die signifikante Version des Browsers, seine Unterscheidung zu Desktop oder Mobilgerät und die Plattform angezeigt wird, auf der er ausgeführt wird.

Ab Chrome 95 gibt es einen neuen Ursprungstest, bei dem Sie jetzt festlegen können, dass Sie den reduzierten UA-String erhalten möchten. So können Sie Probleme erkennen und beheben, bevor das reduzierte UA zum Standardverhalten in Chrome wird.

Die Änderungen werden schrittweise auf eine Reihe von Releases angewendet, aber alles, was Sie vorbereiten und testen müssen, ist jetzt sofort verfügbar.

Alle Details und den Zeitplan findest du im Beitrag zum Ursprungstest zur User-Agent-Reduktion auf developer.chrome.com.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 95 finden Sie unter den folgenden Links.

Abo

Abonnieren Sie den YouTube-Kanal für Chrome-Entwickler, um auf dem Laufenden zu bleiben. Dann werden Sie per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 96 veröffentlicht wird, melde ich Ihnen, was es bei Chrome Neues gibt.