Detecte usuários inativos com a Idle Detection API

# O que é a Idle Detection API?

A Idle Detection API notifica os desenvolvedores quando um usuário está inativo, indicando coisas como falta de interação com o teclado, mouse, tela, ativação de um protetor de tela, bloqueio da tela ou movimentação para uma tela diferente. Um limite definido pelo desenvolvedor aciona a notificação.

# Casos de uso sugeridos para a Idle Detection API

Exemplos de sites que podem usar esta API incluem:

• Aplicativos de bate-papo ou sites de redes sociais online podem usar essa API para permitir que o usuário saiba se seus contatos estão acessíveis no momento.
• 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.
• Aplicativos 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 seu dispositivo.

# Status atual

# Como usar a Idle Detection API

# Detecção de recursos

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

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

# Conceitos da Idle Detection API

A Idle Detection API pressupõe que haja algum nível de envolvimento 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 agente do usuário por algum tempo.
• O estado de tela ociosa: locked ou unlocked : o sistema possui um bloqueio de tela ativo (como um protetor de tela) impedindo a interação com o agente do usuário.

Distinguir active de idle requer heurísticas que podem diferir entre usuário, agente de usuário e sistema operacional. Também deve ser um limite razoavelmente grosseiro (consulte Segurança e Permissões ).

O modelo intencionalmente 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 agente do usuário como um todo ou o sistema operacional; esta definição é deixada para o agente do usuário.

# Usando a Idle Detection API

A primeira etapa ao usar a API de detecção de inatividade é garantir que a 'idle-detection' seja concedida. Se a permissão não for concedida, você precisa solicitá-la por meio de IdleDetector.requestPermission() . Observe que chamar este método requer um gesto do usuário.

// Certifique-se de que a permissão 'idle-detection' seja concedida.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Precisa solicitar permissão primeiro.
  return console.log('Idle detection permission not granted.');
}

A segunda etapa é instanciar o IdleDetector. O threshold mínimo é 60.000 milissegundos (1 minuto). Você pode finalmente iniciar a detecção de inatividade chamando o método start() do IdleDetector. Isto leva um objeto com o threshold de inatividade desejado em milissegundos e um signal opcional com um AbortSignal, para abortar 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) {
  // Lidar com erros de inicialização como permissão negada,
  // funcionando fora do frame de nível superior, etc.
  console.error(err.name, err.message);
}

Você pode abortar a detecção de inatividade chamando o método abort() do AbortController.

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

# Suporte para DevTools

A partir do Chromium 94, você pode emular eventos ociosos no DevTools sem realmente ficar ocioso. Em DevTools, abra a guia Sensores e procure o Emular estado de Detector Inativo. Você pode ver as várias opções no vídeo abaixo.

# Suporte para Puppeteer

A partir da versão 5.3.1 do Puppeteer, você pode emular os vários estados inativos para testar programaticamente como o comportamento do seu aplicativo da web muda.

# Demo

Você pode ver a Idle Detection API em ação com a demonstração do Ephemeral Canvas que apaga seu conteúdo após 60 segundos de inatividade. Você pode imaginar isso sendo implantado em uma loja de departamentos para as crianças rabiscarem.

# Polyfilling

Alguns aspectos da API de detecção de ociosidade são polyfillable e existem bibliotecas de detecção de ociosidade como idle.ts, mas essas abordagens são restritas à área de conteúdo do próprio aplicativo da web: A biblioteca em execução no contexto do aplicativo da web precisa pesquisar eventos de entrada de maneira cara ou escutar as mudanças de visibilidade. Mais restritivamente, porém, as bibliotecas não podem dizer, hoje, quando um usuário fica inativo fora de sua área de conteúdo (por exemplo, quando um usuário está em uma guia diferente ou totalmente desconectado de seu computador).

# Segurança e permissões

A equipe do Chrome projetou e implementou a Idle Detection API usando os princípios básicos definidos em Controle de Acesso a Recursos Poderosos da Plataforma da Web , incluindo controle do usuário, transparência e ergonomia. A capacidade de usar esta API é controlada pela permissão 'idle-detection'. Para usar a API, um aplicativo também deve ser executado em um contexto seguro de nível superior .

# Controle do usuário e privacidade

Sempre queremos evitar que agentes mal-intencionados façam mau uso de novas APIs. Sites aparentemente independentes, mas que na verdade são controlados pela mesma entidade, podem obter informações ociosas do usuário e correlacionar os dados para identificar usuários únicos nas origens. Para mitigar esse tipo de ataque, a Idle Detection API limita a granularidade dos eventos de inatividade relatados.

# Feedback

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

# Conte-nos sobre o design da API

Existe algo na API que não funciona como você esperava? Ou faltam métodos ou propriedades de que você 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 GitHub correspondente ou adicione suas ideias a um problema existente.

# Comunicar 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. Certifique-se de incluir o máximo de detalhes que puder, instruções simples para reproduzir e insira Blink>Input na caixa Componentes. Glitch funciona muito bem para compartilhar reproduções rápidas e fáceis.

# Mostrar suporte para a API

Você está planejando usar a Idle Detection API? Seu suporte público ajuda a equipe do Chrome a priorizar os recursos e mostra a outros fornecedores de navegadores como é fundamental apoiá-los.

• Compartilhe como você planeja usá-lo no tópico do discurso do WICG.
• Envie um tweet para @ChromiumDev usando a hashtag#IdleDetection e diga-nos onde e como você está usando.

# Links úteis

• Explicador público
• Rascunho de especificação
• Demonstração da Idle Detection API | Fonte de demonstração da Idle Detection API
• Bug de rastreamento
• Entrada ChromeStatus.com
• Componente Blink: Blink>Input

# Reconhecimentos

A Idle Detection API foi implementada por Sam Goto . Suporte para DevTools foi adicionado por Maksim Sadym . Agradecimentos a Joe Medley , Kayce Basques e Reilly Grant por suas revisões deste artigo. A imagem do herói é de Fernando Hernandez no Unsplash .