Dazu sollten Sie Folgendes wissen:
- Mit dem integrierten
URLPattern
im Browser wird das Routing noch einfacher. - Die Eye Dropper API bietet ein integriertes Tool zur Auswahl Farben.
- Es gibt einen neuen Ursprungstest, mit dem du den Erhalt von verringerter UA-String.
- Die Videos auf dem PWA Summit sind alle online.
- Und es gibt noch viele weitere Funktionen.
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.
- Wenn Sie die Storage Foundation API-Arbeiten bislang verwendet haben, gibt es einen neuen Ursprungstest für Zugriffs-Aliasse
- WebAssembly bietet jetzt Unterstützung beim Umgang mit Ausnahmeregelungen, die ermöglicht es Code, den Ablauf zu unterbrechen, wenn eine Ausnahme ausgelöst wird.
- Chrome 100 ist nächstes Jahr verfügbar. Das heißt, es ist an der Zeit, kann mehr als zwei Ziffern verarbeiten.
Weitere Informationen
Hier werden nur einige der wichtigsten Vorteile behandelt. Klicken Sie auf die Links unten, zusätzliche Änderungen in Chrome 95.
- Das ist neu bei den Chrome-Entwicklertools (95)
- Einstellung von Chrome 95 und Entfernungen
- ChromeStatus.com-Updates für Chrome 95
- Neuerungen bei JavaScript in Chrome 95
- Änderungsliste für das Chromium-Quell-Repository
- Release-Kalender für Chrome
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.