Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 97

Pete LePage

Veja o que é necessário saber:

O WebTransport é uma nova opção para enviar mensagens em tempo real entre o cliente e o servidor.
Você pode usar a detecção de recursos para ver quais tipos de scripts um navegador aceita.
Pesquisar matrizes a partir do fim é um pouco mais fácil.
E há muito mais.

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

Transporte da Web

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

Ela tem latência menor que os WebSockets e, ao contrário 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 fluxo e não é confiável com as APIs de datagrama. Ela é compatível com Web workers. Por expor uma interface compatível com Streams, ele oferece suporte a otimizações relacionadas à pressão de retorno.

Para usá-lo, você precisará de um servidor compatível com HTTP/3, o que geralmente é mais fácil do que configurar e manter um servidor WebRTC. Abra uma nova instância WebTransport e aguarde a conexão para começar 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 Experimentos com o WebTransport no web.dev para ver detalhes completos.

Detecção de recurso do tipo de script

Atualmente, podemos usar o atributo nomodule para detectar suporte a módulos JavaScript no navegador. No entanto, há várias propostas de novos recursos no pipeline, 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.

Digite HTMLScriptElement.supports(). Use esse recurso 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

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 efetivamente as mesmas que find() e findIndex(), mas pesquisam do final de uma matriz, e não 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 verifica se o valor é maior que dez.

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 ao Chrome 100, 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 sinalização chamada #force-major-version-to-100 que muda o número da versão atual para 100 para garantir que tudo funcione conforme o esperado.

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

E muito mais.

Claro, 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 torna-se sec-ch-dpr. Vamos continuar oferecendo suporte às versões atuais dessas dicas, mas você precisa planejar a descontinuação e a remoção delas.

Os elementos <details> fechados agora são pesquisáveis e podem ser vinculados. Esses elementos ocultos vão ser expandidos automaticamente quando forem encontrados na página, o ScrollToTextFragment e a navegação de fragmento de elemento for usada.