Nieuw in Chrome 97

Pete LePage

Dit is wat u moet weten:

Gelukkig nieuwjaar! Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 97.

Webtransport

Als u WebSockets of de WebRTC Data Channel API gebruikt om berichten tussen uw server en de pagina te versturen, is er een nieuwe optie voor u: WebTransport is een nieuwe API die bidirectionele client-serverberichten met lage latentie biedt.

De latentie is lager dan bij WebSockets. Bovendien is de Web Transport API, in tegenstelling tot de RTC Data Channel API (die is ontworpen voor peer-to-peer-berichten), specifiek ontworpen voor client-serverberichten.

Het ondersteunt het verzenden van gegevens, betrouwbaar met de streams-API's en onbetrouwbaar met de datagram-API's. Het wordt ondersteund in webworkers. En omdat het een Streams-compatibele interface biedt, ondersteunt het optimalisaties rond backpressure.

Om het te gebruiken, heb je een server nodig die HTTP/3 ondersteunt, wat over het algemeen eenvoudiger is dan het opzetten en onderhouden van een WebRTC-server. Open een nieuwe WebTransport instantie, wacht tot deze verbinding maakt en je kunt beginnen met het verzenden van gegevens.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Bekijk het artikel Experimenteren met WebTransport op web.dev voor meer informatie.

Detectie van scripttypefuncties

Momenteel kunnen we het nomodule -kenmerk gebruiken om ondersteuning voor JavaScript-modules in de browser te detecteren. Maar er zijn verschillende nieuwe functievoorstellen in de pijplijn, zoals import maps, speculatieregels en bundelpreloading. We hebben een manier nodig om te achterhalen wat een browser ondersteunt.

Voer HTMLScriptElement.supports() in. Hiermee kunt u bepalen welke typen scripts u kunt gebruiken en de browser de beste optie sturen.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Nieuwe array-prototypes

Ik vind het geweldig hoe JavaScript steeds eenvoudiger wordt. Array en TypedArray ondersteunen nu de statische methoden findLast() en findLastIndex() .

Deze functies zijn in feite hetzelfde als find() en findIndex() , maar zoeken vanaf het einde van een array in plaats van vanaf het begin.

Als u bijvoorbeeld het laatste getal in een matrix wilt vinden dat groter is dan tien, roept u findLast() aan met een testfunctie die controleert of de waarde groter is dan tien. U kunt dan aan de slag.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Emuleer Chrome 100 in de UA-string

Over een paar maanden bereiken we Chrome 100, een versienummer van drie cijfers. Elke code die versienummers controleert of de UA-string parseert, moet worden gecontroleerd om er zeker van te zijn dat deze drie cijfers verwerkt.

Er is een vlag met de naam #force-major-version-to-100 waarmee het huidige versienummer wordt gewijzigd naar 100. Zo kunt u controleren of alles werkt zoals verwacht.

Chrome markeert pagina met nieuwe #force-major-version-to-100 optie

En nog veel meer!

Er is natuurlijk nog veel meer.

Nieuwe regels in formulierinvoer worden nu op dezelfde manier genormaliseerd als bij Gecko en WebKit, waardoor de interoperabiliteit tussen browsers wordt verbeterd.

We standaardiseren de namen van clienthints door ze te voorzien van het voorvoegsel sec-ch . dpr wordt bijvoorbeeld sec-ch-dpr . We blijven bestaande versies van deze hints ondersteunen, maar houd er rekening mee dat ze uiteindelijk niet meer worden gebruikt en verwijderd.

Gesloten <details> -elementen zijn nu doorzoekbaar en kunnen worden gekoppeld. Deze verborgen elementen worden automatisch uitgevouwen wanneer navigatie via 'vinden op pagina', ScrollToTextFragment en elementfragmenten wordt gebruikt.

Verder lezen

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

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 98 uitkomt, vertel ik u graag wat er nieuw is in Chrome!