Novidades no Chrome 107

Adriana Jara

O que você precisa saber:

Sou Adriana Jara. Vamos conferir as novidades para desenvolvedores no 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);

Isso ajuda a evitar a captura acidental de si mesmo e o efeito de "sala de espelhos" que vemos em videoconferências.

DisplayMediaStreamOptionsagora também tem a propriedade surfaceSwitching. Essa propriedade adiciona uma opção para controlar de forma programática 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 da videoconferência ou selecionar uma opção 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() é chamado, o navegador oferece ao usuário uma opção de superfícies de exibição: guias, janelas ou monitores. Usando a restrição displaySurface, o app da Web agora pode sugerir ao navegador se prefere que um dos tipos de plataforma 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 seletor de mídia antigo e novo.

Identificar recursos que bloqueiam a renderização

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

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

O snippet de código aqui mostra como receber uma lista de todos os seus 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 com as Core Web Vitals e oferece uma experiência melhor para o usuário. Confira a documentação do MDN para saber mais sobre a API Performance, procure esses recursos que bloqueiam a renderização e otimize-os.

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 a um servidor de back-end sem esperar uma resposta específica.

Os aplicativos geralmente querem enviar esses beacons no 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 próprio navegador, para que ele possa oferecer suporte a beacons em page unload ou em page hide, sem que o desenvolvedor precise implementar chamadas de envio exatamente nos momentos certos.

Inscreva-se no teste de origem, teste a API e envie 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 de grid-template. Desta vez, ela precisa ser incluída.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links abaixo para mais mudanças no Chrome 107.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube Chrome Developers 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.