Novità di Chrome 124

Pete LePage

Ecco i punti salienti di Chrome 124:

Vuoi il resoconto completo? Consulta le Note di rilascio di Chrome 124.

Utilizza il DOM shadow dichiarativo in JavaScript

Sono disponibili due nuove API che consentono di utilizzare lo shadow DOM dichiarativo JavaScript.

setHTMLUnsafe() è simile a innerHTML e ti consente di impostare il codice HTML interno di un elemento alla stringa fornita. Questo è utile quando hai 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 usi solo innerHTML, il browser non lo analizzerà correttamente e senza shadow DOM. Con setHTMLUnsafe(), però, viene creato il tuo DOM shadow e 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 alcun input la sanificazione. Dovrai quindi assicurarti che qualsiasi cosa tu fornisca loro sia sicura. In una prossima release, prevediamo una versione che fornisce la sanificazione 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 scambiare dati tra browser e il server senza dover fare affidamento sul polling. È ideale per ad esempio le app di chat, per cui vuoi gestire le informazioni non appena vengono entra in gioco.

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 è un buon modo per gestire pressione.

L'API WebSocket Stream fornisce la potenza di flussi e prese web, il che significa che la contropressione può senza costi aggiuntivi.

Inizia creando un nuovo WebSocketStream e passandogli l'URL del 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);
}

Attendi che la connessione venga aperta, con conseguente in ReadableStream e WritableStream. Chiamando il metodo metodo ReadableStream.getReader(), si ottiene un ReadableStreamDefaultReader Da cui puoi read() dati fino al termine dello stream.

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

Visualizza miglioramenti alle transizioni

Sono entusiasta delle funzioni di View Transiziones e ci sono due nuove funzioni di Chrome 124 progettato per semplificare le transizioni di visualizzazione.

L'evento pageswap viene attivato sull'oggetto della finestra di un documento durante una navigazione lo sostituirà con uno nuovo.

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

Blocco del rendering del documento, che consente di bloccare il rendering fino all'analisi dei contenuti critici, per garantire una prima visualizzazione coerente su tutti i browser.

E tanto altro.

Naturalmente c'è molto altro.

  • disallowReturnToOpener Suggerimenti al browser per impedire la visualizzazione di un pulsante nella modalità Picture in picture che consente all'utente di tornare alla scheda di apertura.

  • Contenitori di scorrimento attivabili da tastiera migliora l'accessibilità rendendo attivabili i container di scorrimento usando navigazione dello stato attivo.

  • L'installazione universale consente agli utenti di installare qualsiasi pagina, anche quelle non che soddisfino gli attuali criteri per le PWA.

Per approfondire

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

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al Canale YouTube per sviluppatori di Chrome, e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Sono Pete LePage e non appena verrà rilasciato Chrome 125, saremo qui per dirti le novità di Chrome.