Nieuw in Chrome 107

Adriana Jara

Dit is wat u moet weten:

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

Nieuwe eigenschappen in Screen Capture API

In deze versie voegt de Screen Capture API nieuwe eigenschappen toe om de ervaringen met het delen van schermen te verbeteren.

De DisplayMediaStreamOptions hebben de eigenschap selfBrowserSurface toegevoegd. Met deze hint kan de toepassing de browser vertellen dat bij het aanroepen getDisplayMedia() het huidige tabblad moet worden uitgesloten.

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

Het helpt onbedoelde zelfopname te voorkomen en vermijdt het “Hall of Mirrors”-effect dat we bij videoconferenties hebben gezien.

DisplayMediaStreamOptions heeft nu ook de eigenschap surfaceSwitching . Deze eigenschap voegt een optie toe om programmatisch te bepalen of Chrome een knop weergeeft om tussen tabbladen te schakelen tijdens het delen van het scherm. Deze opties worden doorgegeven aan getDisplayMedia() . Met de knop ' Share this tab instead kunnen gebruikers naar een nieuw tabblad overschakelen zonder terug te gaan naar het tabblad voor videoconferenties of te kiezen uit een lange lijst met tabbladen, maar het gedrag wordt voorwaardelijk weergegeven voor het geval de webapplicatie dit niet verwerkt.

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

Ook MediaTrackConstraintSet voegt de eigenschap displaySurface toe. Wanneer getDisplayMedia() wordt aangeroepen, biedt de browser de gebruiker een keuze uit weergaveoppervlakken: tabbladen, vensters of monitoren. Met behulp van de displaySurface beperking kan de web-app nu een hint geven aan de browser als deze er de voorkeur aan geeft dat een van de oppervlaktetypen prominenter wordt aangeboden.

Het kan bijvoorbeeld helpen voorkomen dat er per ongeluk te veel wordt gedeeld , omdat het delen van één tabblad de standaardinstelling kan zijn. Schermafbeeldingen van de aanwijzingen voor de oude en nieuwe mediakiezer.

Identificeer bronnen die weergave blokkeren

Betrouwbare inzichten in de prestaties van een pagina zijn van cruciaal belang voor ontwikkelaars om snelle gebruikerservaringen op te bouwen. Tot nu toe hebben ontwikkelaars vertrouwd op complexe heuristieken om te bepalen of een bron weergaveblokkering veroorzaakt of niet.

De Performance API bevat nu de eigenschap renderBlockingStatus die een direct signaal van de browser levert dat de bronnen identificeert die voorkomen dat uw pagina wordt weergegeven totdat ze worden gedownload.

Het codefragment hier laat zien hoe u een lijst met al uw bronnen kunt krijgen en de nieuwe eigenschap renderBlockingStatus kunt gebruiken om alle bronnen weer te geven die weergaveblokkering veroorzaken.

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

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

Het optimaliseren van de manier waarop u uw bronnen laadt, helpt bij Core Web Vitals en bij het bieden van een betere gebruikerservaring. Bekijk de MDN-documentatie voor meer informatie over de Performance API , zoek naar bronnen die de weergave blokkeren en optimaliseer deze.

In afwachting van een proefversie van de API-oorsprong

Met de declaratieve PendingBeacon API kan de browser bepalen wanneer bakens worden verzonden.

Een beacon is een bundel gegevens die naar een backend-server wordt verzonden, zonder een bepaald antwoord te verwachten.

Applicaties willen deze bakens vaak aan het einde van het bezoek van een gebruiker verzenden, maar er is geen goed moment om dat 'verzenden'-oproep te doen. Deze API delegeert het verzenden naar de browser zelf, zodat deze bakens bij page unload of on page hide kan ondersteunen, zonder dat de ontwikkelaar send-oproepen op precies de juiste momenten hoeft te implementeren.

Meld u aan voor de origin-proefperiode , probeer de API eens en stuur ons feedback om de gebruiksscenario's te verbeteren.

En meer!

Natuurlijk is er nog veel meer.

  • De http-header expect-ct is verouderd.
  • Het rel attribuut wordt nu ondersteund op <form> -elementen.
  • De laatste keer dat ik grid-template interpolatie noemde, zou het deze keer moeten worden opgenomen.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 107.

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