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
eanimation.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
eaccumulate
.
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
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.
Leia mais
Esses são apenas alguns dos principais destaques. Confira nos links abaixo outras mudanças no Chrome 84.
- Novidades no Chrome DevTools (84)
- Descontinuações e remoções do Chrome 84
- Atualizações do ChromeStatus.com para o Chrome 84
- Novidades do JavaScript no Chrome 84
- Lista de alterações do repositório de origem do Chromium
Fazer inscrição
Para ficar por dentro dos nossos vídeos, inscreva-se no nosso canal de desenvolvedores do Chrome 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 cortar o cabelo, mas, assim que o Chrome 85 for lançado, estarei aqui para contar as novidades do Chrome!