Novidades no Chrome 124

Pete LePage

Confira os destaques do Chrome 124:

Quer saber todos os detalhes? Confira as notas da versão do Chrome 124.

Usar o DOM paralelo declarativo em JavaScript

Há duas novas APIs que permitem que o DOM sombra declarativo seja usado no JavaScript.

setHTMLUnsafe() é semelhante a innerHTML e permite definir o HTML interno de um elemento para a string fornecida. Isso ajuda quando você tem um HTML que inclui um DOM paralelo declarativo, como este.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Se você usar apenas innerHTML, o navegador não vai analisar corretamente, e não haverá DOM paralelo. Mas com setHTMLUnsafe(), o shadow DOM é criado e o elemento é analisado como esperado.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

A outra API é parseHTMLUnsafe(), e ela funciona de maneira semelhante a DOMParser.parseFromString().

Ambas as APIs são não seguras, o que significa que elas não fazem nenhuma limpeza de entrada. Então, você precisa ter certeza de que o que você alimenta é seguro. Em uma versão futura, esperamos que haja uma versão que forneça a limpeza da entrada.

Por fim, essas duas APIs já têm suporte na versão mais recente do Firefox e do Safari.

API WebSocket Stream

Os WebSockets são uma ótima maneira de enviar dados de um lado para o outro entre o navegador do usuário e o servidor sem precisar depender de polling. Isso é ótimo para apps de chat, em que você quer lidar com as informações assim que elas chegam.

Mas e se os dados chegarem mais rápido do que você pode processar?

Isso é chamado de pressão de retorno e pode causar dores de cabeça. Infelizmente, a API WebSocket não tem uma maneira legal de lidar com a pressão de volta.

A API WebSocket Stream oferece a você a capacidade de streams e sockets da Web, o que significa que a pressão de retorno pode ser aplicada sem nenhum custo extra.

Comece criando uma nova WebSocketStream e transmitindo o URL do servidor WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Em seguida, você espera que a conexão seja aberta, o que resulta em um ReadableStream e um WritableStream. Ao chamar o método ReadableStream.getReader(), você recebe um ReadableStreamDefaultReader do qual pode read() dados até que o fluxo seja concluído.

Para gravar dados, chame o método WritableStream.getWriter(), que fornece um WritableStreamDefaultWriter, para o qual você pode write() dados.

Conferir melhorias nas transições

Estou animado com os recursos de transição de visualização, e há dois novos recursos no Chrome 124 projetados para facilitar as transições de visualização.

O evento pageswap é acionado no objeto de janela de um documento quando uma navegação substitui o documento por um novo.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

E o bloqueio de renderização de documentos, que permite bloquear a renderização de um documento até que o conteúdo crítico seja analisado, garantindo uma primeira pintura consistente em todos os navegadores.

E muito mais.

Claro que há muito mais.

  • disallowReturnToOpener indica ao navegador que não é necessário mostrar um botão na janela de imagem em miniatura que permita ao usuário voltar à guia de abertura.

  • Os contêineres de rolagem com foco no teclado melhoram a acessibilidade tornando os contêineres de rolagem focalizáveis usando a navegação de foco sequencial.

  • E a instalação universal permite que os usuários instalem qualquer página, mesmo aquelas que não atendem aos critérios atuais de PWA.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links a seguir para ver outras mudanças no Chrome 124.

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 125 for lançado, vamos informar as novidades do Chrome.