Novidades no Chrome 124

Pete LePage

Estes são os destaques do Chrome 124:

Quer a seleção completa? Consulte o Notas de lançamento do Chrome 124.

Usar o shadow DOM declarativo no JavaScript

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

setHTMLUnsafe() é semelhante a innerHTML e permite definir o HTML interno de um elemento à string fornecida. Isso ajuda quando você tem HTML que inclui 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 analisá-lo corretamente, e há sem o shadow DOM. No entanto, com a setHTMLUnsafe(), o shadow DOM é criado e a é analisado conforme o esperado.

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

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

As duas APIs não são seguras, ou seja, não fazem entrada sanitização. Por isso, você precisa garantir que tudo o que você alimentá-los esteja seguro. Em uma próxima versão, esperamos ver uma versão que forneça sanitização da entrada.

Por fim, essas duas APIs já são suportadas na versão mais recente do Firefox e Safari!

API WebSocket Stream

Os WebSockets são uma ótima maneira de enviar dados para a interface do usuário navegador e o servidor sem depender de sondagem. Isso é ótimo para como apps de chat, em que você lida com informações assim que novos dados chegam.

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

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

A API WebSocket Stream oferece a potência dos streams e dos web sockets, o que significa que a pressão de entrada pode ser aplicada sem nenhum custo extra.

Comece construindo 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, aguarde a conexão ser aberta, o que resulta em um ReadableStream e um WritableStream. Ao chamar o método método ReadableStream.getReader(), você recebe um ReadableStreamDefaultReader do qual é possível read() dados até que o stream seja concluído.

Para gravar dados, chame o método WritableStream.getWriter(), que fornece uma WritableStreamDefaultWriter, que podem ser usados para write().

Melhorias nas transições de visualização

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

O evento pageswap é disparado no objeto de janela de um documento quando uma navegação substituirá o documento por um novo.

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

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

E muito mais.

É claro que há muito mais.

  • disallowReturnToOpener dicas para o navegador de que ele não deve mostrar um botão no modo picture-in-picture que permite ao usuário voltar para a guia de abertura.

  • Contêineres de rolagem com foco no teclado melhora a acessibilidade tornando os contêineres de rolagem focalizáveis usando navegação por foco.

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

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links a seguir para mudanças adicionais no Chrome 124.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e você receberá 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.