ng2 idle
1.0.0
Un módulo para responder a los usuarios inactivos en aplicaciones angulares. Esta es una reescritura del módulo Ng-Icle; Sin embargo, si está utilizando Angular 1, debe usar ese módulo.
¡La comunidad angular te necesita! Estoy buscando un nuevo desarrollador o equipo para hacerse cargo del mantenimiento de este módulo. Estas son las responsabilidades que cualquier candidato interesado debe considerar:
Idealmente, un candidato:
¡Póngase en contacto si está interesado!
Visite https://grbsk.github.io/ng2-idle para ver un ejemplo simple con instrucciones de inicio rápido.
@ng-idle se envía a través de NPM. Puede instalar el paquete utilizando el siguiente comando para la última versión compatible de Angular:
npm install --save @ng-idle/core
La integración y la configuración del paquete en su aplicación requiere algunos pasos más. Visite @ng-idle-exame para obtener una fuente e instrucciones sobre cómo ponerse en marcha.
La aplicación principal de este módulo es detectar cuándo los usuarios están inactivos. También se puede usar para advertir a los usuarios de un tiempo de espera inminente, y luego cronometrarlos. El núcleo de este módulo es el servicio Idle que hace lo mejor posible, en función de su configuración, para detectar cuándo un usuario está activo o inactivo y transmitir esa información a su aplicación para que pueda responder adecuadamente.
La funcionalidad central se puede encontrar en el paquete @ng-idle/core a través de NPM.
Módulos adicionales para extender la funcionalidad:
@ng-idle/keepalive (ver más abajo) En un caso de uso común en el que se usa para la administración de sesiones, es posible que deba indicarle al servidor periódicamente que el usuario todavía está iniciado y activo. Si necesita esa funcionalidad, @ng-idle puede integrarse opcionalmente con @ng-idle/keepalive . @ng-idle instruirá @ng-idle/keepalive a ping mientras el usuario está activo, y se detenga una vez que salgan inactivos o salgan tiempo fuera. Cuando el usuario reanuda la actividad o el estado inactivo se reinicie, se complementará de inmediato y luego reanudará la ping. Tenga en cuenta que la integración Keepalive es opcional, y debe instalar y configurar @ng-idle/keepalive por separado para obtener esta funcionalidad. Puede implementar el suyo extendiendo KeepaliveSvc y configurándolo como proveedor en su aplicación para la clase KeepaliveSvc .
Una interrupción es cualquier fuente de entrada (típicamente del usuario, pero podría ser cosas como otras pestañas o un evento) que se puede usar para Idle que el reloj inactivo debe interrumpirse o restablecerse. A diferencia de ng-idle , estas fuentes no están codificadas; Puede extender InterruptSource o cualquiera de las fuentes incorporadas para adaptarse a sus propósitos. Esta característica también es útil para manejar el ruido de entrada que puede plagar su caso de uso particular. También se puede usar para dirigir elementos específicos en una página en lugar de todo el documento o ventana. Las siguientes fuentes vienen integradas en este paquete:
InterruptSource (Resumen): un tipo base que puede implementar para hacer su propia fuente.EventTargetInterruptSource : cualquier objeto que implementa EventTarget , como un HTMLElement o Window . Toma el objeto que es la fuente y una cadena delimitada de espacio que contiene los eventos que causan una interrupción.DocumentInterruptSource : busca eventos (en una cadena delimitada de espacio) que burbujean hasta el document.documentElement (nodo html ).WindowInterruptSource : busca eventos (en una cadena delimitada de espacio) que burbujean hasta la Window .StorageInterruptSource : solo busca el evento Storage del objeto Window . Obligatorio para LocalStorageExpiry . Nota : debe configurar los fuente usted mismo cuando inicialice la aplicación. Por defecto, no se configuran interrupciones. Puede usar una configuración análoga al valor predeterminado ng-idle importando DEFAULT_INTERRUPTSOURCES y pasando esa referencia a Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); .
Otra característica portada por ng-idle es la capacidad de almacenar un valor de vencimiento en alguna tienda donde pueden escribir múltiples pestañas o ventanas que ejecutan la misma aplicación. Comúnmente, esta tienda es el localStorage , pero podría ser cookies o lo que desee. El propósito de esta cadena de vencimiento y la tienda de vencimiento es doble: primero, para evitar que una ventana no se agote si duerme o se detenga más tiempo que el período de tiempo de espera configurado. En segundo lugar, se puede usar para que la actividad en una pestaña o ventana evite que otras pestañas o ventanas en la misma aplicación se agoten.
Por defecto, se proporciona un tipo de LocalStorageExpiry , que solo realizará un seguimiento de la expiración en LocalStorage. Cumplirá todos los propósitos mencionados anteriormente. Si no desea admitir múltiples pestañas o ventanas, puede usar SimpleExpiry . En otras palabras, SimpleExpiry no coordina la última actividad entre pestañas o ventanas. Si desea almacenar el valor de vencimiento en otra tienda, como las cookies, necesitará usar o crear una implementación que lo admita. Puede crear el suyo extendiendo IdleExpiry o SimpleExpiry y configurándolo como proveedor para la clase IdleExpiry .
El inyector de dependencia en Angular admite una estrategia de inyección jerárquica. Esto le permite crear una instancia de Idle en cualquier alcance que necesite, y puede haber más de una instancia. Esto le permite tener dos relojes separados, por ejemplo, en dos elementos diferentes en la página.
Si usa el vencimiento predeterminado ( LocalStorageExpiry ), deberá definir un nombre para cada inactivo con Idle.setIdleName('yourIdleName') , de lo contrario, la misma clave se utilizará en el almacenamiento local y esta característica no funcionará como se esperaba.
Por ejemplo, considere una aplicación de correo electrónico. Para una mayor seguridad, la aplicación puede desear determinar cuándo el usuario está inactivo y lo registra, dándoles la oportunidad de extender su sesión si todavía están en la computadora y se distrae. Además, para una seguridad aún mejor, el servidor puede emitir la sesión del usuario un token de seguridad que expira después de 5 minutos de inactividad. El usuario puede tomar mucho más tiempo que eso para escribir su correo electrónico y enviarlo. ¡Sería frustrante descubrir que está desconectado cuando estaba utilizando activamente el software!
@ng-idle/core puede detectar que el usuario está haciendo clic, escribiendo, tocando, desplazándose, etc. y saber que el usuario todavía está activo. Puede funcionar con @ng-idle/keepalive para hacer ping el servidor cada pocos minutos para mantenerlos iniciados.
@ng-idle/core usa eventos DOM en varios objetivos para detectar la actividad del usuario. Sin embargo, cuando se usa SSR/Universal Rendering, la aplicación no siempre se ejecuta en el navegador y, por lo tanto, puede no tener acceso a estos objetivos DOM, lo que hace que su aplicación se bloquee o arroje errores, ya que intenta usar globos del navegador como document y window a través de @ng-idle.
EventTargetInterruptSource y todas las fuentes de interrupción que se derivan (como DocumentInterruptSource , WindowInterruptSource y StorageInterruptSource ) están diseñados para inicializar perezosamente los oyentes de destino para la compatibilidad con la representación del lado del servidor. EventTargetInterruptSource detectará si su aplicación se está ejecutando en el navegador o en el servidor utilizando isPlatformServer y omitirá la inicialización de los oyentes de destino del evento cuando se ejecute en el servidor.
Este proyecto se desarrolló utilizando la versión NodeJS que se encuentra en el archivo .nvmrc . Puede experimentar problemas con versiones anteriores. Pruebe NVM o similar para administrar diferentes versiones del nodo simultáneamente. Si usa NVM, puede ejecutar nvm install para descargar y cambiar a la versión correcta.
Una vez que haya clonado el repositorio, instale todos los paquetes con npm :
npm install
Ahora puede construir y ejecutar todas las pruebas una vez con cobertura.
npm test
También puede ejecutar pruebas continuamente mientras realiza cambios en un proyecto ejecutando npm run ng test <project name> o ng test <project name> Si tiene @angular/cli instalado a nivel mundial.
npm run ng test core
...
npm run ng test keepalive
Nota: KeepAlive depende del núcleo. Si está ejecutando las pruebas continuas anteriores, necesitará npm build o npm run ng build core primero y después de hacer cambios en el núcleo. Sin embargo, npm test construirá todos los módulos y ejecutará las pruebas de una sola vez.
Vea la guía contribuyente.
