Novidades do Chrome 85

Pete LePage

O Chrome 85 está começando a ser lançado para a versão estável.

O que você precisa saber:

Eu sou Pete LePage, trabalhando e gravando de casa. Vamos conferir as novidades para desenvolvedores no Chrome 85!

Visibilidade do conteúdo

Processo de renderização dos navegadores

Para transformar seu HTML em algo que o usuário possa ver, o navegador precisa passar por várias etapas antes de renderizar o primeiro pixel. E isso acontece em toda a página, mesmo com conteúdo que não está visível na janela de visualização.

Aplicar content-visibility: auto a um elemento informa ao navegador que ele pode pular o trabalho de renderização desse elemento até que ele role para a janela de visualização, proporcionando uma renderização inicial mais rápida.


.my-class {
  content-visibility: auto;
}

Para aproveitar ao máximo o content-visibility, aplique-o a seções principais com algoritmos de layout mais complexos, como flexbox e grid, ou que tenham filhos com layouts próprios.

Ao dividir o conteúdo e adicionar content-visibility: auto;, o tempo de renderização da página passou de 232 ms para apenas 30 ms.

Confira a visibilidade do conteúdo para saber como usar esse recurso e melhorar a performance de renderização.

@property e variáveis CSS

As variáveis CSS, tecnicamente chamadas de propriedades personalizadas, são incríveis. Com a API Houdini CSS Properties and Values, é possível definir um tipo e um valor de substituição padrão para suas propriedades personalizadas. Já falei sobre eles em Novidades do Chrome 78, quando adicionamos suporte para defini-los em JavaScript.

A partir do Chrome 85, você também pode definir e definir propriedades CSS diretamente no seu CSS. O que eu gosto nas propriedades CSS é que elas dão significado semântico à propriedade, valores de substituição e até permitem testes de CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

A Una tem uma ótima postagem @property: superpoderes às variáveis CSS que mostra como usá-las.

Receber apps relacionados instalados

A API getInstalledRelatedApps() permite que você verifique se o app seu está instalado e personalize a experiência do usuário.

Por exemplo, mostre um conteúdo diferente ao usuário em uma página de destino se o app já estiver instalado. Centralize a funcionalidade sobreposta em um app para evitar confusão. Ou, se o app nativo já estiver instalado, não promova a instalação do PWA.

Quando foi lançado no Chrome 80, ele funcionava apenas para apps Android. Agora, no Android, ele também pode verificar se o PWA está instalado. E no Windows, ele pode verificar se o app UWP do Windows está instalado.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Confira meu artigo Seu app está instalado? getInstalledRelatedApps() vai te mostrar! no web.dev para saber como funciona e como assinar seus apps para provar que eles são seus.

Atalhos de ícones de apps

Atalho do ícone do app no Windows

No Chrome 84, adicionamos suporte a atalhos de ícones de apps. Eu disse por engano que elas estavam disponíveis em todos os lugares, mas elas só estavam disponíveis no Android. Agora, no Chrome 85, eles estão disponíveis para Android e Windows, além de Chrome e Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Confira o artigo Atalhos de ícones de apps no web.dev para mais detalhes. Desculpe pela confusão.

Teste de origem: solicitações de streaming com fetch()

A partir do Chrome 85, o streaming de upload de fetch está disponível como um teste de origem. Ele permite iniciar uma busca antes que o corpo da solicitação esteja pronto. Antes, só era possível iniciar uma solicitação depois que o corpo inteiro estava pronto. Mas agora, você pode começar a enviar conteúdo mesmo enquanto ele ainda está sendo gerado.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Por exemplo, use-o para aquecer o servidor ou transmitir áudio ou vídeo conforme ele é capturado pelo microfone ou pela câmera.

Jake tem uma análise detalhada em Solicitações de streaming com a API Fetch no web.dev, e também abordou o assunto no vídeo mais recente HTTP203: solicitações de streaming com busca.

E mais

Claro que há muito mais.

Promise.any retorna uma promessa que é cumprida pela primeira promessa fornecida a ser cumprida ou rejeitada.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Substituir todas as instâncias em uma string é mais fácil com .replaceAll(). Não é mais necessário usar expressões regulares.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

O Chrome 85 adiciona suporte à decodificação para AVIF, um formato de imagem codificado com AV1 e padronizado pela Alliance for Open Media. O AVIF oferece ganhos significativos de compactação em comparação com JPEG e WebP. Um estudo recente da Netflix mostrou uma economia de 50% em comparação com JPEG padrão e mais de 60% em conteúdo 4:4:4.

Além disso, a remoção do AppCache já começou.

Leitura adicional

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

Inscrever-se

Quer ficar por dentro dos nossos vídeos? 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.

Eu sou Pete LePage e finalmente cortei o cabelo!

Assim que o Chrome 86 for lançado, vou estar aqui para contar as novidades do Chrome!