Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 124

Pete LePage

Estes são os destaques do Chrome 124:

Há duas novas APIs que permitem que o shadow DOM declarativo seja usado no JavaScript.
Você pode usar streams no Web Sockets.
As transições de visualização ficam um pouco melhores.
E há muito mais.

Quer ver a apresentação completa? Confira as notas da versão do Chrome 124.

Usar o shadow DOM declarativo em JavaScript

Há duas novas APIs que permitem que o shadow DOM 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 HTML que inclui um shadow DOM declarativo, como esse.

<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 analisá-lo corretamente e não há um shadow DOM. No entanto, com setHTMLUnsafe(), o shadow DOM é criado e o elemento é analisado conforme o 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().

Essas duas APIs são não seguras, o que significa que não realizam nenhuma limpeza de entrada. Por isso, certifique-se de que o que você alimentá-los é seguro. Em uma próxima versão, esperamos ver uma versão que ofereça limpeza da entrada.

Por fim, ambas as 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 entre o navegador do usuário e o servidor sem precisar de uma pesquisa. Isso é ótimo para aplicativos de bate-papo, em que você quer lidar com informações assim que elas chegam, por exemplo.

Mas e se os dados chegarem mais rápido do que você consegue suportar?

Isso é chamado de pressão de retorno e pode causar algumas sérias dores de cabeça para você. Infelizmente, a API WebSocket não tem uma boa maneira de lidar com a pressão de retorno.

A API WebSocket Stream fornece a capacidade de streams e soquetes da Web, o que significa que a capacidade de retorno pode ser aplicada sem nenhum custo extra.

Comece construindo um novo 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, aguarde a conexão ser 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() usar dados até que o stream seja concluído.

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

Melhorias nas transições de visualização

Estou empolgado com os recursos de transições de visualização. Há dois novos recursos no Chrome 124 projetados para facilitar essas transições.

O evento pageswap é disparado no objeto da 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 essencial seja analisado, garantindo uma primeira exibição consistente em todos os navegadores.

E muito mais.

Claro, há muito mais.

disallowReturnToOpener indica ao navegador que ele não precisa mostrar um botão na janela picture-in-picture que permite que o usuário volte à guia que o abre.
Os contêineres de rolagem com foco no teclado melhoram a acessibilidade, tornando esses contêineres 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.

Novidades no Chrome 124

Usar o shadow DOM declarativo em JavaScript

API WebSocket Stream

Melhorias nas transições de visualização

E muito mais.

Leia mais

Fazer inscrição