Novità di Chrome 107

Adriana Jara

Tieni presente quanto segue:

• L'API Screen Capture contiene nuove proprietà per migliorare le esperienze di condivisione schermo.
• Ora puoi identificare con precisione se una risorsa nella tua pagina blocca o meno il rendering.

• Esiste un nuovo modo per inviare dati a un server di backend con l'API PendingBeacon dichiarativa nella prova dell'origine. E non è tutto.

• E c'è molto altro.

Mi chiamo Adriana Jara. Diamo un'occhiata alle 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.

A DisplayMediaStreamOptions è stata aggiunta la proprietà selfBrowserSurface. Con questo suggerimento, l'applicazione può indicare al browser che, quando viene chiamata 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 di videoconferenza o di effettuare una selezione da un lungo elenco di schede, ma il comportamento viene mostrato 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 il browser getDisplayMedia(), l'utente può scegliere tra diverse piattaforme 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 interfaccia venga offerto in modo più evidente.

Ad esempio, può aiutarti a evitare la condivisione eccessiva per errore, poiché la condivisione di una singola scheda può essere l'impostazione predefinita.

Identificare le risorse che bloccano la visualizzazione

Informazioni affidabili sul rendimento di una pagina sono fondamentali per consentire agli sviluppatori di creare esperienze utente rapide. Finora, gli sviluppatori si sono basati su procedure di euristica complesse per determinare se una risorsa blocca il rendering o meno.

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 riportato di seguito 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 aiuta a migliorare i Core Web Vitals e a offrire un'esperienza utente migliore. Consulta la documentazione MDN per scoprire di più sull'API Performance, cerca le risorse che bloccano il rendering 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 insieme di dati inviati a un server di backend, senza che sia prevista una risposta specifica.

Spesso le applicazioni vogliono inviare questi beacon al termine della visita di un utente, ma non esiste un momento ideale per effettuare la chiamata "send". Questa API delega l'invio al browser stesso, quindi può 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 per la prova dell'origine, prova l'API e inviaci un feedback per migliorare i casi d'uso.

E tanto altro.

Ovviamente ce ne sono molti altri.

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

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i link di seguito per altre modifiche in Chrome 107.

• Novità di Chrome DevTools (107)
• Ritiri e rimozioni di Chrome 107
• Aggiornamenti di ChromeStatus.com per Chrome 107
• Elenco delle modifiche al repository di codice sorgente di Chromium
• Calendario delle release di Chrome

Iscriviti

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

Mi chiamo Adriana Jara e non appena uscirà Chrome 108, saranno qui per scoprirti le novità di Chrome.