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.
- Note di rilascio di Chrome 124
- Novità di Chrome DevTools (124)
- Aggiornamenti di ChromeStatus.com per Chrome 124
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario delle release di Chrome
Abbonati
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.