Novità di Chrome 107

Adriana Jara

Tieni presente quanto segue:

  • L'API Screen Capture offre nuove proprietà per migliorare le esperienze di condivisione dello schermo.
  • Ora puoi identificare con precisione se una risorsa sulla tua pagina si blocca o meno.

  • Esiste un nuovo modo per inviare dati a un server di backend con l'API PendingBeacon dichiarativa in fase di prova dell'origine. Ma c'è molto altro.

  • E ce ne sono molte altre.

Mi chiamo Adriana Jara. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 107.

Nuove proprietà nell'API Screen Capture

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

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

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

Aiuta a prevenire l'acquisizione automatica accidentale ed evita l'effetto "Hall of Mirrors" 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 Videoconferenze o fare clic su 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);

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

Ad esempio, aiuta a prevenire la condivisione eccessiva per errore, poiché la condivisione di una singola scheda può essere l'impostazione predefinita. Screenshot dei messaggi del selettore media precedente e di quello nuovo.

Identifica le risorse di blocco della visualizzazione

Informazioni affidabili sulle prestazioni di una pagina sono fondamentali per gli sviluppatori per creare esperienze utente veloci. Finora, gli sviluppatori hanno fatto affidamento su euristiche complesse per determinare se una risorsa blocca il rendering o meno.

Ora l'API Performance include la proprietà renderBlockStatus che fornisce un indicatore diretto dal browser che identifica le risorse che impediscono la visualizzazione della pagina fino a quando non vengono scaricate.

Lo snippet di codice riportato qui mostra come ottenere un elenco di tutte le risorse e utilizzare la nuova proprietà renderingBlockStatus per elencare tutte le risorse che bloccano la visualizzazione.

// 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 delle modalità di caricamento delle risorse è utile per i Segnali web essenziali e, con l'offerta di una migliore esperienza utente, consulta la documentazione MDN per saperne di più sull'API Performance, cerca le risorse che bloccano la visualizzazione e ottimizzale.

Prova dell'origine dell'API PendingBeacon

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

Un beacon è un gruppo di dati inviato a un server di backend senza aspettarsi una risposta specifica.

Spesso le applicazioni desiderano inviare questi beacon alla fine della visita di un utente, ma non c'è momento adatto per effettuare la chiamata di invio. Questa API delega l'invio al browser stesso, quindi può supportare i beacon su page unload o page hide, senza che lo sviluppatore debba implementare l'invio delle chiamate al momento giusto.

Registrati per la prova dell'origine, prova l'API e inviaci un feedback per aiutarci a migliorare i casi d'uso.

E tanto altro.

Ovviamente c'è molto altro.

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

Per approfondire

Vengono trattati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 107.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Sono Adriana Jara e non appena uscirà Chrome 108 sarò qui per raccontarti le novità di Chrome.