Detectar usuários inativos com a API Idle Detection

Thomas Steiner

Publicado em: 18 de maio de 2020

Browser Support

  • Chrome: 94.
  • Edge: 114.
  • Firefox: not supported.
  • Safari: not supported.

Source

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, ativação de um protetor de tela, bloqueio da tela ou 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 estão disponíveis.
  • Os apps de quiosque expostos publicamente, por exemplo, em museus, podem usar essa API para voltar à visualização "inicial" se ninguém mais interagir com o quiosque.
  • Os apps que exigem cálculos complexos, por exemplo, para criar gráficos, podem limitar esses cálculos aos momentos em que o usuário interage com o dispositivo.

Usar a API

Para verificar se a API Idle Detection é compatível, use:

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

Conceitos da API

A API Idle Detection pressupõe que há algum nível de engajamento entre o usuário, o user agent (ou seja, o navegador) e o sistema operacional do dispositivo em uso. Isso é representado em duas dimensões:

  • O estado de inatividade do usuário:active ou idle: o usuário interagiu ou não com o user agent por algum período.
  • O 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.

Para distinguir active de idle, são necessárias heurísticas que podem variar de acordo com o usuário, o user agent e o sistema operacional. Também precisa ser um limite razoavelmente grosseiro (consulte Segurança e permissões).

O modelo não distingue formalmente entre a interação com um conteúdo específico (ou seja, a página da Web em uma guia usando a API), o user agent como um todo ou o sistema operacional. Essa definição é deixada para o user agent.

Solicitar permissões e instanciar

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, solicite-a com IdleDetector.requestPermission(). A chamada desse método exige 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, inicie a detecção de inatividade chamando o método start() do IdleDetector. Ele usa um objeto com o threshold inativo 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);
}

Parar a detecção de inatividade

Para interromper a detecção de inatividade, chame o método AbortController abort().

controller.abort();
console.log('IdleDetector is stopped.');

Suporte do DevTools

É possível emular eventos de inatividade no DevTools sem ficar inativo. No DevTools, abra a guia Sensores e procure Emular estado do Idle Detector. Confira as várias opções no vídeo.

Emulação do estado do Idle Detector no DevTools.

Suporte do Puppeteer

A partir da versão 5.3.1 do Puppeteer, é possível emular os vários estados de inatividade para testar programaticamente como o comportamento do seu web app muda.

Demonstração

Você pode conferir a API Idle Detection em ação com a demonstração do Canvas efêmero, que apaga o conteúdo após 60 segundos de inatividade. Imagine isso sendo usado em uma loja de departamento para crianças rabiscarem.

Demonstração da tela temporária

Polyfill

Alguns aspectos da API Idle Detection podem ser preenchidos com polyfill, e existem bibliotecas de detecção de inatividade, como idle.ts. No entanto, essas abordagens são restritas à área de conteúdo de um app da Web: a biblioteca em execução no contexto do app da Web precisa sondar eventos de entrada ou detectar mudanças de visibilidade de maneira dispendiosa. No entanto, as bibliotecas não conseguem saber quando um usuário fica inativo fora da área de conteúdo (por exemplo, quando ele está em outra guia 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 Controle de acesso a recursos avançados 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 e privacidade do usuário

Sempre queremos evitar que usuários maliciosos façam uso indevido de novas APIs. Sites aparentemente independentes, mas que na verdade são controlados pela mesma entidade, podem obter informações sobre a inatividade do usuário e correlacionar os dados para identificar usuários únicos em várias origens. Para mitigar esses tipos de ataques, a API Idle Detection limita a granularidade dos eventos de inatividade informados.

Feedback

Há algo na API que não funciona como esperado? Ou há métodos ou propriedades ausentes que você precisa implementar sua ideia? Tem uma dúvida ou um comentário sobre o modelo de segurança? Registre um problema de especificação no repositório do GitHub correspondente ou adicione suas ideias 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 Componentes.

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. A compatibilidade com o DevTools foi adicionada por Maksim Sadym. Agradecemos a Joe Medley, Kayce Basques e Reilly Grant pelas revisões.