Neu in Chrome 95

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Das Routing wird durch die Einbindung von URLPattern in den Browser einfacher.
  • Die Eye Dropper API bietet ein integriertes Tool zur Farbauswahl.
  • Es gibt einen neuen Ursprungstest, mit dem Sie den reduzierten UA-String jetzt aktivieren können.
  • Die Videos des PWA Summits sind alle online.
  • Und es gibt noch viele weitere.

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

Routing mit URLPattern

Fast alle Webanwendungen sind in irgendeiner Weise vom Routing abhängig, sei es durch Code, der auf einem Server ausgeführt wird, der Dateien auf dem Laufwerk einen Pfad 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 bestehenden Frameworks auf und erleichtert die Ausführung gängiger Routingaufgaben. Beispiel: Es wird mit vollständigen URLs oder einem URL-Pfad abgeglichen und dann werden Informationen zu den Token- und Gruppenübereinstimmungen zurückgegeben.

Wenn Sie mit der Routing-Syntax von Express, Ruby on Rails oder path-to-regexp vertraut sind, wird Ihnen das wahrscheinlich bekannt vorkommen.

Erstellen Sie dazu eine neue URLPattern() und geben Sie die Details an, mit denen eine Musterübereinstimmung erfolgen soll. Muster können Platzhalter, benannte Tokengruppen, reguläre Ausdrucksgruppen und Gruppenmodifikatoren enthalten.

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

Sehen wir uns beispielsweise das URLPattern an, das in Google Docs verwendet werden könnte. Wir geben das kind der Datei, die Datei ID und das mode-Element an, in dem 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 diese Funktion noch nicht unterstützen, können Sie die Bibliothek urlpattern-polyfill verwenden.

Ausführliche Informationen finden Sie im Artikel URLPattern bringt Routing auf die Webplattform von Jeff.

Farben mit der Eye Dropper API auswählen

Fast jede Design-App, die ich je verwendet habe, hat eine Pipette, mit der man leicht die Farbe erkennen kann. Bei einigen Browsern ist in <input type=color> eine Pipette integriert, was aber nicht ideal ist.

Die Eyedropper API, die von einigen Mitarbeitern von Microsoft implementiert wurde, bringt diese Funktion ins Web. Erstelle dazu eine neue EyeDropper()-Instanz und rufe dann open() darauf 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 sie festgelegt.

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

PWA-Konferenz

Haben Sie den PWA Summit Anfang des Monats besucht?

Es war toll, so viele Leute über PWAs sprechen und ihre Erfahrungen teilen zu sehen. Falls du es verpasst hast, findest du alle Videos auf der Website PWASummit.org oder YouTube-Kanal zum PWA Summit.

Ursprungstest zur Reduzierung des User-Agents

Die Reduzierung des User-Agents soll die Oberflächen für passives Fingerprinting verringern. Dazu werden die Informationen im User-Agent-String auf die Marke und die Hauptversion des Browsers, die Unterscheidung zwischen Desktop- und Mobilgeräten sowie die Plattform, auf der er ausgeführt wird, reduziert.

Ab Chrome 95 gibt es einen neuen Ursprungstest, mit dem Sie den reduzierten UA-String jetzt aktivieren können. So können Sie Probleme erkennen und beheben, bevor die reduzierte UA zum Standardverhalten in Chrome wird.

Die Änderungen werden schrittweise auf mehrere Releases angewendet, aber jetzt steht alles, was Sie vorbereiten und testen müssen, bereit.

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

Hier werden nur einige der wichtigsten Vorteile behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 95.

Abonnieren

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

Ich bin Pete LePage. Sobald Chrome 96 veröffentlicht wird, erzähle ich Ihnen von Chrome.