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() è un modo più semplice per implementare 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 - suggerimenti iniziali

Un modo per migliorare il rendimento della pagina è utilizzare gli indizi sulle risorse. Forniscono al browser "suggerimenti" su ciò di cui potrebbe aver bisogno in un secondo momento. 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ò eseguire azioni in base a questi suggerimenti finché il server non invia almeno parte della pagina.

Immagina che il browser richieda una pagina, ma 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 la propria grafica e i propri design. Fino a ora, le app web potevano utilizzare solo i caratteri web. Non era possibile ottenere un elenco dei caratteri installati dall'utente sul suo 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 Condivisione web
  • 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

Sono riportati solo alcuni dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 103.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

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