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 consente di impostare l'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 ci sarà 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 sanificazione 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 cosa succede se i dati arrivano più velocemente di quanto sia possibile gestire?

Questa situazione si chiama "contropressione" e può causare gravi mal di testa. Purtroppo, l'API WebSocket non ha un modo pratico per gestire la pressione in coda.

L'API WebSocket Stream offre la potenza di flussi e web socket, il che significa che la contropressione 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);
}

Successivamente, attendi che la connessione venga aperta, che genera un ReadableStream e un WritableStream. Chiamando il metodo ReadableStream.getReader(), ottieni un ReadableStreamDefaultReader da cui potrai read() dati fino al termine del flusso.

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 PiP 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

Vengono illustrati solo alcuni dei punti salienti. Consulta i seguenti link per altre modifiche in Chrome 124.

Iscriviti

Per rimanere al passo con le 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.