ng2 idle

Introdução

Um módulo para responder a usuários ociosos em aplicativos angulares. Esta é uma reescrita do módulo NG-IDLE; No entanto, se você estiver usando o Angular 1, deve usar esse módulo.

Os mantenedores queriam

A comunidade angular precisa de você! Estou procurando um novo desenvolvedor ou equipe para assumir a manutenção deste módulo. Essas são as responsabilidades que qualquer candidato interessado deve considerar:

• Agora: Processo beta completo (o principal item restante é para torná -lo compatível com o SSR)
• Agora: Atualize a demonstração e adicione documentação da API
• Em andamento: correções de bug
• Em andamento: novos lançamentos para novas versões do Angular
• Posterior: Refactor para simplificar a API e reduzir o tamanho do pacote
• Posterior: Adicione suporte para ambientes que não são de navegador?

Idealmente, um candidato:

• Tem experiência em criar aplicações no angular 5+
• É um desenvolvedor angular ativo e sintonizado no cronograma de liberação angular
• Adora código aberto e a comunidade angular
• Está comprometido em liberar pacotes modulares e leves (o mais rápido possível)
• Tem entendimento de trabalho dos eventos DOM, temporizadores e intervalos de JavaScript, API de armazenamento da Web e cookies
• Entende os testes usando karma e jasmim e está comprometido com uma alta porcentagem de cobertura de código
• Tem entendimento de trabalho do guia contribuinte, está disposto a aceitar contribuições de outras pessoas e pode usar o GitHub e as ferramentas relacionadas efetivamente
• Tem tempo para true e responder ingressos ou delegar com outros
• Tem um entendimento básico do NPM para liberar pacotes

Entre em contato se estiver interessado!

Demonstração

Visite https://grbsk.github.io/ng2-idle para visualizar um exemplo simples com instruções rápidas de início.

Início rápido

@ng-idle é enviado via npm. Você pode instalar o pacote usando o seguinte comando para a versão mais recente do Angular:

 npm install --save @ng-idle/core

A integração e configuração do pacote em seu aplicativo requer mais algumas etapas. Visite @NG-IDLE-Exemplo para obter a fonte e as instruções sobre como ir.

Considerações de design

A aplicação principal deste módulo é detectar quando os usuários estão ociosos. Também pode ser usado para alertar os usuários de um tempo limite iminente e, em seguida, cronometre -os. O núcleo deste módulo é o serviço Idle que faz o seu melhor - com base na sua configuração - para detectar quando um usuário está ativo ou ocioso e transmitir essas informações para o seu aplicativo para que possa responder adequadamente.

Modularização

A funcionalidade principal pode ser encontrada no pacote @ng-idle/core via NPM.

Módulos adicionais para estender a funcionalidade:

• @ng-idle/keepalive (veja abaixo)

Integração mantida extensível

Em um caso de uso comum em que é usado para gerenciamento de sessão, pode ser necessário sinalizar ao servidor periodicamente que o usuário ainda está conectado e ativo. Se você precisar dessa funcionalidade, @ng-idle pode opcionalmente se integrar com @ng-idle/keepalive . @ng-idle instruirá @ng-idle/keepalive para ping enquanto o usuário estiver ativo e parar quando estiver ocioso ou de tempo para fora. Quando o usuário retomar a atividade ou o estado ocioso é redefinido, ele será exibido imediatamente e retomará o ping. Observe que a integração Keepalive é opcional e você deve instalar e configurar @ng-idle/keepalive separadamente para obter essa funcionalidade. Você pode implementar o seu próprio, estendendo KeepaliveSvc e configurando -o como um provedor em seu aplicativo para a classe KeepaliveSvc .

Interrupções extensíveis

Uma interrupção é qualquer fonte de entrada (normalmente do usuário, mas pode ser coisas como outras guias ou um evento) que podem ser usadas para sinalizar para Idle que o relógio ocioso deve ser interrompido ou redefinido. Ao contrário do ng-idle , essas fontes não são codificadas; Você pode estender InterruptSource ou qualquer uma das fontes internas para se adequar aos seus propósitos. Esse recurso também é útil para lidar com o ruído de entrada que pode atormentar seu caso de uso específico. Também pode ser usado para segmentar elementos específicos em uma página, em vez de todo o documento ou janela. As seguintes fontes vêm embutidas neste pacote:

• InterruptSource (Resumo): Um tipo de base que você pode implementar para criar sua própria fonte.
• EventTargetInterruptSource : qualquer objeto que implementa EventTarget , como um HTMLElement ou Window . Aceita o objeto que é a fonte e uma sequência delimitada por espaço que contém os eventos que causam uma interrupção.
• DocumentInterruptSource : procura eventos (em uma string delimitada pelo espaço) que borbulham até o document.documentElement (nó html ).
• WindowInterruptSource : procura eventos (em uma string delimitada pelo espaço) que borbulham até a Window .
• StorageInterruptSource : procure apenas o evento Storage do objeto Window . Obrigatório para LocalStorageExpiry .

