Use a API Idle Detection para descobrir quando o usuário não está usando o dispositivo ativamente.
O que é a API Idle Detection?
A API Idle Detection notifica os desenvolvedores quando um usuário está ocioso, indicando, por exemplo, falta de interação com o teclado, mouse, tela, ativação de um protetor de tela, bloqueio da tela ou mudança para outra tela. Um limite definido pelo desenvolvedor aciona a notificação.
Casos de uso sugeridos para a API Idle Detection
Exemplos de sites que podem usar essa API:
- Aplicativos de chat ou sites de redes sociais on-line podem usar essa API para informar ao usuário se os contatos dele estão disponíveis.
- Os aplicativos de quiosque expostos publicamente, por exemplo, em museus, podem usar essa API para retornar à visualização "inicial" se ninguém mais interagir com o quiosque.
- Apps que exigem cálculos caros, por exemplo, para desenhar gráficos, podem limitar esses cálculos aos momentos em que o usuário interage com o dispositivo.
Status atual
Etapa | Status |
---|---|
1. Criar explicação | Concluído |
2. Criar um rascunho inicial da especificação | Concluído |
3. Coletar feedback e iterar o design | Em andamento |
4. Teste de origem | Concluído |
5. Lançamento | Chromium 94 |
Como usar a API Idle Detection
Detecção de recursos
Para verificar se a API Idle Detection tem suporte, use:
if ('IdleDetector' in window) {
// Idle Detector API supported
}
Conceitos da API Idle Detection
A API Idle Detection pressupõe que há algum nível de engajamento entre o usuário, o agente do usuário (ou seja, o navegador) e o sistema operacional do dispositivo em uso. Isso é representado em duas dimensões:
- O estado inativo do usuário:
active
ouidle
: o usuário interagiu ou não com o user agent por um período. - O estado ocioso da tela:
locked
ouunlocked
: o sistema tem um bloqueio de tela ativo (como um protetor de tela) que impede a interação com o agente do usuário.
A distinção entre active
e idle
requer heurísticas que podem variar de acordo com o usuário, o user agent
e o sistema operacional. Ele também precisa ser um limite razoavelmente grosseiro
(consulte Segurança e permissões).
O modelo intencionalmente não distingue formalmente a interação com um conteúdo específico (ou seja, a página da Web em uma guia que usa a API), o agente do usuário como um todo ou o sistema operacional. Essa definição é deixada para o agente do usuário.
Como usar a API Idle Detection
A primeira etapa ao usar a API Idle Detection é
garantir que a permissão 'idle-detection'
seja concedida.
Se a permissão não for concedida, você vai precisar
solicitá-la usando IdleDetector.requestPermission()
.
Chamar esse método requer um gesto do usuário.
// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
// Need to request permission first.
return console.log('Idle detection permission not granted.');
}
A segunda etapa é instanciar o IdleDetector
.
O threshold
mínimo é de 60.000 milissegundos (1 minuto).
Por fim, você pode iniciar a detecção de inatividade chamando o
método start()
do IdleDetector
.
É necessário um objeto com o threshold
inativo desejado em milissegundos
e um signal
opcional com um
AbortSignal
para cancelar a detecção de inatividade como parâmetros.
try {
const controller = new AbortController();
const signal = controller.signal;
const idleDetector = new IdleDetector();
idleDetector.addEventListener('change', () => {
const userState = idleDetector.userState;
const screenState = idleDetector.screenState;
console.log(`Idle change: ${userState}, ${screenState}.`);
});
await idleDetector.start({
threshold: 60000,
signal,
});
console.log('IdleDetector is active.');
} catch (err) {
// Deal with initialization errors like permission denied,
// running outside of top-level frame, etc.
console.error(err.name, err.message);
}
É possível abortar a detecção de inatividade chamando o
método
abort()
do
AbortController
.
controller.abort();
console.log('IdleDetector is stopped.');
Suporte ao DevTools
A partir do Chromium 94, é possível emular eventos inativos no DevTools sem estar inativo. No DevTools, abra a guia Sensors e procure Emulate Idle Detector state. Confira as várias opções no vídeo abaixo.
Suporte ao Puppeteer
A partir da versão 5.3.1 do Puppeteer, é possível emular os vários estados de inatividade para testar de forma programática como o comportamento do app da Web muda.
Demonstração
Confira a API Idle Detection em ação com a demonstração de tela temporária, que apaga o conteúdo após 60 segundos de inatividade. Você pode imaginar isso sendo implantado em uma loja de departamentos para crianças desenharem.
Polipreenchimento
Alguns aspectos da API Idle Detection podem ser polifilados e bibliotecas de detecção de inatividade, como idle.ts, existem, mas essas abordagens são limitadas à própria área de conteúdo de um app da Web: a biblioteca em execução no contexto do app da Web precisa monitorar eventos de entrada ou detectar mudanças de visibilidade. No entanto, as bibliotecas não podem dizer quando um usuário fica inativo fora da área de conteúdo (por exemplo, quando um usuário está em uma guia diferente ou fez logout do computador).
Segurança e permissões
A equipe do Chrome projetou e implementou a API Idle Detection usando os princípios básicos
definidos em Como controlar o acesso a recursos poderosos da plataforma da Web,
incluindo controle do usuário, transparência e ergonomia.
O uso dessa API é controlado pela
permissão 'idle-detection'
.
Para usar a API, o app também precisa estar em execução em um
contexto seguro de nível superior.
Controle do usuário e privacidade
Sempre queremos impedir que usuários maliciosos usem novas APIs de forma indevida. Sites aparentemente independentes, mas que na verdade são controlados pela mesma entidade, podem receber informações de inatividade do usuário e correlacionar os dados para identificar usuários únicos em várias origens. Para mitigar esse tipo de ataque, a API Idle Detection limita a granularidade dos eventos inativos informados.
Feedback
A equipe do Chrome quer saber sobre sua experiência com a API Idle Detection.
Fale sobre o design da API
Há algo na API que não funciona como esperado? Ou há métodos ou propriedades ausentes que você precisa para implementar sua ideia? Tem alguma dúvida ou comentário sobre o modelo de segurança? Envie um problema de especificação no repositório do GitHub correspondente ou adicione sua opinião a um problema existente.
Informar um problema com a implementação
Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente das especificações?
Registre um bug em new.crbug.com. Inclua o máximo de detalhes possível,
instruções simples para reprodução e insira Blink>Input
na caixa Componentes.
O Glitch é ótimo para compartilhar reprosagens rápidas e fáceis.
Mostrar suporte à API
Você planeja usar a API Idle Detection? Seu apoio público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegadores a importância de oferecer suporte a eles.
- Compartilhe como você planeja usá-lo na discussão do Discourse do WICG.
- Envie um tweet para @ChromiumDev usando a hashtag
#IdleDetection
e nos informe onde e como você está usando.
Links úteis
- Explicação para o público
- Especificação de rascunho
- Demo da API Idle Detection | Fonte da demonstração da API Idle Detection
- Rastreamento de bug
- Entrada do ChromeStatus.com
- Componente do Blink:
Blink>Input
Agradecimentos
A API Idle Detection foi implementada por Sam Goto. O suporte ao DevTools foi adicionado por Maksim Sadym. Agradecemos a Joe Medley, Kayce Basques e Reilly Grant pelas revisões deste artigo. A imagem principal é de Fernando Hernandez no Unsplash.