Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 103

Pete LePage

Veja o que é necessário saber:

Há um novo código de status HTTP 103 que ajuda o navegador a decidir qual conteúdo pré-carregar antes que a página comece a chegar.
A API Local Font Access oferece aos aplicativos da Web a capacidade de enumerar e usar fontes instaladas no computador do usuário.
O AbortSignal.timeout() é uma maneira mais fácil de implementar tempos limite em APIs assíncronas.
E há muito mais.

Meu nome é Pete LePage. Vamos conhecer as novidades para desenvolvedores no Chrome 103.

Código de status HTTP 103 103 - dicas antecipadas

Uma maneira de melhorar o desempenho da página é usar dicas de recursos. Elas dão ao navegador "dicas" sobre o que pode ser necessário mais tarde. Por exemplo, pré-carregamento de arquivos ou conexão com um servidor diferente.

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

Mas o navegador não consegue agir com base nessas dicas até que o servidor envie pelo menos parte da página.

Imagine que o navegador solicita uma página, mas o servidor precisa de algumas centenas de milissegundos para gerá-la. Até que o navegador comece a receber a página, ele fica esperando. No entanto, se o servidor souber que a página sempre precisará de um determinado conjunto de sub-recursos, por exemplo, um arquivo CSS, um pouco de JavaScript e algumas imagens, ele poderá responder imediatamente com o novo código de status HTTP 103 Early Hints e solicitar que o navegador pré-carregue esses subrecursos.

Depois que o servidor gerar a página, ele poderá enviá-la com a resposta HTTP 200 normal. Quando a página chega, o navegador já começou a carregar os recursos necessários.

Como esse é um novo código de status HTTP, usá-lo requer atualizações para seu servidor.

Introdução ao HTTP 103 Early Tips:

API Local Font Access

Fontes na Web sempre foram um desafio, especialmente para apps que permitem aos usuários criar os próprios gráficos e designs. Até agora, os aplicativos da Web só podiam usar fontes da Web. Não havia uma maneira de extrair uma lista de fontes que o usuário instalou no computador. Além disso, não havia como acessar os dados completos da tabela de fontes, o que é essencial para implementar sua própria pilha de texto personalizada.

A nova API Local Font Access oferece aos aplicativos da Web a capacidade de enumerar as fontes locais no dispositivo do usuário e fornece acesso aos dados da tabela de fontes.

Para ver uma lista das fontes instaladas no dispositivo, primeiro é necessário solicitar permissão.

// 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;
  }
}

Em seguida, chame window.queryLocalFonts(). Ele retorna uma matriz de todas as fontes instaladas no dispositivo dos usuários.

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 você estiver interessado apenas em um subconjunto de fontes, poderá filtrá-las adicionando um parâmetro postscriptNames.

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

Confira o artigo de Tom Usar tipografia avançada com fontes locais em web.dev para ver detalhes completos.

Tempos limite mais fáceis com AbortSignal.timeout()

Em JavaScript, AbortController e AbortSignal são usados para cancelar uma chamada assíncrona.

Por exemplo, ao fazer uma solicitação fetch(), é possível criar um AbortSignal e transmiti-lo para fetch(). Se você quiser cancelar a fetch() antes que ela retorne, chame abort() na instância de AbortSignal. Até agora, se você quisesse que ele fosse cancelado após um período específico, você precisaria envolvê-lo em um setTimeout().

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

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

Felizmente, isso ficou mais fácil com um novo método estático timeout() no AbortSignal. Ela retorna um objeto AbortSignal que é cancelado automaticamente após o número determinado de milissegundos. O que costumava ser um punhado de linhas de código, agora é apenas uma.

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

O AbortSignal.timeout() é compatível com o Chrome 103 e já está disponível no Firefox e no Safari.

E muito mais.

Claro, há muito mais.

O formato de arquivo de imagem avif agora pode ser compartilhado pelo Web Share
O Chromium agora corresponde ao Firefox disparando popstate imediatamente após as alterações do URL. A ordem dos eventos agora é: popstate e depois hashchange nas duas plataformas.
E Element.isVisible() informa se um elemento está visível ou não.

Observação:no vídeo, mencionei que o Element.isVisible() está disponível na versão estável, mas no momento só está disponível atrás de uma flag de recurso.

Novidades no Chrome 103

Código de status HTTP 103 103 - dicas antecipadas

API Local Font Access

Tempos limite mais fáceis com AbortSignal.timeout()

E muito mais.

Leia mais

Fazer inscrição