Novidades do Chrome 84

Pete LePage

O Chrome 84 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 84.

Atalhos de ícones de apps

Atalhos de ícones de apps para a PWA do Twitter

Os atalhos de ícones de apps facilitam a inicialização rápida de tarefas comuns no app. Por exemplo, escrever um novo tweet, enviar uma mensagem ou conferir as notificações. Eles têm suporte no Chrome para Android.

Esses atalhos são invocados ao tocar e manter pressionado o ícone do app no Android. Adicionar um atalho à PWA é fácil. Crie uma nova propriedade shortcuts no manifesto do app da Web, descreva o atalho e adicione os ícones.


"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 Como fazer tudo rapidamente com os atalhos de apps para mais detalhes.

API Web Animations

O Chrome 84 adiciona vários recursos que não eram compatíveis à API Web Animations.

  • animation.ready e animation.finished foram promisificados.
  • O navegador agora pode limpar e remover animações antigas, economizando memória e melhorando o desempenho.
  • Agora é possível combinar animações usando modos compostos, com as opções add e accumulate.

Não é possível fazer jus a todas as melhorias ou oferecer bons exemplos aqui. Confira as melhorias da API Web Animations no Chromium 84 para conferir todos os detalhes.

API Content Indexing

Se o conteúdo estiver disponível sem uma conexão de rede. Mas o usuário não sabe disso? Ele está realmente disponível? Há um problema de descoberta.

Com a API Content Indexing, que acabou de sair do teste original, é possível adicionar URLs e metadados para conteúdo disponível off-line. Usando esses metadados, o conteúdo é mostrado ao usuário, melhorando a capacidade de descoberta.

Para adicionar conteúdo ao índice, chame index.add() no registro do service worker e forneça os metadados necessários sobre o conteúdo.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Quer saber o que já está no seu índice? Chame index.getAll() no registro do service worker.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Consulte Como indexar suas páginas com capacidade off-line com a API Content Indexing para conferir todos os detalhes.

API Wake lock

Implementação de wake lock no site da Betty Crocker.

Gosto de cozinhar, mas acho muito frustrante quando estou seguindo uma receita e o protetor de tela é ativado. Com a API de wake lock, que também evoluiu do teste de origem no Chrome 84, os sites podem solicitar um wake lock para evitar que a tela escureça e seja bloqueada.

O site da Betty Crocker usa essa estratégia e publicou um estudo de caso no web.dev mostrando um aumento de 300% nos indicadores de intenção de compra.

Para receber um wake lock, chame navigator.wakeLock.request(), que retorna um objeto WakeLockSentinel, usado para "liberar" o wake lock.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Claro, há um pouco mais do que isso. Confira Como manter a tela ativa com a API Screen Wake Lock. Pelo menos, minha tela não vai mais ficar coberta de farinha.

Testes de origem

Há dois novos testes de origem que quero destacar. Se você não conhece os testes de origem, confira Como começar a usar os testes de origem do Chrome.

Detecção de inatividade

A API Idle Detection notifica você quando um usuário está inativo, indicando que ele pode estar longe do computador. Isso é ótimo para coisas como aplicativos de chat ou sites de redes sociais, para informar aos usuários se os contatos estão disponíveis ou não.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Consulte Como detectar usuários inativos com a API Idle Detection para saber mais sobre a API e como começar a testá-la.

SIMD de Web assembly

E o SIMD da Web Assembly inicia um teste de origem. Ele apresenta operações que mapeiam para instruções SIMD comumente disponíveis em hardware. As operações SIMD são usadas para melhorar o desempenho, principalmente em aplicativos multimídia.

Para saber mais sobre o SIMD do WebAssembly, confira Aplicativos rápidos e paralelos com o SIMD do WebAssembly.

E mais

O Chrome 84 é grande, mas há outras atualizações importantes que quero destacar.

Leitura adicional

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

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 ainda preciso de um corte de cabelo, mas assim que o Chrome 85 for lançado, vou estar aqui para contar a você o que há de novo no Chrome.