Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di Chrome 124

Pete LePage

Ecco i punti salienti della versione 124 di Chrome:

Esistono due nuove API che consentono di utilizzare lo shadow DOM dichiarativo da JavaScript.
Puoi utilizzare gli stream nei socket web.
Migliora la funzionalità Visualizza transizioni.
E ce ne sono molte altre.

Vuoi l'intero run down? Consulta le note di rilascio di Chrome 124.

Utilizza shadow DOM dichiarativo in JavaScript

Esistono due nuove API che consentono di utilizzare lo shadow DOM dichiarativo da JavaScript.

setHTMLUnsafe() è simile a innerHTML e consente di impostare il codice HTML interno di un elemento sulla stringa fornita. È utile se hai un codice HTML che include uno shadow DOM dichiarativo, come questo.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Se utilizzi semplicemente innerHTML, il browser non lo analizza correttamente e non è presente shadow DOM. Tuttavia, con setHTMLUnsafe() viene creato lo shadow DOM e l'elemento viene analizzato come previsto.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

L'altra API è parseHTMLUnsafe() e funziona in modo simile a DOMParser.parseFromString().

Entrambe queste API sono non sicure, il che significa che non eseguono alcuna sanitizzazione dell'input. Pertanto, assicurati che tutto ciò che fornisci loro sia al sicuro. In una release futura, prevediamo una versione che fornisce la sanitizzazione dell'input.

Infine, entrambe le API sono già supportate nell'ultima versione di Firefox e Safari.

API WebSocket Stream

I WebSocket sono un ottimo modo per inviare e ricevere dati tra il browser dell'utente e il server senza dover fare affidamento sul polling. Questo è ottimo per cose come le app di chat, in cui vuoi gestire le informazioni non appena arrivano.

Ma cosa succede se i dati arrivano più velocemente di quanto tu possa gestire?

Questo si chiama "contropressione" e può causare gravi mal di testa. Sfortunatamente, l'API WebSocket non ha un modo piacevole per affrontare la contropressione.

L'API WebSocket Stream offre la potenza dei flussi e dei socket web, il che significa che è possibile applicare contropressione senza costi aggiuntivi.

Inizia creando un nuovo WebSocketStream e passandogli l'URL del server WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Successivamente, attendi l'apertura della connessione, che genera ReadableStream e WritableStream. Chiamando il metodo ReadableStream.getReader(), ottieni un ReadableStreamDefaultReader da cui potrai read() i dati fino al termine dello stream.

Per scrivere dati, chiama il metodo WritableStream.getWriter(), che ti fornisce un WritableStreamDefaultWriter, in cui puoi write() i dati.

Visualizza i miglioramenti delle transizioni

Sono entusiasta delle funzionalità di View Transiziones e in Chrome 124 sono disponibili due nuove funzionalità progettate per semplificare le transizioni delle visualizzazioni.

L'evento pageswap viene attivato sull'oggetto della finestra di un documento quando una navigazione sostituisce il documento con un nuovo documento.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Inoltre, il blocco del rendering dei documenti consente di bloccare il rendering di un documento fino all'analisi dei contenuti critici, assicurando una prima visualizzazione coerente in tutti i browser.

E tanto altro.

Ovviamente c'è molto altro.

disallowReturnToOpener indica al browser di non mostrare un pulsante nella finestra Picture in picture che consente all'utente di tornare alla scheda di apertura.
I contenitori di scorrimento attivabili dalla tastiera migliorano l'accessibilità rendendoli attivabili tramite la navigazione con stato attivo sequenziale.
Inoltre, l'installazione universale consente agli utenti di installare qualsiasi pagina, anche quelle che non soddisfano i criteri attuali delle PWA.

Per approfondire

Vengono trattati solo alcuni punti salienti. Controlla i seguenti link per ulteriori modifiche in Chrome 124.

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.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 125 di Chrome, saremo qui per dirti le novità di Chrome.