Neu in Chrome 95

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage, arbeite und fotografiere Sehen wir uns an, was es bei Chrome 95 Neues für Entwickler gibt.

Route mit URLPattern

Fast alle Web-Apps sind in irgendeiner Weise vom Routing abhängig – unabhängig davon, ob Code ausgeführt wird. auf einem Server, der einen Pfad zu Dateien auf der Festplatte oder Logik in einer Single-Page-Anwendung zuordnet das das DOM aktualisiert, wenn sich die URL ändert. URLPattern ist ein neues Web Plattform-API, die die Syntax von Routingmustern standardisiert.

Es baut auf der Grundlage vorhandener Frameworks auf, was die Ausführung vereinfacht. häufige Routing-Aufgaben. Beispiel: Abgleich mit vollständigen URLs oder einer URL pathname und gibt dann Informationen über die Token- und Gruppenübereinstimmungen zurück.

Wenn Sie mit der in Express verwendeten Routingsyntax vertraut sind: Ruby on Rails oder auch path-to-regexp, kommt Ihnen wahrscheinlich bekannt vor.

Wenn Sie sie verwenden möchten, erstellen Sie eine neue URLPattern() und geben Sie die Details an, die Sie Musterabgleich. Muster können Platzhalter, benannte Tokengruppen, Gruppen mit regulären Ausdrücken und Gruppenmodifikatoren.

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

Sehen wir uns zum Beispiel die URLPattern an, die möglicherweise von Google Docs verwendet werden. Wir geben das kind der Datei, die Datei ID und das mode-Element an, in dem sie geöffnet werden soll. Um das Muster dann 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 in Edge-Version 95 und höher standardmäßig aktiviert. Für Browser oder Umgebungen wie Node, die dieses noch nicht unterstützen, können Sie die Bibliothek urlpattern-polyfill verwenden.

Lesen Sie Jeffs Artikel URLPattern bringt Routing auf der Webplattform .

Farben mit der Eye Dropper API auswählen

Fast jede Design-App, die ich je verwendet habe, verfügt über eine Pipette. welche Farbe eine Farbe ist. Einige Browser haben eine Pipette in <input type=color> integriert, aber das ist nicht ideal.

Die Pipette API, die von einigen Fachleuten bei Microsoft implementiert wurde, im Web zu präsentieren. Erstellen Sie ein neues EyeDropper(), um sie zu verwenden und rufe dann open() auf.

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

Wie viele andere moderne Web-APIs funktioniert es asynchron, sodass es blockiert den Hauptthread nicht. Wenn Nutzende auf die gewünschte Farbe klicken, mit der Farbe löst, auf die sie geklickt haben.

Sie können eine kurze Demo ausprobieren und sich die Code in Glitch.

PWA-Konferenz

Hast du Anfang des Monats am PWA Summit teilgenommen?

Es war toll, dass so viele Menschen über PWAs und ihre User Experiences. Wenn du es verpasst hast, sind alle Videos verfügbar – schau also auf dem Laufenden findest du unter PWASummit.org oder im YouTube-Kanal der PWA Summit

Ursprungstest für die User-Agent-Reduzierung

Mit der User-Agent-Reduzierung sollen passive Fingerabdruckoberflächen zu beseitigen, indem die Informationen im User-Agent reduziert werden. nur die Marke und wichtige Version des Browsers, seinen Desktop oder mobile Unterscheidung und die Plattform, auf der sie läuft.

Ab Chrome 95 gibt es einen neuen Ursprungstest, der ermöglicht Ihnen, den reduzierten UA-String jetzt zu aktivieren. Dadurch wird Folgendes aktiviert: können Sie Probleme erkennen und beheben, bevor die reduzierte UA-Version zum Standard wird. Verhalten in Chrome.

Die Änderungen werden schrittweise auf mehrere Releases angewendet, alles, was Sie zum Vorbereiten und Testen brauchen, jetzt bereit ist.

Alle Details und der Zeitplan sind in der Ursprungstest zur Reduzierung des User-Agents veröffentlicht am developer.chrome.com.

…und vieles mehr

Natürlich gibt es noch viele weitere.

Weitere Informationen

Hier werden nur einige der wichtigsten Vorteile behandelt. Klicken Sie auf die Links unten, zusätzliche Änderungen in Chrome 95.

Abonnieren

Abonnieren den YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 96 veröffentlicht ist, erfährst du, was es Neues bei Chrome gibt.