Novidades no Chrome 124

Pete LePage

Confira os destaques do Chrome 124:

Quer a seleção completa? 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 é útil quando você tem HTML que inclua um shadow DOM 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 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. Por isso, você precisa garantir que tudo o que você alimentá-los esteja 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á são compatíveis com a 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ê consegue lidar?

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.

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 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 empolgado com os recursos de transições de visualização. Dois novos recursos no Chrome 124 foram criados 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 inclui 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, estaremos aqui para contar as novidades do Chrome!