Novidades do Chrome 79

O Chrome 79 já está sendo lançado.

Meu nome é Pete LePage. Vamos conferir as novidades para os desenvolvedores do Chrome 79.

Ícones mascaráveis

Se você está executando o Android O ou uma versão mais recente e instalou um Progressive Web App, provavelmente percebeu o círculo branco irritante ao redor do ícone.

Felizmente, o Chrome 79 agora oferece suporte a ícones mascaráveis para Progressive Web Apps instalados.Você precisará projetar seu ícone para que ele caiba na zona de segurança, essencialmente um círculo com um diâmetro de 80% da tela.

Em seguida, no manifesto do app da Web, é 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"
  ]
  ...
}

O Tiger Oakes tem uma ótima postagem sobre o CSS Tricks, Maskable Icons: Android Adaptive Icons for Your PWA, com todos os detalhes e uma ótima ferramenta que você pode usar para testar seus ícones e conferir se eles se encaixam.

Web XR

Agora é possível criar experiências imersivas para smartphones e telas de cabeça com a API WebXR Device.

O WebXR oferece todo um espectro de experiências imersivas. Desde o uso de realidade aumentada para ver como um sofá novo pode ficar na sua casa antes da compra, até jogos de realidade virtual, filmes em 360 graus e muito mais.

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, além de permitirem que você forneça feedback sobre usabilidade e eficácia em implantações mais amplas.

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

Ao ativar um teste de origem, você pode criar demonstrações e protótipos que os usuários do teste Beta podem testar durante o período de teste sem exigir que eles ativem flags especiais no Chrome.

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

Wake lock

Uma das minhas maiores irritações com o Apresentações Google é que, se você deixa a apresentação aberta em um único slide por muito tempo, o protetor de tela aparece. Antes de continuar, é necessário 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 acionado. Ele é perfeito para o Apresentações, mas também é útil para coisas como sites de receitas, onde você pode querer manter a tela acesa enquanto segue as instruções.

Para solicitar um wake lock, é necessário chamar navigator.wakeLock.request() e salvar 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}`);
  }
};

Mais detalhes em web.dev/wakelock (em inglês).

rendersubtree atributo

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

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

Quando rendersubtree for definido como invisible, o conteúdo do elemento não será desenhado ou testado, permitindo otimizações de renderização.

Mudar o rendersubtree para activatable torna o conteúdo visível removendo o atributo invisible e renderizando o conteúdo.

Conferência de Desenvolvedores do Chrome 2019

Se você perdeu a Conferência de Desenvolvedores do Chrome, todas as palestras estão no nosso canal do YouTube.

Jake também tem uma ótima conversa no Twitter com todas as coisas divertidas que acontecem entre elas, incluindo o membro mais recente da nossa equipe, Surjiko.

Leia mais

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

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, assim que o Chrome 80 for lançado, terei aqui as novidades: