Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 97

Pete LePage

Dit is wat u moet weten:

WebTransport is een nieuwe optie voor het verzenden van realtime berichten tussen de client en de server.
U kunt functiedetectie gebruiken om te zien welke typen scripts een browser ondersteunt.
Het zoeken naar arrays vanaf het einde wordt een beetje eenvoudiger.
En er is nog veel meer .

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

Webtransport

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

Het heeft een lagere latentie dan WebSockets, en in tegenstelling tot de RTC Data Channel API, die is ontworpen voor peer-to-peer-berichten, is de Web Transport API specifiek ontworpen voor client-server-berichten.

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

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 u 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 volledige details.

Functiedetectie van scripttype

Tegenwoordig kunnen we het nomodule attribuut gebruiken om ondersteuning voor JavaScript-modules in de browser te detecteren. Maar er zitten verschillende nieuwe functievoorstellen in de pijplijn, zoals importkaarten, speculatieregels en het vooraf laden van bundels. We hebben een manier nodig om te weten wat een browser ondersteunt.

Voer HTMLScriptElement.supports() in. U kunt het gebruiken om te bepalen welke soorten scripts u kunt gebruiken en de browser de beste optie te 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 als JavaScript eenvoudiger wordt. Array en TypedArray ondersteunen nu de statische methoden findLast() en findLastIndex() .

Deze functies zijn feitelijk 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 array wilt vinden dat groter is dan tien, roept u findLast() aan met een testfunctie die controleert of de waarde groter is dan tien, en u bent klaar om te gaan.

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-reeks

Binnen een paar maanden bereiken we Chrome 100, een driecijferig versienummer. Elke code die versienummers controleert of de UA-reeks 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 die het huidige versienummer verandert in 100, zodat u ervoor kunt zorgen dat alles werkt zoals verwacht.

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

En meer!

Natuurlijk is er nog veel meer.

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

We standaardiseren de namen van clienthints door ze vooraf te laten gaan met sec-ch . dpr wordt bijvoorbeeld sec-ch-dpr . We blijven bestaande versies van deze tips ondersteunen, maar u moet rekening houden met de uiteindelijke beëindiging en verwijdering ervan.

Gesloten <details> elementen zijn nu doorzoekbaar en er kan naar gelinkt worden. Deze verborgen elementen worden automatisch uitgevouwen wanneer find in page, ScrollToTextFragment en elementfragmentnavigatie worden gebruikt.

Verder lezen

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

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 98 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!