Novidades no Chrome 107

Adriana Jara

Veja o que é necessário saber:

Meu nome é Adriana Jara. Vamos nos aprofundar e ver as novidades para desenvolvedores do Chrome 107.

Novas propriedades na API Screen Capture

Nesta versão, a API Screen Capture adiciona novas propriedades para melhorar as experiências de compartilhamento de tela.

O DisplayMediaStreamOptions adicionou a propriedade selfBrowserSurface. Com essa dica, o aplicativo pode informar ao navegador que, ao chamar getDisplayMedia(), a guia atual precisa ser excluída.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Ela ajuda a impedir a autocaptura acidental e evita o efeito “Hall of Mirrors” que vimos em videoconferências.

DisplayMediaStreamOptions agora também tem a propriedade surfaceSwitching. Essa propriedade adiciona uma opção para controlar programaticamente se o Chrome mostra um botão para alternar guias durante o compartilhamento de tela. Essas opções serão transmitidas para getDisplayMedia(). O botão Share this tab instead permite que os usuários mudem para uma nova guia sem voltar à guia de videoconferência ou selecionar em uma longa lista de guias, mas o comportamento é exposto condicionalmente caso o aplicativo da Web não o processe.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Além disso, MediaTrackConstraintSet adiciona a propriedade displaySurface. Quando getDisplayMedia() é chamada, o navegador oferece ao usuário a escolha de plataformas de exibição: guias, janelas ou monitores. Usando a restrição displaySurface, o app da Web agora poderá indicar ao navegador se preferir que um dos tipos de superfície seja oferecido com mais destaque.

Por exemplo, ele pode ajudar a evitar o compartilhamento excessivo por acidente, já que o compartilhamento de uma única guia pode ser o padrão. Capturas de tela das solicitações do antigo e do novo seletor de mídia.

Identificar recursos que bloqueiam a renderização

Insights confiáveis sobre o desempenho de uma página são fundamentais para que os desenvolvedores criem experiências do usuário rápidas. Até agora, os desenvolvedores dependiam de heurísticas complexas para determinar se um recurso bloqueia a renderização.

Agora, a API Performance inclui a propriedade renderBlockingStatus, que fornece um sinal direto do navegador identificando os recursos que impedem a exibição da página até que sejam transferidos por download.

O snippet de código mostra como conseguir uma lista de todos os recursos e usar a nova propriedade "renderBlockingStatus" para listar todos os que estão bloqueando a renderização.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Otimizar o carregamento dos recursos ajuda nas Core Web Vitals e a oferecer uma melhor experiência do usuário. Confira a documentação do MDN para saber mais sobre a API Performance, procure os recursos de bloqueio de renderização e otimize.

Teste de origem da API PendingBeacon

A API PendingBeacon declarativa permite que o navegador controle quando os beacons são enviados.

Um beacon é um pacote de dados enviado para um servidor de back-end sem esperar uma resposta específica.

Os aplicativos geralmente querem enviar esses beacons ao final da visita de um usuário, mas não há um bom momento para fazer essa chamada de "envio". Essa API delega o envio ao navegador para que ele possa oferecer suporte a beacons em page unload ou page hide, sem que o desenvolvedor precise implementar chamadas de envio no momento certo.

Inscreva-se no teste de origem, teste a API e envie seu feedback para melhorar os casos de uso.

E muito mais.

Claro que há muito mais.

  • O cabeçalho HTTP expect-ct foi descontinuado.
  • O atributo rel agora é compatível com elementos <form>.
  • Na última vez, mencionei a interpolação grid-template, mas dessa vez ela precisa ser incluída.

Leitura adicional

Isso inclui apenas alguns destaques importantes. Confira os links abaixo para ver outras mudanças no Chrome 107.

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 é Adriana Jara, e assim que o Chrome 108 for lançado, vou estar aqui para contar as novidades do Chrome.