Novidades do Chrome 85

Pete LePage

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

Veja o que é necessário saber:

Meu nome é Pete LePage, trabalho e faço gravações 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 pintar o primeiro pixel. E isso acontece em toda a página, mesmo para 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 viewport, fornecendo 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 pai 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 saber como 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 Houdini CSS Properties and Values, você pode definir um tipo e um valor padrão para suas propriedades personalizadas. Eu já falei sobre isso em Novidades do Chrome 78, quando adicionamos suporte para a definição delas em JavaScript.

A partir do Chrome 85, também é possível definir e definir propriedades CSS diretamente no CSS. O que eu mais gosto nas propriedades CSS é que elas dão à propriedade um significado semântico, valores padrão e até mesmo permitem o teste de CSS.

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

A Una tem um ótimo post @property: 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 um conteúdo diferente ao usuário em uma página de destino se o app já estiver instalado. Centralize as funcionalidades sobrepostas em um app para evitar confusão. Ou, se o app nativo já estiver instalado, não promova a instalação da PWA.

Quando foi lançado pela primeira vez 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 O app está instalado? getInstalledRelatedApps() vai te contar! Acesse web.dev para saber como isso funciona e como assinar seus apps para provar que eles são seus.

Atalhos de ícones de apps

Atalho de í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 eles estavam disponíveis apenas no Android. Agora, no Chrome 85, elas estão disponíveis no Android e no Windows, além do Chrome e do 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 app no web.dev para conferir todos os detalhes. Lamento a confusão que causei.

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 que você inicie uma busca antes que o corpo da solicitação esteja pronto. Antes, você só podia iniciar uma solicitação quando todo o corpo estava pronto. Agora, é possível começar a enviar conteúdo mesmo enquanto ele 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 analisa em detalhes o Streaming de solicitações com a API fetch no web.dev e também abordou o assunto no vídeo mais recente HTTP203: Streaming de solicitações com fetch.

E mais

Claro, há muito mais.

Promise.any retorna uma promessa que é atendida pela primeira promessa a ser atendida 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 há 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 de AVIF, um formato de imagem codificado com AV1 e padronizado pela Alliance for Open Media. O AVIF oferece ganhos de compactação significativos em relação ao JPEG e ao WebP, com um recente estudo da Netflix mostrando uma economia de 50% em relação ao JPEG padrão e mais de 60% em conteúdo 4:4:4.

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

Leitura adicional

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

Inscrever-se

Se quiser 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.

Meu nome é Pete LePage, e eu finalmente cortei o cabelo.

Assim que o Chrome 86 for lançado, vamos falar sobre as novidades do Chrome.