Nieuw in Chrome 107

Adriana Jara

U moet het volgende weten:

Ik ben Adriana Jara. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 107.

Nieuwe property's in de Screen Capture API

In deze versie voegt de Screen Capture API nieuwe eigenschappen toe om de functionaliteit voor scherm delen te verbeteren.

De DisplayMediaStreamOptions heeft de property selfBrowserSurface toegevoegd. Met deze hint kan de app de browser laten weten dat het huidige tabblad moet worden uitgesloten als getDisplayMedia() wordt aangeroepen.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Zo voorkom je dat je per ongeluk jezelf vastlegt en vermijd je het 'spiegelpaleis'-effect dat we in videovergaderingen hebben gezien.

DisplayMediaStreamOptions heeft nu ook de property surfaceSwitching. Deze property voegt een optie toe om programmatisch te bepalen of Chrome een knop toont om van tabblad te wisselen tijdens het delen van het scherm. Deze opties worden doorgegeven aan getDisplayMedia(). Met de knop Share this tab instead kunnen gebruikers overschakelen naar een nieuw tabblad zonder terug te gaan naar het tabblad van de videovergadering of een keuze te maken uit een lange lijst met tabbladen. Het gedrag wordt alleen getoond als de web-app dit niet verwerkt.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

MediaTrackConstraintSet voegt ook de property displaySurface toe. Als getDisplayMedia() wordt aangeroepen, biedt de browser de gebruiker een keuze uit weergaveoppervlakken: tabbladen, vensters of schermen. Met de beperking displaySurface kan de web-app nu aan de browser aangeven of deze de voorkeur geeft aan een van de platformtypen die prominenter worden aangeboden.

Zo kun je voorkomen dat je per ongeluk te veel deelt, omdat je standaard één tabblad deelt. Screenshots van de oude en nieuwe prompts van de mediakiezer.

Bronnen identificeren die de weergave blokkeren

Betrouwbare inzichten in de prestaties van een pagina zijn essentieel voor ontwikkelaars om snelle gebruikerservaringen te bieden. Tot nu toe vertrouwden ontwikkelaars op complexe heuristieken om te bepalen of een bron de weergave blokkeert of niet.

De Performance API bevat nu de property renderBlockingStatus. Deze biedt een rechtstreeks signaal van de browser dat de bronnen identificeert die voorkomen dat je pagina wordt weergegeven totdat ze zijn gedownload.

Het codefragment hier toont hoe je een lijst met al je bronnen krijgt en de nieuwe property renderBlockingStatus gebruikt om alle bronnen te vermelden die de weergave blokkeren.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Core Web Vitals en een betere gebruikerservaring zijn afhankelijk van de manier waarop je je bronnen laadt. Ga naar de MDN-documentatie voor meer informatie over de Performance API, zoek naar bronnen die de weergave blokkeren en optimaliseer ze.

Origin trial voor de PendingBeacon API

Met de declaratieve PendingBeacon API kan de browser bepalen wanneer beacons worden gestuurd.

Een beacon is een bundel gegevens die naar een backend-server wordt gestuurd zonder dat er een bepaalde reactie wordt verwacht.

Apps willen deze beacons vaak aan het einde van het bezoek van een gebruiker sturen, maar er is geen goed moment om die verzendoproep te doen. Deze API delegeert het verzenden naar de browser zelf, zodat deze beacons kan ondersteunen op page unload of op page hide, zonder dat de ontwikkelaar verzendoproepen op precies de juiste momenten hoeft te implementeren.

Meld je aan voor de origin trial, probeer de API uit en stuur ons feedback om de use cases te verbeteren.

En meer

En er is nog veel meer.

  • De HTTP-header expect-ct is beëindigd.
  • Het kenmerk rel wordt nu ondersteund voor <form>-elementen.
  • De vorige keer dat ik grid-template-interpolatie noemde, moest deze worden opgenomen.

Aanvullende informatie

Dit zijn maar een paar van de belangrijkste hoogtepunten. Ga naar de links hieronder voor aanvullende wijzigingen in Chrome 107.

Abonneren

Abonneer je op het YouTube-kanaal van Chrome Developers om op de hoogte te blijven. Je krijgt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Adriana Jara en zodra Chrome 108 wordt uitgebracht, vertel ik je hier wat er nieuw is in Chrome.