Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 97

Pete LePage

Veja o que é necessário saber:

WebTransport é uma nova opção para enviar mensagens em tempo real entre o cliente e o servidor.
É possível usar a detecção de recursos para saber quais tipos de scripts um navegador oferece suporte.
A pesquisa de matrizes a partir do final fica um pouco mais fácil.
E há muito mais.

Feliz Ano Novo! Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 97.

Web Transport

Se você estiver usando Sockets da Web ou a API WebRTC Data Channel para enviar mensagens entre o servidor e a página, há uma nova opção para você. A WebTransport é uma nova API que oferece mensagens bidirecionais e de baixa latência entre servidor e cliente.

Ela tem menor latência que os WebSockets e, diferentemente da API RTC Data Channel, projetada para mensagens ponto a ponto, a API Web Transport foi projetada especificamente para mensagens cliente-servidor.

Ele oferece suporte ao envio de dados, de maneira confiável com as APIs de streaming e não confiável com as APIs de datagrama. Ele tem suporte em workers da Web. E, como ele expõe uma interface compatível com o Streams, ele oferece suporte a otimizações de contrapressão.

Para usá-lo, você precisa de um servidor compatível com HTTP/3, que geralmente é mais fácil de configurar e manter do que um servidor WebRTC. Abra uma nova instância de WebTransport, aguarde a conexão e comece a enviar dados.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Confira o artigo Experimentar o WebTransport em web.dev para conferir todos os detalhes.

Detecção de recursos do tipo de script

Hoje, podemos usar o atributo nomodule para detectar o suporte a módulos JavaScript no navegador. Mas há várias propostas de novos recursos em andamento, como mapas de importação, regras de especulação e pré-carregamento de pacotes. Precisamos de uma maneira de saber o que um navegador suporta.

Insira HTMLScriptElement.supports(). Você pode usá-lo para determinar quais tipos de scripts podem ser usados e enviar a melhor opção ao navegador.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Novos protótipos de matriz

Eu adoro quando o JavaScript fica mais fácil. Array e TypedArray agora oferecem suporte aos métodos estáticos findLast() e findLastIndex().

Essas funções são praticamente iguais a find() e findIndex(), mas pesquisam do fim de uma matriz em vez do início.

Por exemplo, para encontrar o último número em uma matriz maior que dez, chame findLast() com uma função de teste que verifique se o valor é maior que dez e pronto.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Emular o Chrome 100 na string UA

Em poucos meses, vamos chegar à versão 100 do Chrome, com um número de versão de três dígitos. Qualquer código que verifique números de versão ou analise a string do UA precisa ser verificado para garantir que ele processe três dígitos.

Há uma flag chamada #force-major-version-to-100 que vai mudar o número da versão atual para 100, para que você possa verificar se tudo está funcionando conforme o esperado.

Página de flags do Chrome destacando a nova opção #force-major-version-to-100

E muito mais.

Claro que há muito mais.

As novas linhas nas entradas de formulário agora são normalizadas da mesma forma que o Gecko e o WebKit, melhorando a interoperabilidade entre os navegadores.

Estamos padronizando os nomes das dicas de cliente com o prefixo sec-ch. Por exemplo, dpr se torna sec-ch-dpr. Vamos continuar oferecendo suporte às versões atuais dessas dicas, mas você precisa se preparar para a eventual descontinuação e remoção delas.

Os elementos <details> fechados agora podem ser pesquisados e vinculados. Esses elementos ocultos são expandidos automaticamente quando o recurso "encontrar na página", ScrollToTextFragment e a navegação de fragmento de elemento são usados.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Consulte os links abaixo para ver mais alterações no Chrome 97.

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 98 for lançado, vou estar aqui para contar as novidades do Chrome.