Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 100

Pete LePage

Veja o que é necessário saber:

O Chrome 100 tem um número de versão de três dígitos.
Caminhe na memória e comemore #100CoolWebMoments desde o primeiro lançamento do Chrome.
Há algumas mudanças importantes na string do user agent.
Com a API Multi-Screen Window Placement, é possível enumerar as telas conectadas à máquina do usuário e posicionar janelas em telas específicas.
E há muito mais.

Meu nome é Pete LePage. Vamos nos aprofundar e ver as novidades para os desenvolvedores no Chrome 100.

Chrome 100

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

O Chrome 100 está disponível agora 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. Nos últimos meses, as equipes do Firefox e do Chrome realizaram experimentos nos quais o navegador informou a versão 100, mesmo que não fosse.

Isso causou alguns problemas informados, e muitos deles já foram corrigidos. Ainda precisamos da sua ajuda.

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

Confira o Chrome e o Firefox em breve para alcançar a versão principal 100 em web.dev (links em inglês) para mais detalhes.

100 momentos legais na Web

Imagem promocional dos 100 Momentos da Web legais

Tem sido emocionante ver a Web crescer e ver todas as coisas incríveis que você criou nas últimas 100 versões do Chrome. Achamos que seria divertido andar em memória e comemorar #100CoolWebMoments que aconteceram nos últimos 14 anos.

Conte quais momentos você mais gostou. Se sentimos falta de alguma coisa, temos certeza que isso aconteceu, 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 compatível com uma string de user agent não reduzida por padrão. Isso faz parte de uma estratégia para substituir o uso da string do user agent pela nova API User-Agent Client Hints.

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

Confira Datas e testes de origem de redução do user agent no [blog do Chromium][crblog] para saber o que será removido e quando.

API de posicionamento de janelas em várias telas

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

Com essa API, é possível enumerar as telas conectadas à máquina do usuário e posicionar janelas em telas específicas.

Você pode conferir rapidamente se há mais de uma tela conectada ao dispositivo com 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.

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

Ela também oferece uma forma de detectar mudanças. Por exemplo, se uma nova tela for conectada ou removida, a resolução mudar 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 Como gerenciar várias telas com a API Multi-Screen Window Placement (link em inglês) no web.dev (link em inglês) para mais detalhes.

E muito mais.

Claro, há muito mais.

Há um novo método forget() para dispositivos HID que permitem 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 a WebNFC, o método makeReadOnly() permite transformar tags NFC permanentemente somente leitura.

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