ng2 idle

導入

Angularアプリケーションでアイドルユーザーに応答するためのモジュール。これは、ng-idleモジュールの書き換えです。ただし、Angular 1を使用している場合は、そのモジュールを使用する必要があります。

メンテナーは望んでいました

角張ったコミュニティはあなたを必要としています！このモジュールのメンテナンスを引き継ぐための新しい開発者またはチームを探しています。これらは、関心のある候補者が考慮すべき責任です。

• Now：完全なベータプロセス（残りの主要なアイテムは、SSRと互換性のあるものにすることです）
• 次に：デモを更新し、APIドキュメントを追加します
• 進行中：バグ修正
• 進行中：Angularの新しいバージョンの新しいリリース
• 後で：APIを簡素化し、パッケージサイズを削減するためにリファクタリングします
• 後で：非ブラウザー環境のサポートを追加しますか？

理想的には、候補者：

• Angular 5+のアプリケーションの構築経験があります
• アクティブな角度開発者であり、角度リリーススケジュールに調整されています
• オープンソースと角張ったコミュニティが大好きです
• モジュラーと軽量の（可能な限り）パッケージのリリースに取り組んでいます
• DOMイベント、JavaScriptタイマーとインターバル、WebストレージAPI、およびCookieについての実力的な理解があります
• KarmaとJasmineを使用したテストを理解し、コードカバレッジの高い割合にコミットしています
• 寄稿ガイドを実力的に理解しており、他の人からの貢献を受け入れ、GitHubと関連ツールを効果的に使用できます。
• チケットをトリアージして回答するか、他の人に委任する時間があります
• パッケージをリリースするためのNPMの基本的な理解があります

興味があれば連絡してください！

デモ

https://grbsk.github.io/ng2-idleにアクセスして、クイックスタートの指示を含む簡単な例を表示します。

クイックスタート

@ng-idleはnpm経由で出荷されます。 Angularの最新バージョンの次のコマンドを使用してパッケージをインストールできます。

 npm install --save @ng-idle/core

パッケージをアプリケーションに統合して構成するには、さらにいくつかのステップが必要です。ソースについては、 @ng-idle-exampleにアクセスしてください。

設計上の考慮事項

このモジュールの主要なアプリケーションは、ユーザーがアイドル状態であることを検出することです。また、ユーザーに差し迫ったタイムアウトを警告し、タイムアウトするために使用することもできます。このモジュールのコアは、ユーザーがアクティブまたはアイドル状態であることを検出し、その情報をアプリケーションに適切に応答できるときに検出するために、構成に基づいて最善を尽くすIdleサービスです。

モジュール化

コア機能は、NPM経由の@ng-idle/coreパッケージにあります。

機能を拡張するための追加モジュール：

• @ng-idle/keepalive （以下を参照）

拡張可能なキープライブ統合

セッション管理に使用される一般的なユースケースでは、ユーザーがまだログインしてアクティブになっていることを定期的にサーバーに信号を送信する必要がある場合があります。その機能が必要な場合、 @ng-idleオプションで@ng-idle/keepaliveと統合できます。 @ng-idleユーザーがアクティブになっている間に@ng-idle/keepaliveにpingに指示し、アイドル状態またはタイムアウトしたら停止します。ユーザーがアクティビティを再開するか、アイドル状態がリセットされると、すぐにpingしてから、pingを再開します。 Keepalive Integrationはオプションであり、この機能を取得するには@ng-idle/keepalive個別にインストールして構成する必要があります。 KeepaliveSvc拡張し、 KeepaliveSvcクラスのアプリケーションでプロバイダーとして構成することにより、独自の実装を実装できます。

拡張可能な割り込み

割り込みとは、インプットソース（通常はユーザーからのものですが、他のタブやイベントのようなものである可能性があります）は、アイドル時計を中断またはリセットする必要があることをIdleするために使用できます。 ng-idleとは異なり、これらのソースはハードコードされていません。あなたの目的に合わせて、 InterruptSourceまたは組み込みのソースを拡張できます。この機能は、特定のユースケースを悩ませる可能性のある入力ノイズを処理するのにも役立ちます。また、ドキュメント全体やウィンドウではなく、ページ上の特定の要素をターゲットにするためにも使用できます。次のソースがこのパッケージに組み込まれています：

• InterruptSource （要約）：独自のソースを作成するために実装できるベースタイプ。
• EventTargetInterruptSource ： HTMLElementやWindowなどのEventTargetを実装するオブジェクト。割り込みを引き起こすイベントを含むソースとスペース区切り文字列を取り入れます。
• DocumentInterruptSource ： document.documentElement （ htmlノード）まで泡立つイベント（スペース区切り文字列）を探します。
• WindowInterruptSource ： Windowまで泡立つイベント（スペース区切り文字列）を探します。
• StorageInterruptSource ： WindowオブジェクトのStorageイベントのみを探します。 LocalStorageExpiryの義務。

