Novità di Chrome 97

Pete LePage

Tieni presente quanto segue:

Buon anno! Mi chiamo Pete LePage. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 97.

Trasporto web

Se utilizzi Web Socket o l'API WebRTC Data Channel per inviare messaggi tra il tuo server e la pagina, hai a disposizione una nuova opzione. WebTransport è una nuova API che offre messaggistica client-server a bassa latenza e bidirezionale.

Ha una latenza inferiore rispetto a WebSocket e a differenza dell'API RTC Data Channel, progettata per la messaggistica peer-to-peer, l'API Web Transport è progettata appositamente per la messaggistica client-server.

Supporta l'invio di dati in modo affidabile con le sue API Stream e in modo inaffidabile con le sue API datagram. È supportato nei web worker. Espone un'interfaccia conforme a Streams, quindi supporta le ottimizzazioni in caso di contropressione.

Per utilizzarlo, è necessario un server che supporti HTTP/3, che in genere è più semplice rispetto all'impostazione e alla gestione di un server WebRTC. Apri una nuova istanza WebTransport, attendi che si connetta e potrai iniziare a inviare i dati.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Per informazioni dettagliate, consulta l'articolo Esperimenti con WebTransport su web.dev.

Rilevamento delle funzionalità del tipo di script

Oggi possiamo utilizzare l'attributo nomodule per rilevare il supporto per i moduli JavaScript nel browser. Tuttavia, nella pipeline sono presenti diverse proposte di nuove funzionalità, come l'importazione di mappe, regole di speculazione e il precaricamento dei bundle. Abbiamo bisogno di un modo per sapere cosa supporta un browser.

Inserisci HTMLScriptElement.supports(). Puoi utilizzarlo per determinare quali tipi di script puoi utilizzare e inviare al browser l'opzione migliore.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Nuovi prototipi di array

Mi piace quando JavaScript diventa più semplice. Array e TypedArray ora supportano i metodi statici findLast() e findLastIndex().

Queste funzioni sono in pratica le stesse di find() e findIndex(), ma eseguono la ricerca dalla fine di un array anziché dall'inizio.

Ad esempio, per trovare l'ultimo numero in un array maggiore di dieci, chiama findLast() con una funzione di test che verifichi se il valore è maggiore di dieci e il gioco è fatto.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Emula Chrome 100 nella stringa UA

Tra pochi mesi arriveremo a Chrome 100, un numero di versione a tre cifre. Qualsiasi codice che controlla i numeri di versione o analizza la stringa UA deve essere controllato per assicurarsi che gestisca tre cifre.

Esiste un flag chiamato #force-major-version-to-100 che modificherà il numero di versione corrente in 100, in modo che tu possa assicurarti che tutto funzioni come previsto.

Chrome segnala la pagina con in evidenza la nuova opzione #force-major-version-to-100

E tanto altro.

Ovviamente c'è molto altro.

Le nuove righe nelle voci dei moduli ora sono normalizzate allo stesso modo di Gecko e WebKit, migliorando l'interoperabilità tra i browser.

Stiamo standardizzando i nomi dei suggerimenti client aggiungendo il prefisso sec-ch. Ad esempio, dpr diventa sec-ch-dpr. Continueremo a supportare le versioni esistenti di questi suggerimenti, ma ti consigliamo di prevederne il ritiro e la rimozione finali.

Gli elementi <details> chiusi sono ora disponibili per la ricerca e possono essere collegati. Questi elementi nascosti si espanderanno automaticamente quando viene utilizzata la funzionalità Trova nella pagina, ScrollToTextFragment e la navigazione dei frammenti di elementi.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 97.

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 98 di Chrome, sarò qui per farti conoscere le novità di Chrome.