Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 84

Pete LePage

A versão estável do Chrome 84 está começando.

Veja o que é necessário saber:

Os usuários podem iniciar tarefas comuns no seu app usando os atalhos do ícone do app.
A API Web Animations adiciona suporte a vários recursos anteriormente sem suporte.
O wake lock pode impedir que a tela escureça ou seja bloqueada.
A API Content Indexing ajuda a exibir conteúdo disponível off-line.
Há novos testes de origem para detecção de inatividade e Web Assembly SIMD.
As alterações na política de cookies do mesmo site estão começando a ser implementadas novamente.
E muito mais.

Meu nome é Pete LePage, estou trabalhando e gravando em casa. Vamos conferir as novidades para desenvolvedores no Chrome 84.

Atalhos de ícones do app

Os atalhos de ícones do app facilitam o início rápido de tarefas comuns no seu app, como escrever um novo tweet, enviar uma mensagem ou conferir as notificações. Eles são compatíveis com o Google 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 propriedade shortcuts no manifesto do app da Web, descreva o atalho e adicione seus í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" }
    ]
  },
]

Consulte Realizar tarefas rapidamente com atalhos de apps para ver mais detalhes.

API Web Animations

O Chrome 84 adiciona vários recursos anteriormente sem suporte à API Web Animations.

animation.ready e animation.finished foram promisidos.
Agora, o navegador pode limpar e remover animações antigas, economizando memória e melhorando o desempenho.
E agora você pode combinar animações usando modos compostos com as opções add e accumulate.

Simplesmente não consigo fazer jus a todas as melhorias ou oferecer bons exemplos aqui, então confira Melhorias na API Web Animations no Chromium 84 para ver 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á mesmo disponível? Há um problema de descoberta.

Com a API Content Indexing, que acabou de passar do teste original, é possível adicionar URLs e metadados do conteúdo disponível off-line. Usando esses metadados, o conteúdo é exibido ao usuário, melhorando a 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 ver 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 páginas compatíveis com o modo off-line com a API Content Indexing para ver todos os detalhes.

API Wake lock

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

Eu gosto de cozinhar, mas acho muito frustrante seguir uma receita, e o protetor de tela entra em ação. Com a API wake lock, que também passou do teste de origem no Chrome 84, os sites podem solicitar um wake lock para evitar que a tela escureça e seja bloqueada.

Na verdade, o site da Betty Crocker usa isso hoje e publicou um estudo de caso em web.dev mostrando um aumento de 300% nos indicadores de intenção de compra.

Para receber um wake lock, chame navigator.wakeLock.request(). Ele 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 sobre isso, então confira Manter ativado com a API Screen Wake Lock, mas pelo menos a minha tela não estará mais coberta de farinha.

Testes de origem

Quero destacar dois novos testes de origem. Se você não conhece os testes de origem, consulte Primeiros passos com 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 fora do computador. Isso é ótimo para apps de chat ou sites de redes sociais que permitem que os usuários saibam 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 fazer testes com ela hoje mesmo.

SIMD de conjunto da Web

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

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

E mais

O Chrome 84 é uma versão grande, mas há algumas outras atualizações importantes que quero destacar.

Estamos retomando o lançamento gradual das mudanças nos cookies SameSite.
Sites com solicitações de permissão abusivas ou notificações abusivas serão registrados automaticamente na nossa interface de notificações mais silenciosa.
Há um novo teste de origem para o QuicTransport.