Novità di Chrome 124

Pete LePage

Ecco i punti salienti di Chrome 124:

Vuoi avere una panoramica completa? Consulta le note di rilascio di Chrome 124.

Utilizzare il DOM shadow dichiarativo in JavaScript

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

setHTMLUnsafe() è simile a innerHTML e ti consente di impostare il codice HTML interno di un elemento sulla stringa fornita. Questo è utile quando hai del codice HTML che include un DOM ombra 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 solo innerHTML, il browser non lo analizzerà correttamente e non c'è DOM ombra. Tuttavia, con setHTMLUnsafe(), il DOM shadow viene creato 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 convalida degli input. Quindi, assicurati che tutto ciò che dai loro sia sicuro. In una release futura, prevediamo di vedere una versione che fornisca la sanitizzazione dell'input.

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

API WebSocket Stream

WebSocket sono un ottimo modo per inviare dati avanti e indietro tra il browser dell'utente e il server senza dover fare affidamento su polling. È ideale per app di chat, ad esempio, in cui vuoi gestire le informazioni non appena vengono ricevute.

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

Si tratta di una situazione nota come contropressione e può causare seri problemi. Purtroppo, l'API WebSocket non ha un modo pratico per gestire la pressione in coda.

L'API WebSocket Stream ti offre la potenza degli stream e dei web socket, il che significa che la back pressure può essere applicata senza costi aggiuntivi.

Per iniziare, crea un nuovo WebSocketStream e passagli 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);
}

Poi attendi che la connessione venga aperta, ottenendo un ReadableStream e un WritableStream. Se chiami il metodo ReadableStream.getReader(), ottieni un ReadableStreamDefaultReader da cui puoi read() i dati fino al termine dello stream.

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

Miglioramenti alle transizioni di visualizzazione

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

L'evento pageswap viene attivato nell'oggetto window di un documento quando un'azione di navigazione sostituirà il documento con un nuovo documento.

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

E il blocco del rendering del documento, che ti consente di bloccare il rendering di un documento fino a quando i contenuti critici non sono stati analizzati, garantendo un primo rendering coerente su tutti i browser.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • disallowReturnToOpener suggerisce al browser di non mostrare un pulsante nella finestra Picture in Picture che consenta all'utente di tornare alla scheda di apertura.

  • I contenitori di scorrimento attivabili da tastiera migliorano l'accessibilità rendendo attivabili da tastiera i contenitori di scorrimento tramite la navigazione da tastiera sequenziale.

  • L'installazione universale consente agli utenti di installare qualsiasi pagina, anche quelle che nonsoddisfano i criteri attuali delle PWA.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per altre modifiche in Chrome 124.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 125, sarò qui per dirti quali sono le novità di Chrome.