Novità di Chrome 103

Pete LePage

Tieni presente quanto segue:

  • Esiste un nuovo codice di stato HTTP 103 che aiuta il browser a decidere quali contenuti precaricare prima ancora che la pagina inizi a essere visualizzata.
  • L'API Local Font Access consente alle applicazioni web di enumerare e utilizzare i caratteri installati sul computer dell'utente.
  • AbortSignal.timeout() consente di implementare più facilmente i timeout nelle API asincrone.
  • E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 103.

Codice di stato HTTP 103 103 - Primi suggerimenti

Un modo per migliorare il rendimento della pagina è utilizzare gli indizi sulle risorse. Forniscono al browser suggerimenti su quali elementi potrebbero aver bisogno in seguito. Ad esempio, precaricare i file o connettersi a un altro server.

<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ò agire in base a questi suggerimenti finché il server non invia almeno parte della pagina.

Immagina che il browser richieda una pagina, ma che il server richieda alcune centinaia di millisecondi per generarla. Fino a quando il browser non inizia a ricevere 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, del codice JavaScript e alcune immagini, può rispondere immediatamente con il nuovo codice di stato HTTP 103 Early Hints e chiedere al browser di precaricare queste risorse secondarie.

Una volta generata la pagina, il server può inviarla con la normale risposta HTTP 200. Quando la pagina viene visualizzata, 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 gli indicatori iniziali HTTP 103:

API Local Fonts Access

I caratteri sul web sono sempre stati una sfida, in particolare per le app che consentono agli utenti di creare le proprie grafiche e i propri design. Fino a questo momento, le app web potevano utilizzare solo i caratteri web. Non c'era modo di ottenere un elenco dei caratteri che l'utente aveva installato sul proprio computer. Inoltre, non era possibile accedere ai dati completi della tabella dei caratteri, un aspetto fondamentale se devi implementare la tua pila di testo personalizzata.

La nuova API Local Font Access consente alle applicazioni web di enumerare i caratteri locali sul dispositivo dell'utente e fornisce l'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;
  }
}

Poi chiama 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, consulta l'articolo di Tom Utilizzare la tipografia avanzata con i 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 l'operazione fetch() prima che venga restituita, chiama abort() sull'istanza di AbortSignal. Fino a oggi, se volevi che l'operazione venisse interrotta dopo un determinato periodo di tempo, doveva essere inserita 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);

Fortunatamente, questa operazione è ora più semplice grazie a un nuovo metodo statico timeout() su AbortSignal. Restituisce un oggetto AbortSignal che viene interrotto automaticamente dopo il numero specificato di millisecondi. Quello che prima era costituito da alcune 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 ce ne sono molti altri.

  • Il formato file immagine avif è ora condivisibile tramite Web Share
  • Ora Chromium corrisponde a Firefox attivando popstate immediatamente dopo le modifiche dell'URL. L'ordine degli eventi ora è: popstate e poi hashchange su entrambe le piattaforme.
  • Element.isVisible() indica se un elemento è visibile o meno.

Per approfondire

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

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al canale YouTube degli sviluppatori di Chrome: riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 104, sarò qui per dirti le novità di Chrome.