Novidades do Chrome 79

Pete LePage

O Chrome 79 está sendo lançado agora!

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

Ícones mascaráveis

Se você estiver usando o Android O ou uma versão mais recente e tiver instalado um app da Web progressiva, provavelmente notou o círculo branco irritante ao redor do ícone.

Felizmente, o Chrome 79 agora oferece suporte a ícones com máscara para apps da Web progressivos instalados.Você precisa projetar seu ícone para caber na zona segura, essencialmente um círculo com um diâmetro de 80% da tela.

Em seguida, no manifesto do app da Web, será necessário adicionar uma nova propriedade purpose ao ícone e definir o valor como maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes tem um ótimo post no CSS Tricks: Maskable Icons: Android Adaptive Icons for Your PWA (em inglês) com todos os detalhes e uma ótima ferramenta para testar os ícones e garantir que eles se encaixem.

Web XR

Agora você pode criar experiências imersivas para smartphones e telas montadas na cabeça com a API WebXR Device.

O WebXR possibilita um espectro completo de experiências imersivas. Desde o uso da realidade aumentada para conferir como um novo sofá ficaria na sua casa antes de comprar até jogos de realidade virtual e filmes em 360 graus, entre outros.

Para começar a usar a nova API, leia A realidade virtual chegou à Web.

Novos testes de origem

Os testes de origem oferecem uma oportunidade para validar recursos e APIs experimentais e permitir que você envie feedback sobre a usabilidade e eficácia deles em uma implantação mais ampla.

Os recursos experimentais geralmente só estão disponíveis com uma flag, mas, quando oferecemos um teste de origem para um recurso, você pode se inscrever nesse teste para ativar o recurso para todos os usuários na sua origem.

Ao ativar um teste de origem, você pode criar demonstrações e protótipos que os usuários de testes Beta podem testar durante o período do teste sem precisar ativar nenhuma flag especial no Chrome.

Confira mais informações sobre testes de origem no Guia de testes de origem para desenvolvedores da Web. Você pode conferir uma lista de testes de origem ativos e se inscrever na página Testes de origem do Chrome.

Wake lock

Uma das coisas que mais me irritam no Google Slides é que, se você deixar a apresentação aberta em uma única página por muito tempo, o protetor de tela é ativado. Antes de continuar, você precisa desbloquear o computador. Aff.

No entanto, com a nova API Wake Lock, uma página pode solicitar um bloqueio e impedir que a tela escureça ou que o protetor de tela seja ativado. Ele é perfeito para slides, mas também é útil para sites de receitas, em que você pode deixar a tela ligada enquanto segue as instruções.

Para solicitar um bloqueio de ativação, chame navigator.wakeLock.request() e salve o objeto WakeLockSentinel retornado.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

O bloqueio é mantido até que o usuário saia da página ou até que você chame release no objeto WakeLockSentinel salvo anteriormente.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Confira mais detalhes em web.dev/wakelock.

rendersubtree atributo

Há momentos em que você não quer que parte do DOM seja renderizada imediatamente. Por exemplo, roladores com uma grande quantidade de conteúdo ou interfaces com guias em que apenas parte do conteúdo fica visível.

O novo atributo rendersubtree informa ao navegador que pode pular a renderização dessa subárvore. Isso permite que o navegador passe mais tempo processando o restante da página, aumentando o desempenho.

Quando rendersubtree é definido como invisible, o conteúdo do elemento não é exibido nem testado, permitindo otimizações de renderização.

A mudança de rendersubtree para activatable torna o conteúdo visível removendo o atributo invisible e renderizando o conteúdo.

Chrome Dev Summit 2019

Se você perdeu o Chrome Dev Summit, todas as palestras estão no nosso canal do YouTube.

Jake também tem uma ótima linha do tempo no Twitter com todas as coisas divertidas que aconteceram entre as palestras, incluindo o novo membro da nossa equipe, Surjiko.

Leitura adicional

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

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 assim que o Chrome 80 for lançado, vou estar aqui para contar as novidades do Chrome.