Nieuw in Chrome 95

Piet LePage

Dit is wat u moet weten:

  • Routering wordt eenvoudiger doordat URLPattern in de browser is ingebakken.
  • De Eye Dropper API biedt een ingebouwd hulpmiddel voor het selecteren van kleuren.
  • Er is een nieuwe origin-proefversie waarmee u zich nu kunt aanmelden voor het ontvangen van de verlaagde UA-reeks .
  • De PWA Summit- video's staan ​​allemaal online.
  • En er is nog veel meer .

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

Routering met URLPattern

Bijna alle web-apps zijn op de een of andere manier afhankelijk van routing, of het nu gaat om code die op een server draait en een pad naar bestanden op schijf toewijst, of om logica in een app van één pagina die de DOM bijwerkt wanneer de URL verandert. URLPattern is een nieuwe webplatform-API die de syntaxis van routeringspatronen standaardiseert.

Het bouwt voort op de basis van bestaande raamwerken, waardoor het eenvoudiger wordt om algemene routeringstaken uit te voeren. Bijvoorbeeld matchen met volledige URL's of een URL-padnaam, en vervolgens informatie retourneren over de token- en groepsovereenkomsten.

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

Om het te gebruiken, maakt u een nieuwe URLPattern() en geeft u de details op waarmee u het patroon wilt matchen. Patronen kunnen jokertekens, benoemde tokengroepen, reguliere expressiegroepen en groepsmodificatoren 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 Documenten wordt gebruikt. We specificeren het kind bestand, de bestands- ID en in welke mode het moet worden geopend. Om het patroon te gebruiken, kunnen we 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. En voor browsers of omgevingen zoals Node, die dit nog niet ondersteunen, kunt u de urlpattern-polyfill- bibliotheek gebruiken.

Bekijk Jeffs artikel URLPattern brengt routing naar het webplatform voor volledige details!

Kleuren kiezen met de Eye Dropper API

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

De pipet-API, geïmplementeerd door een aantal mensen bij Microsoft, brengt die functionaliteit naar het internet. Om het te gebruiken, maakt u een nieuwe EyeDropper() instantie en roept u er vervolgens open() op 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 deze opgelost met de kleur waarop hij heeft geklikt.

Je kunt een snelle demo uitproberen en de code op Glitch bekijken.

PWA-top

Heb je de PWA Summit eerder deze maand gezien?

Het was geweldig om te zien dat zoveel mensen over PWA's praatten en hun ervaringen deelden. Als je het gemist hebt: de video's staan ​​allemaal online, dus bekijk ze zeker op PWASummit.org of het PWA Summit YouTube-kanaal .

Proefversie van oorsprongsreductie van user-agents

User-Agent Reduction is een poging om passieve vingerafdrukoppervlakken te verminderen, door de informatie in de User-Agent-string te beperken tot alleen het merk en de significante versie van de browser, het onderscheid tussen desktop of mobiel, en het platform waarop de browser draait.

Vanaf Chrome 95 is er een nieuwe origin-proefversie waarmee u zich nu kunt aanmelden voor het ontvangen van de verminderde UA-reeks. Hierdoor kunt u problemen ontdekken en oplossen voordat de verminderde UA het standaardgedrag in Chrome wordt.

De wijzigingen zullen stapsgewijs worden toegepast over een aantal releases, maar alles wat je nodig hebt om je voor te bereiden en te testen, is nu klaar.

Alle details en de tijdlijn staan ​​in de proefpost voor User-Agent Reduction-oorsprong op developer.chrome.com .

En meer!

Natuurlijk is er nog veel meer.

Verder lezen

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

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 96 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!