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 teclado, mouse, tela, ativação de um protetor de tela, bloqueio da tela, ou passando 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 incluem:

  • Aplicativos de chat ou sites de redes sociais podem usar essa API para permitir que o usuário saiba se que seus contatos estejam acessíveis no momento.
  • Aplicativos de quiosque expostos publicamente, por exemplo, em museus, podem usar essa API para retornar à "página inicial" se ninguém mais interagir com o quiosque.
  • Apps que exigem cálculos caros, por exemplo, para desenhar gráficos pode 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. Colete feedback e iterar no 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 há suporte para a API Idle Detection, 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 user agent (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 tem ou não que interagiram com o user agent por um 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 interação com o user agent.

Distinguir active de idle requer heurística que podem diferir entre usuário, user agent e sistema operacional. Ele também precisa ser um limite razoavelmente grosso (consulte Segurança e permissões).

intencionalmente, 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 que usa a API), o user agent como um todo ou o sistema operacional. essa definição é deixada para o user agent.

Como usar a API Idle Detection

A primeira etapa ao usar a API Idle Detection é para garantir que a permissão 'idle-detection' seja concedida. Se a permissão não for concedida, você precisará solicitá-la usando IdleDetector.requestPermission(). Observe que 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, é possível iniciar a detecção de inatividade chamando o Método start() de IdleDetector. Ela usa um objeto com o threshold ocioso 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);
}

Você pode cancelar a detecção de inatividade chamando o De AbortController abort() .

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 inativo. No DevTools, abra a guia Sensores e procure Emulate estado do detector de inatividade. Confira as várias opções no vídeo abaixo.

Emulação de estado do detector inativo no DevTools.

Suporte ao Puppeteer

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

Demonstração

Veja a API Idle Detection em ação com a demonstração do Ephemeral Canvas, que apaga a após 60 segundos de inatividade. Ele é implantado em um departamento em que as crianças podem desenhar.

Demonstração de tela temporária

Fibra de polietileno

Alguns aspectos da API Idle Detection são polyfillable e há bibliotecas de detecção ociosas, como idle.ts, mas essas abordagens são restritas à área de conteúdo do próprio app da Web: A biblioteca em execução no contexto do app da Web precisa pesquisar eventos de entrada de maneira cara ou detectar alterações de visibilidade. Mas, mais restritivamente, as bibliotecas não conseguem determinar hoje quando um usuário fica inativo. fora da área de conteúdo (por exemplo, quando um usuário está em uma guia diferente ou desconectados do computador).

Segurança e permissões

A equipe do Chrome projetou e implementou a API de detecção de inatividade usando os princípios básicos. definido em Como controlar o acesso a recursos eficientes da plataforma da Web, incluindo controle do usuário, transparência e ergonomia. O uso dessa API é controlado pelo Permissão 'idle-detection'. Para usar a API, o aplicativo também deve estar em execução em um contexto seguro de nível superior.

Controle e privacidade do usuário

Queremos sempre impedir que usuários maliciosos façam uso indevido de novas APIs. Sites aparentemente independentes, mas que de fato são controlados pela mesma entidade, pode obter informações de inatividade do usuário e correlacionar os dados para identificar usuários únicos nas origens. Para reduzir esse tipo de ataque, a API Idle Detection limita a granularidade dos eventos inativos informados.

Feedback

A equipe do Chrome quer saber mais sobre suas experiências com a API Idle Detection.

Fale sobre o design da API

Alguma coisa na API não funciona como você esperava? Ou há métodos faltando ou propriedades de que precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre o modelo de segurança? Registre um problema de especificação no repositório do GitHub correspondente. ou adicionar ideias a um problema.

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. Não deixe de incluir o máximo de detalhes possível, instruções simples para reprodução, e digite Blink>Input na caixa Componentes. O Glitch é ótimo para compartilhar repetições 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 mostrar a outros fornecedores de navegador como é fundamental oferecer suporte a eles.

Links úteis

Agradecimentos

A API Idle Detection foi implementada por Sam Goto. O suporte ao DevTools foi adicionado pela Maksim Sadym. Agradecemos a Joe Medley, Kayce Basques e Reilly Grant pelas avaliações dele deste artigo. A imagem principal é de Fernando Hernandez, no Abrir a página.