Detectar usuários inativos com a API Idle Detection

Use a API Idle Detection para descobrir quando o usuário não está usando o dispositivo ativamente.

Thomas Steiner

O que é a API Idle Detection?

A API Idle Detection notifica os desenvolvedores quando um usuário está inativo, indicando coisas como falta de interação com o teclado, o mouse, a tela, a ativação de um protetor de tela, o bloqueio da tela ou a mudança para uma tela diferente. 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 apps de quiosque expostos publicamente, por exemplo, em museus, podem usar essa API para retornar à visualização "início" se ninguém mais interagir com o quiosque.
  • Apps que exigem cálculos caros, por exemplo, para criar gráficos, podem limitar esses cálculos a 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 ou idle: o usuário interagiu ou não com o user agent por um período.
  • Estado de inatividade da tela:locked ou unlocked: o sistema tem um bloqueio de tela ativo (como um protetor de tela) que impede a interação com o user agent.

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. Ele usa um objeto com o threshold inativo desejado em milissegundos e um signal opcional com um AbortSignal para interromper 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 realmente ficar inativos. No DevTools, abra a guia Sensors e procure Emulate Idle Detector state. Confira as várias opções no vídeo abaixo.

Emulador de estado do detector de inatividade no DevTools.

Suporte ao Puppeteer

A partir do Puppeteer versão 5.3.1, é possível emular os vários estados inativos para testar programaticamente como o comportamento do seu 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.

Demonstração de tela temporária

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. A capacidade de usar essa API é controlada pela permissão 'idle-detection'. Para usar a API, um 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 uma pergunta 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 da especificação? Registre um bug em new.crbug.com. Inclua o máximo de detalhes possível, instruções simples para reprodução e digite Blink>Input na caixa Components. 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.

Links úteis

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.