Nieuw in Chrome 95

Pete LePage

Dit is wat u moet weten:

  • Routering wordt eenvoudiger met URLPattern dat in de browser is geïntegreerd.
  • De Eye Dropper API biedt een ingebouwde tool voor het selecteren van kleuren.
  • Er is een nieuwe oorsprongsproefversie waarmee u ervoor kunt kiezen om nu de gereduceerde UA-string te ontvangen.
  • De PWA Summit -video's staan ​​allemaal online.
  • En er is nog veel meer .

Ik ben Pete LePage en ik werk en fotografeer vanuit huis. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 95.

Routering met URLPattern

Bijna alle webapps zijn op de een of andere manier afhankelijk van routering, of het nu gaat om code die op een server draait en een pad naar bestanden op schijf toewijst, of om logica in een single-page app die de DOM bijwerkt wanneer de URL verandert. URLPattern is een nieuwe API voor webplatforms die de syntaxis van routeringspatronen standaardiseert.

Het bouwt voort op de basis van bestaande frameworks en maakt het eenvoudiger om veelvoorkomende routeringstaken uit te voeren. Bijvoorbeeld het vergelijken met volledige URL's of een URL-padnaam en vervolgens informatie retourneren over de token- en groepsmatches.

Als u al bekend bent met de routeringssyntaxis die wordt gebruikt in Express , Ruby on Rails of path-to-regexp , dan zal dit u waarschijnlijk bekend voorkomen.

Om het te gebruiken, maakt u een nieuwe URLPattern() aan en geeft u de details op waarmee u het patroon wilt vergelijken. Patronen kunnen jokers, benoemde tokengroepen, reguliere-expressiegroepen en groepsmodifiers bevatten.

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

Laten we bijvoorbeeld eens kijken naar het URLPattern dat mogelijk door Google Docs wordt gebruikt. We specificeren het kind , de bestands- ID en de mode . Om het patroon te gebruiken, kunnen we vervolgens test() of exec() aanroepen.

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 is standaard ingeschakeld in Chrome en Edge versie 95 en hoger. Voor browsers of omgevingen zoals Node die het nog niet ondersteunen, kunt u de urlpattern-polyfill- bibliotheek gebruiken.

Bekijk Jeff's artikel URLPattern brengt routing naar het webplatform voor alle details!

Kleuren kiezen met de Eye Dropper API

Bijna elke ontwerp-app die ik ooit heb gebruikt, heeft een pipetfunctie, waardoor je gemakkelijk de kleur van iets kunt bepalen. Sommige browsers hebben een pipetfunctie ingebouwd in <input type=color> , maar dat is niet ideaal.

De eyedropper API, geïmplementeerd door een aantal mensen bij Microsoft, brengt die functionaliteit naar het web. Om deze te gebruiken, maakt u een nieuwe EyeDropper() instantie aan en roept u vervolgens open() aan.

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

Net als veel andere moderne web-API's werkt het asynchroon, zodat het de hoofdthread niet blokkeert. Wanneer de gebruiker op de gewenste kleur klikt, wordt de gewenste kleur weergegeven.

PWA-top

Heb je de PWA Summit eerder deze maand bijgewoond?

Het was geweldig om zoveel mensen over PWA's te zien praten en hun ervaringen te zien delen. Mocht je het gemist hebben: de video's staan ​​er weer, dus bekijk ze zeker op PWASummit.org of het YouTube-kanaal van de PWA Summit .

Proef met gebruikersagentreductieoorsprong

User-Agent Reduction is een poging om passieve vingerafdrukoppervlakken te verkleinen door de informatie in de User-Agent-tekenreeks te beperken tot alleen het merk en de belangrijkste versie van de browser, de desktop- of mobiele onderscheiding en het platform waarop de browser wordt uitgevoerd.

Vanaf Chrome 95 is er een nieuwe Origin-proefversie waarmee u ervoor kunt kiezen om nu de gereduceerde UA-string te ontvangen. Zo kunt u problemen ontdekken en oplossen voordat de gereduceerde UA de standaard wordt in Chrome.

De wijzigingen worden stapsgewijs doorgevoerd in een aantal releases, maar alles wat u nodig hebt om u voor te bereiden en te testen, is nu al gereed.

Alle details en de tijdlijn vindt u in het bericht over de User-Agent Reduction-proefversie op developer.chrome.com .

En nog veel meer!

Er is natuurlijk nog veel meer.

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 95.

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 96 uitkomt, vertel ik je alles over de nieuwe functies in Chrome!