Neu in Chrome 95

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Mit URLPattern, das direkt in den Browser eingebunden ist, wird das Routing einfacher.
  • Die Eye Dropper API bietet ein integriertes Tool zum Auswählen von Farben.
  • 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 gewisser Weise vom Routing abhängig, sei es Code, der auf einem Server ausgeführt wird, der einen Pfad zu Dateien auf dem Laufwerk zuordnet, oder Logik in einer Single-Page-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 den 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.

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 jemals verwendet habe, hat ein Pipetten-Tool, mit dem sich leicht herausfinden lässt, welche Farbe etwas hat. Einige Browser haben eine integrierte Pipettenfunktion für <input type=color>, aber sie ist nicht ideal.

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.

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

PWA Summit

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 Sie es verpasst haben, können Sie sich die Videos auf PWASummit.org oder auf dem YouTube-Kanal des PWA Summits ansehen.

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 in mehreren Releases nach und nach angewendet. Alles, was Sie für die Vorbereitung und Tests benötigen, ist aber 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 viele weitere.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu den Ä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 hier, was es Neues in Chrome gibt.