注：アプリケーションを初期化するときは、ソースを自分で構成する必要があります。デフォルトでは、割り込みは構成されていません。 DEFAULT_INTERRUPTSOURCESをインポートし、その参照をIdle.setInterrupts(DEFAULT_INTERRUPTSOURCES);に渡すことによりng-idleデフォルトに類似した構成を使用できます。 。

拡張可能な有効期限

ng-idleから移植されたもう1つの機能は、同じアプリケーションを実行している複数のタブまたはWindowsが書き込むことができる一部のストアに有効期限の値を保存する機能です。一般的に、このストアはlocalStorageですが、Cookieまたは必要なものである可能性があります。このExpiryとExpiryストアの目的は2つあります。まず、設定されたタイムアウト期間よりも長くスリープまたは一時停止する場合、ウィンドウがタイミングを出さないようにします。第二に、1つのタブまたはウィンドウのアクティビティが同じアプリケーションの他のタブまたはウィンドウをタイミングアウトするのを防ぐために使用できます。

デフォルトでは、 LocalStorageExpiryタイプが提供されています。これは、LocalStorageの有効期限を追跡するだけです。上記のすべての目的を果たします。複数のタブやWindowsをサポートしたくない場合は、 SimpleExpiry使用できます。言い換えれば、 SimpleExpiryタブまたはWindows間の最後のアクティビティを調整しません。クッキーなどの別のストアに有効期限の値を保存する場合は、それをサポートする実装を使用または作成する必要があります。 IdleExpiryまたはSimpleExpiryを拡張し、 IdleExpiryクラスのプロバイダーとして構成することにより、独自に作成できます。

複数のアイドルインスタンスサポート

Angularの依存関係インジェクターは、階層注入戦略をサポートします。これにより、必要な範囲でIdleのインスタンスを作成でき、複数のインスタンスがある場合があります。これにより、たとえばページ上の2つの異なる要素に2つの別々の時計を使用できます。
デフォルトのExpiry（ LocalStorageExpiry ）を使用する場合、アイドルごとに各アイドルの名前を定義する必要がありますIdle.setIdleName('yourIdleName') 。

ユースケースの例

たとえば、電子メールアプリケーションを検討してください。セキュリティの向上のために、アプリケーションはユーザーがいつアクティブであるかを判断し、それらをログアウトすることを希望する場合があり、コンピューターにまだいて気を散らされた場合にセッションを拡張する機会を与えます。さらに、さらに優れたセキュリティのために、サーバーはユーザーのセッションを発行し、5分間の不活動後に有効期限が切れるセキュリティトークンを発行する場合があります。ユーザーは、電子メールを入力して送信するのにそれよりもはるかに時間がかかる場合があります。ソフトウェアを積極的に使用しているときにログアウトされているのを見つけるのはイライラするでしょう！

@ng-idle/coreユーザーがクリック、タイピング、タッチ、スクロールなどを検出し、ユーザーがまだアクティブであることを知ることができます。 @ng-idle/keepaliveで動作し、数分ごとにサーバーをpingしてログインし続けることができます。この場合、ユーザーが何かをしている限り、彼らはログインし続けることができます。コンピューターから離れた場合、警告ダイアログを提示し、カウントダウンの後、それらをログアウトします。

サーバー側のレンダリング/ユニバーサル

@ng-idle/coreは、さまざまなターゲットでDOMイベントを使用してユーザーアクティビティを検出します。ただし、SSR/Universalレンダリングを使用する場合、アプリは常にブラウザで実行されているわけではないため、これらのDOMターゲットにアクセスできない場合があり、 @NG-Idleを介してdocumentやwindowなどのブラウザグローバルを使用しようとすると、アプリが潜在的にクラッシュまたはスローエラーが発生します。

EventTargetInterruptSourceおよびそれに由来するすべての割り込みソース（ DocumentInterruptSource 、 WindowInterruptSource 、 StorageInterruptSourceなど）は、サーバー側のレンダリングと互換性のためにイベントターゲットリスナーをゆるい初期化するように設計されています。 EventTargetInterruptSourceは、 isPlatformServerを使用してアプリがブラウザまたはサーバーで実行されているかどうかを検出し、サーバーで実行時にイベントターゲットリスナーの初期化をスキップします。

現像

このプロジェクトは、 .nvmrcファイルにあるNodeJSバージョンを使用して開発されました。古いバージョンを使用して問題が発生する可能性があります。 NVMまたは同様を試して、さまざまなバージョンのノードを同時に管理します。 NVMを使用する場合、 nvm installを実行して、正しいバージョンにダウンロードして切り替えることができます。

リポジトリをクローニングしたら、 npmを使用してすべてのパッケージをインストールします。

 npm install

これで、すべてのテストをカバーして1回ビルドして実行できます。

 npm test

グローバルに@angular/cliがインストールされている場合はnpm run ng test <project name>またはng test <project name> <プロジェクト名>を実行することにより、プロジェクトに変更を加えながらテストを継続的に実行することもできます。

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

注：KeepAliveはコアに依存します。上記の連続テストを実行している場合は、最初にnpm buildまたはnpm run ng build core必要があります。ただし、 npm testすべてのモジュールを構築し、テストを1発のショットで実行します。

貢献

寄稿ガイドを参照してください。