Novità di Chrome 103

Pete LePage

Tieni presente quanto segue:

  • È disponibile un nuovo codice di stato HTTP 103 che aiuta il browser a decidere quali contenuti precaricare prima ancora che la pagina inizi a arrivare.
  • L'API Local Font Access consente alle applicazioni web di enumerare e utilizzare i caratteri installati sul computer dell'utente.
  • AbortSignal.timeout() è un modo più semplice per implementare i timeout sulle API asincrone.
  • E ce ne sono molte altre.

Mi chiamo Pete LePage. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 103.

Codice di stato HTTP 103 103 - Primi suggerimenti

Un modo per migliorare le prestazioni delle pagine consiste nell'utilizzare gli hint delle risorse. Forniscono al browser "suggerimenti" su quali contenuti potrebbe aver bisogno in seguito. Ad esempio, il precaricamento dei file o la connessione a un server diverso.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Tuttavia, il browser non può intervenire su questi suggerimenti finché il server non invia almeno una parte della pagina.

Immagina che il browser richieda una pagina, ma il server richiede alcune centinaia di millisecondi per generarla. Fino a quando il browser non riceve la pagina, rimane in attesa. Tuttavia, se il server sa che la pagina avrà sempre bisogno di un determinato insieme di risorse secondarie, ad esempio un file CSS, codice JavaScript e alcune immagini, potrà rispondere immediatamente con il nuovo codice di stato HTTP 103 e chiedere al browser di precaricare le sottorisorse.

Dopo che il server ha generato la pagina, può inviarla con la normale risposta HTTP 200. All'arrivo della pagina, il browser ha già iniziato a caricare le risorse richieste.

Poiché si tratta di un nuovo codice di stato HTTP, il suo utilizzo richiede aggiornamenti al server.

Inizia a utilizzare i suggerimenti iniziali HTTP 103:

API Local Font Access

I caratteri sul web sono sempre stati una sfida, soprattutto per le app che consentono agli utenti di creare le proprie grafiche e design. Finora le app web potevano utilizzare solo caratteri web. Non c'era modo di ottenere un elenco di caratteri che l'utente aveva installato sul suo computer. Inoltre, non c'era modo di accedere ai dati completi della tabella dei caratteri, fondamentale se avessi bisogno di implementare uno stack di testo personalizzato.

La nuova API Local Font Access consente alle applicazioni web di enumerare i caratteri locali sul dispositivo dell'utente e fornisce accesso ai dati della tabella dei caratteri.

Per ottenere un elenco dei caratteri installati sul dispositivo, devi prima richiedere l'autorizzazione.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Dopodiché chiama il numero window.queryLocalFonts(). Restituisce un array di tutti i caratteri installati sul dispositivo dell'utente.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Se ti interessa solo un sottoinsieme di caratteri, puoi filtrarli aggiungendo un parametro postscriptNames.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Per informazioni complete, leggi l'articolo di Tom Usare la tipografia avanzata con caratteri locali su web.dev.

Timeout più semplici con AbortSignal.timeout()

In JavaScript, AbortController e AbortSignal vengono utilizzati per annullare una chiamata asincrona.

Ad esempio, quando effettui una richiesta fetch(), puoi creare un AbortSignal e passarlo a fetch(). Se vuoi annullare fetch() prima che venga restituito, chiama abort() sull'istanza di AbortSignal. Finora, se vuoi interromperla dopo un determinato periodo di tempo, dovevi racchiuderla in un setTimeout().

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Per fortuna, tutto è ancora più semplice con un nuovo metodo statico timeout() in AbortSignal. Restituisce un oggetto AbortSignal che viene automaticamente interrotto dopo il numero di millisecondi specificato. Quella che prima era una manciata di righe di codice, ora è solo una.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() è supportato in Chrome 103 ed è già disponibile in Firefox e Safari.

E tanto altro.

Ovviamente c'è molto altro.

  • Il formato del file immagine avif è ora condivisibile tramite condivisione web
  • Ora Chromium corrisponde a Firefox attivando popstate subito dopo la modifica dell'URL. Attualmente l'ordine degli eventi è: popstate, poi hashchange su entrambe le piattaforme.
  • Inoltre, Element.isVisible() indica se un elemento è visibile o meno.

Per approfondire

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

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.

Sono Pete LePage e non appena verrà rilasciata la versione 104 di Chrome, sarò qui per farti conoscere le novità di Chrome.