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:
- Explicação para dicas iniciais
- Configuração do Apache 2 Early Hints
- Como usar dicas iniciais no Cloudflare
- Fastly Beyond Server Push: 103 Early Hints Status Code (link em inglês)
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 depoishashchange
nas duas plataformas. - E
Element.isVisible()
informa se um elemento está visível ou não.
Leia mais
Esses são apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 103.
- Novidades do Chrome DevTools (103)
- Descontinuações e remoções do Chrome 103
- Atualizações do ChromeStatus.com para o Chrome 103
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
Fazer inscrição
Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá 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 dizer as novidades do Chrome.