Novidades do Chrome 100

Pete LePage

Veja o que é necessário saber:

Meu nome é Pete LePage. Vamos conferir as novidades para desenvolvedores no Chrome 100.

Chrome 100

Quando os navegadores alcançaram a versão 10 pela primeira vez, houve alguns problemas, já que o número da versão principal passou de um dígito para dois. Esperamos ter aprendido algumas coisas que vão facilitar a transição de dois dígitos para três.

Logotipo do Chrome e do Firefox

O Chrome 100 já está disponível, e o Firefox 100 será lançado em breve. Esses números de versão de três dígitos podem causar problemas em sites que dependem da identificação da versão do navegador de alguma forma. Nos últimos meses, a equipe do Firefox e a equipe do Chrome realizaram experimentos em que o navegador informava o número da versão 100, mesmo que não fosse.

Isso levou a alguns problemas relatados, muitos dos quais já foram corrigidos. Mas ainda precisamos da sua ajuda.

  • Se você é um administrador de site, teste seu site com o Chrome e o Firefox 100.
  • Se você desenvolver uma biblioteca de análise de user agent, adicione testes para analisar versões maiores ou iguais a 100.

Confira mais detalhes sobre a versão principal do Chrome e do Firefox 100 em breve em web.dev (links em inglês).

100 momentos legais na Web

Imagem promocional de 100 Web Moments legais

Foi muito legal acompanhar o crescimento da Web e ver todas as coisas incríveis que você criou nas últimas 100 versões do Chrome. Achamos que seria divertido relembrar alguns momentos e comemorar os #100MomentosIncríveisdaWeb que aconteceram nos últimos 14 anos.

Conte quais momentos você mais gostou. Se tivermos esquecido de algo (e com certeza esquecemos), envie um tweet para @Chromiumdev com #100CoolWebMoments. Aproveite!

String do user agent reduzida

Falando em user agent, o Chrome 100 será a última versão a oferecer suporte a uma string User-Agent não reduzida por padrão. Isso faz parte de uma estratégia para substituir o uso da string User-Agent pela nova API User-Agent Client Hints.

A partir do Chrome 101, o user agent será reduzido gradualmente.

Confira o teste de origem e as datas da redução do user agent no [blog do Chromium][crblog] para saber mais sobre o que será removido e quando.

API Multi-Screen Window Placement

Para alguns apps, abrir novas janelas e colocá-las em locais ou telas específicas é um recurso importante. Por exemplo, ao usar o Apresentações Google para apresentar, quero que os slides apareçam em tela cheia na tela principal e que minhas anotações de orador apareçam na outra tela.

A API Multi-Screen Window Placement permite enumerar as telas conectadas à máquina do usuário e colocar janelas em telas específicas.

Você pode conferir rapidamente se há mais de uma tela conectada ao dispositivo usando window.screen.isExtended.

const isExtended = window.screen.isExtended;
// returns true/false

No entanto, a principal funcionalidade está em window.getScreenDetails(), que fornece detalhes sobre as telas anexadas.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Por exemplo, você pode determinar a tela principal e usar requestFullscreen() para colocar um elemento em tela cheia nessa tela.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

E oferece uma maneira de detectar mudanças, por exemplo, se uma nova tela for conectada ou removida, a resolução muda, e assim por diante.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Confira o artigo atualizado de Tom Gerenciar várias telas com a API Multi-Screen Window Placement no web.dev para saber mais.

E muito mais.

Claro que há muito mais.

Há um novo método forget() para dispositivos HID que permite revogar uma permissão para um dispositivo HID concedida por um usuário.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

E para o WebNFC, o método makeReadOnly() permite que você torne as tags NFC permanentemente somente leitura.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 100.

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 é Pete LePage e, assim que o Chrome 101 for lançado, estarei aqui para contar as novidades do Chrome!