Novidades no Chrome 107

Adriana Jara

Veja o que é necessário saber:

Meu nome é Adriana Jara, Vamos conhecer as novidades para os 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 autorcaptura acidental e evita o efeito "Hall of Mirrors" que vemos 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 alternem para uma nova guia sem voltar para a guia de videoconferência ou selecionar em uma longa lista de guias. No entanto, o comportamento é exposto condicionalmente caso o aplicativo da Web não faça isso.

// 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ície de exibição: guias, janelas ou monitores. Usando a restrição displaySurface, o app da Web agora pode sugerir ao navegador se ele preferir que um dos tipos de superfície seja oferecido com mais destaque

Isso pode, por exemplo, ajudar a evitar o compartilhamento excessivo por acidente, já que o compartilhamento de uma única guia pode ser o padrão. Capturas de tela dos comandos antigos e novos do seletor de mídia.

Identificar recursos de bloqueio de renderização

Insights confiáveis sobre o desempenho de uma página são essenciais para que os desenvolvedores criem experiências do usuário rápidas. Até agora, os desenvolvedores confiaram em heurísticas complexas para determinar se um recurso está bloqueando 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 que sua página seja exibida até que seja baixado.

O snippet de código mostrado aqui mostra como consultar uma lista de todos os seus recursos e usar a nova propriedade "renderBlockingStatus" para listar todos aqueles que bloqueiam 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 melhora a experiência do usuário. Confira a documentação do MDN para saber mais sobre a API Performance, procurar recursos que bloqueiam a renderização e fazer otimizações.

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

Os aplicativos geralmente querem enviar esses beacons no final da visita do usuário, mas não há um bom momento para fazer essa chamada de "envio". Essa API delega o envio ao navegador para que possa oferecer suporte a beacons no page unload ou no 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, há muito mais.

  • O cabeçalho HTTP expect-ct foi descontinuado.
  • O atributo rel agora tem suporte em elementos <form>.
  • Da última vez que mencionei a interpolação grid-template, agora ela deveria ser incluída.

Leia mais

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

Fazer inscrição

Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá 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, estarei aqui para dizer as novidades do Chrome.