Dazu sollten Sie Folgendes wissen:
- Das Routing wird mit
URLPattern
, das im Browser integriert ist, einfacher. - Die Eye Dropper API bietet ein integriertes Tool zur Farbauswahl.
- Es gibt einen neuen Ursprungstest, bei dem Sie jetzt den Erhalt des reduzierten UA-Strings aktivieren können.
- Die Videos zum PWA Summit sind alle online.
- Und es gibt viele weitere.
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.
- Wenn Sie die Arbeit mit der Storage Foundation API ausgeführt haben, gibt es einen neuen Ursprungstest für Zugriffs-Handles.
- WebAssembly bietet jetzt Unterstützung für die Verarbeitung von Ausnahmen. Dies ermöglicht es Code, die Steuerung zu unterbrechen, wenn eine Ausnahme ausgelöst wird.
- Chrome 100 ist ab nächstem Jahr verfügbar. Achten Sie deshalb darauf, dass Ihr Code mehr als zwei Ziffern verarbeiten kann.
Weitere Informationen
Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 95 finden Sie unter den folgenden Links.
- Neu in den Chrome-Entwicklertools (95)
- Einstellung und Entfernung von Chrome 95
- ChromeStatus.com-Updates für Chrome 95
- Neuerungen in JavaScript in Chrome 95
- Änderungsliste des Chromium-Quell-Repositorys
- Release-Kalender für Chrome
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.