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:

Eu sou Pete LePage, trabalho e tiros 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. Elas são compatíveis com o Chrome para Android.

Esses atalhos são invocados ao tocar e manter pressionado o ícone do app no Android. Adicionar um atalho ao 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 ficaram promissores.
  • O navegador agora pode limpar e remover animações antigas, economizando memória e melhorando o desempenho.
  • Além disso, agora você pode 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 de indexação de conteúdo, que acabou de sair do teste original, você pode 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 compatíveis com o modo off-line com a API Content Index para ver os detalhes completos.

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 foi aprovada no teste de origem no Chrome 84, os sites podem solicitar um wake lock para impedir que a tela escureça e fique bloqueada.

Na verdade, o site da Betty Crocker está usando isso atualmente 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, mas 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 quando um usuário está inativo, indicando que ele pode estar longe do computador. Isso é ótimo para aplicativos de chat ou sites de redes sociais que informam 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 Detectar usuários inativos com a API Idle Detection para saber mais sobre a API e como começar a usá-la hoje mesmo.

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á algumas outras atualizações importantes que quero destacar.

Leitura adicional

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

Inscrever-se

Para ficar por dentro dos nossos vídeos, inscreva-se no nosso canal Chrome Developers no YouTube. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage e ainda preciso de um corte de cabelo, mas assim que o Chrome 85 for lançado, estarei aqui para contar a você as novidades do Chrome!