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 carregar antes mesmo da página começar a chegar.
  • A API Local Font Access oferece aos aplicativos da Web a capacidade de enumerar e usar as fontes instaladas no computador do usuário.
  • AbortSignal.timeout() é uma maneira mais fácil de implementar tempos limite em APIs assíncronas.
  • E tem muito mais.

Meu nome é Pete LePage. Vamos nos aprofundar e ver as novidades para desenvolvedores no Chrome 103.

Código de status HTTP 103 103: dicas iniciais

Uma maneira de melhorar o desempenho da página é usar dicas de recursos. Elas dão "dicas" ao navegador sobre o que ele pode precisar mais tarde. Por exemplo, pré-carregar arquivos ou conectar-se a 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">

No entanto, o navegador não pode 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 parado e espera. No entanto, se o servidor souber que a página sempre precisará de um determinado conjunto de subrecursos, por exemplo, um arquivo CSS, alguns JavaScripts e algumas imagens, ele poderá responder imediatamente com o novo código de status HTTP 103 Early Hints e solicitar que o navegador carregue esses subrecursos.

Depois que o servidor gera a página, ele pode enviá-la com a resposta HTTP 200 normal. À medida que a página é exibida, o navegador já começou a carregar os recursos necessários.

Como esse é um novo código de status HTTP, seu uso exige atualizações no servidor.

Começar a usar o HTTP 103 Dicas iniciais:

API Local Font Access

As fontes na Web sempre foram um desafio, especialmente para apps que permitem que os usuários criem os próprios gráficos e designs. Até agora, os apps da Web só podiam usar fontes da Web. Não havia como conseguir uma lista de fontes que o usuário tinha instalado no computador. Além disso, não havia como acessar os dados completos da tabela de fontes, o que é essencial se você precisar implementar sua própria pilha de texto personalizada.

A nova API Local Fonts Access permite que os aplicativos da Web enumerem as fontes locais no dispositivo do usuário e oferece acesso aos dados da tabela de fontes.

Para receber uma lista de 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(). Ela retorna uma matriz de todas as fontes instaladas no dispositivo do usuário.

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ê tiver interesse apenas em um subconjunto de fontes, filtre-as adicionando um parâmetro postscriptNames.

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

Confira o artigo do Tom Usar tipografia avançada com fontes locais (em inglês) no web.dev para ver mais detalhes.

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(), você pode criar um AbortSignal e transmiti-lo para fetch(). Se você quiser cancelar o fetch() antes que ele retorne, chame abort() na instância do AbortSignal. Até agora, se você quisesse que ele fosse abortado após um período específico, seria necessário 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() em AbortSignal. Ele retorna um objeto AbortSignal que é abortado automaticamente após o número especificado 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 que há muito mais.

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

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira as mudanças adicionais no Chrome 103 nos links abaixo.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 104 for lançado, estarei aqui para contar as novidades do Chrome.