Novità di Chrome 107

Adriana Jara

Ecco cosa devi sapere:

Sono Adriana Jara. Vediamo le novità per gli sviluppatori in Chrome 107.

Nuove proprietà nell'API Screen Capture

In questa versione, l'API Screen Capture aggiunge nuove proprietà per migliorare le esperienze di condivisione schermo.

DisplayMediaStreamOptions ha aggiunto la proprietà selfBrowserSurface. Con questo suggerimento, l'applicazione può comunicare al browser che, quando viene chiamato getDisplayMedia(), la scheda corrente deve essere esclusa.

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

In questo modo, si evita l'acquisizione accidentale di sé e l'effetto "sala degli specchi" che abbiamo visto nelle videoconferenze.

DisplayMediaStreamOptionsora ha anche la proprietà surfaceSwitching. Questa proprietà aggiunge un'opzione per controllare in modo programmatico se Chrome mostra un pulsante per cambiare scheda durante la condivisione schermo. Queste opzioni verranno passate a getDisplayMedia(). Il pulsante Share this tab instead consente agli utenti di passare a una nuova scheda senza tornare alla scheda della videoconferenza o selezionare da un lungo elenco di schede, ma il comportamento viene esposto in modo condizionale nel caso in cui l'applicazione web non lo gestisca.

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

Inoltre, MediaTrackConstraintSet aggiunge la proprietà displaySurface. Quando viene chiamato getDisplayMedia(), il browser offre all'utente una scelta di superfici di visualizzazione: schede, finestre o monitor. Utilizzando il vincolo displaySurface, l'app web può ora suggerire al browser se preferisce che uno dei tipi di superficie venga offerto in modo più evidente.

Ad esempio, può aiutare a evitare la condivisione eccessiva accidentale, poiché la condivisione di una singola scheda può essere l'impostazione predefinita. Screenshot dei prompt del selettore di contenuti multimediali precedente e di quello nuovo.

Identifica le risorse che bloccano la visualizzazione

Per gli sviluppatori, è fondamentale avere informazioni affidabili sul rendimento di una pagina per creare esperienze utente rapide. Finora, gli sviluppatori si sono affidati a complesse regole euristiche per determinare se una risorsa blocca o meno il rendering.

Ora l'API Performance include la proprietà renderBlockingStatus, che fornisce un indicatore diretto dal browser che identifica le risorse che impediscono la visualizzazione della pagina finché non vengono scaricate.

Lo snippet di codice qui mostra come ottenere un elenco di tutte le risorse e utilizzare la nuova proprietà renderBlockingStatus per elencare tutte quelle che bloccano il rendering.

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

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

L'ottimizzazione del caricamento delle risorse contribuisce a migliorare i Core Web Vitals e a offrire un'esperienza utente migliore. Consulta la documentazione di MDN per scoprire di più sull'API Performance, cerca le risorse che bloccano il rendering e ottimizzale.

Origin trial dell'API PendingBeacon

L'API PendingBeacon dichiarativa consente al browser di controllare quando vengono inviati i beacon.

Un beacon è un bundle di dati inviato a un server di backend, senza aspettarsi una risposta particolare.

Le applicazioni spesso vogliono inviare questi beacon alla fine della visita di un utente, ma non esiste un momento ideale per effettuare la chiamata "send". Questa API delega l'invio al browser stesso, in modo da supportare i beacon su page unload o su page hide, senza che lo sviluppatore debba implementare le chiamate di invio esattamente nei momenti giusti.

Registrati all'origin trial, prova l'API e inviaci un feedback per migliorare i casi d'uso.

E tanto altro.

Ovviamente c'è molto altro.

  • L'intestazione HTTP expect-ct è deprecata.
  • L'attributo rel è ora supportato negli elementi <form>.
  • L'ultima volta ho menzionato l'interpolazione di grid-template, questa volta dovrebbe essere inclusa.

Per approfondire

Questo articolo illustra solo alcuni punti salienti. Consulta i link di seguito per ulteriori modifiche in Chrome 107.

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video.

Sono Adriana Jara e, non appena verrà rilasciato Chrome 108, sarò qui per illustrarti le novità di Chrome.