NOTA : Você deve configurar (s) fonte (s) quando inicializar o aplicativo. Por padrão, nenhuma interrupção está configurada. Você pode usar uma configuração análoga ao padrão ng-idle , importando DEFAULT_INTERRUPTSOURCES e passando essa referência a Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); .

Expirar extensível

Outro recurso portado do ng-idle é a capacidade de armazenar um valor de validade em alguma loja em que várias guias ou janelas executando o mesmo aplicativo podem gravar. Geralmente, esta loja é a localStorage , mas pode ser cookies ou o que você quiser. O objetivo deste vencimento e a loja de expiração é dupla: primeiro, impedir que uma janela não se divirta se dorme ou faz uma pausa por mais tempo que o período de tempo limite configurado. Segundo, ele pode ser usado para que a atividade em uma guia ou janela impeça outras guias ou janelas no mesmo aplicativo, desde que o tempo de tempo esteja.

Por padrão, é fornecido um tipo LocalStorageExpiry , que apenas acompanhará o vencimento no localStorage. Ele cumprirá todos os propósitos mencionados acima. Se você não deseja suportar várias guias ou Windows, pode usar SimpleExpiry . Em outras palavras, SimpleExpiry não coordena a última atividade entre as guias ou o Windows. Se você deseja armazenar o valor de expiração em outra loja, como cookies, precisará usar ou criar uma implementação que suporta isso. Você pode criar o seu próprio, estendendo IdleExpiry ou SimpleExpiry e configurando -o como um provedor para a classe IdleExpiry .

Suporte de instância ociosa múltipla

O injetor de dependência em angulares suporta uma estratégia de injeção hierárquica. Isso permite que você crie uma instância de Idle em qualquer escopo que você precise, e pode haver mais de uma instância. Isso permite que você tenha dois relógios separados, por exemplo, em dois elementos diferentes na página.
Se você usar o Expiry padrão ( LocalStorageExpiry ), precisará definir um nome para cada inatividade com Idle.setIdleName('yourIdleName') , caso contrário, a mesma chave será usada no localStorage e esse recurso não funcionará conforme o esperado.

Exemplo de uso de uso

Por exemplo, considere um aplicativo de email. Para aumentar a segurança, o aplicativo pode querer determinar quando o usuário está inativo e o registre, dando -lhes a chance de estender a sessão se ainda estiver no computador e apenas se distraiu. Além disso, para uma segurança ainda melhor, o servidor pode emitir à sessão do usuário um token de segurança que expira após 5 minutos de inatividade. O usuário pode levar muito mais tempo do que isso para digitar seu email e enviá -lo. Seria frustrante descobrir que você está conectado quando estava usando ativamente o software!

@ng-idle/core pode detectar que o usuário está clicando, digitando, tocando, rolando etc. e saber que o usuário ainda está ativo. Ele pode funcionar com @ng-idle/keepalive para ping no servidor a cada poucos minutos para mantê-los conectados.

Renderização do lado do servidor/universal

@ng-idle/core usa eventos DOM em vários alvos para detectar a atividade do usuário. No entanto, ao usar o SSR/Universal, a renderização, o aplicativo nem sempre está em execução no navegador e, portanto, pode não ter acesso a esses alvos DOM, fazendo com que seu aplicativo trava potencialmente ou lança erros enquanto tenta usar globais de navegador, como document e window através do @ng-idle.

EventTargetInterruptSource e todas as fontes de interrupção que derivam dela (como DocumentInterruptSource , WindowInterruptSource e StorageInterruptSource ) são projetadas para inicializar preguiçosamente os ouvintes de destino para eventos para compatibilidade com a renderização do lado do servidor. O EventTargetInterruptSource detectará se o seu aplicativo está em execução no navegador ou no servidor usando isPlatformServer e ignorará a inicialização dos ouvintes de destino do evento quando executado no servidor.

Em desenvolvimento

Este projeto foi desenvolvido usando a versão NodeJS encontrada no arquivo .nvmrc . Você pode ter problemas usando versões mais antigas. Experimente o NVM ou semelhante para gerenciar diferentes versões do nó simultaneamente. Se estiver usando o NVM, você pode executar nvm install para baixar e alternar para a versão correta.

Depois de clonar o repositório, instale todos os pacotes usando npm :

 npm install

Agora você pode construir e executar todos os testes uma vez com cobertura.

 npm test

Você também pode executar continuamente testes enquanto faz alterações em um projeto, executando npm run ng test <project name> ou ng test <project name> se você possui @angular/cli instalado globalmente.

 npm run ng test core
...
npm run ng test keepalive

Nota: Keepalive depende do núcleo. Se você estiver executando os testes contínuos acima, precisará o npm build ou npm run ng build core primeiro e depois de fazer alterações no núcleo. No entanto, npm test criará todos os módulos e executará os testes de uma só vez.

Contribuindo

Veja o guia contribuinte.