Novidades do Chrome 85

Pete LePage

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

Veja o que é necessário saber:

Sou Pete LePage, trabalhando e gravando em casa. Vamos nos aprofundar e ver as novidades para os desenvolvedores no Chrome 85.

Visibilidade do conteúdo

Processo de renderização de navegadores

Para transformar seu HTML em algo que o usuário pode ver, o navegador precisa passar por várias etapas antes de pintar o primeiro pixel. Isso é feito em toda a página, mesmo no conteúdo que não aparece na janela de visualização.

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


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

Para ter o maior impacto do content-visibility, aplique-o a seções pais com algoritmos de layout mais complexos, como flexbox e grid, ou que tenham filhos com layouts contidos.

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

Confira a visibilidade do conteúdo para ver como você pode usá-la para melhorar o desempenho da renderização.

@property e variáveis CSS

As variáveis CSS, tecnicamente chamadas de propriedades personalizadas, são incríveis. Com a API Hudini CSS Properties and Values, é possível definir um tipo e um valor substituto padrão para suas propriedades personalizadas. Abordamos esses conceitos no Novidades no Chrome 78, quando adicionamos suporte para defini-los no JavaScript.

A partir do Chrome 85, também é possível definir e configurar propriedades CSS diretamente no seu CSS. O que eu adoro nas propriedades do CSS é que elas dão à propriedade significado semântico, valores substitutos e até mesmo permitem testes de CSS.

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

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

Instalar apps relacionados

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

Por exemplo, mostre para o usuário um conteúdo diferente em uma página de destino se o app já estiver instalado. Centralize a sobreposição de funcionalidades 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 só funcionava 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? O getInstalledRelatedApps() vai contar a você no web.dev para saber como funciona e como assinar seus apps para provar que eles são seus.

Atalhos do ícone do app

Atalho do ícone do app no Windows

No Chrome 84, adicionamos suporte a atalhos de ícones de apps. Eu disse acidentalmente que eles estavam disponíveis em todos os lugares, mas só no Android. Agora, no Chrome 85, elas estão disponíveis no Android, Windows e no Chrome e no 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 do app em web.dev para ver todos os detalhes. Lamento a confusão que eu causei.

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

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

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

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

Por exemplo, use-a para aquecer o servidor ou faça streaming de áudio ou vídeo capturado do microfone ou da câmera.

Jake analisou em Solicitações de streaming com a API Busca em web.dev e também abordou isso no vídeo mais recente HTTP203 - Solicitações de streaming com busca.

E mais

Claro, há muito mais.

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

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

É mais fácil substituir todas as instâncias em uma string com .replaceAll(), sem mais 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 de compactação significativos em comparação com JPEG e WebP, com um estudo recente da Netflix mostrando 50% de economia em comparação com o JPEG padrão e mais de 60% de economia em conteúdo 4:4:4.

E a remoção do AppCache começou.

Leia mais

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

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no canal de desenvolvedores do Chrome no YouTube. Você vai receber 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, estarei aqui para contar as novidades do Chrome.