Web開発者は、システム開発において製品マネージャーのさまざまなニーズに直面する必要があることがよくあります。もちろん、それらのほとんどはまだ製品エクスペリエンスに役立ちます。たとえば、今日言及したときは、ページを更新して前後に更新し、ブラウザタグを閉じます。ユーザーの誤操作を避けるために、二次確認プロンプトボックスが必要です。誰もがこれに非常に精通していると思います。ブラウザが提供するBOMイベントメカニズムを使用すると、それを解決できます。 WindowオブジェクトのOnBeForeUnloadイベントを使用できます。プロダクトマネージャーがそのようなリクエストのみを行った場合、それは確かに理解できますが、これら以上のものが必要です...
たとえば、プロジェクト開発中、プロダクトマネージャーは、実装のために「改善計画」を提案しました。
ポップアップボックスは醜すぎるので、システムの全体的なスタイルと一致しません。独自のコンポーネントライブラリでダイアログを使用できませんか？とても良い質問...私はただ言いたい、あなたはあなたをアップすることができます...
更新は、タブページに表示されているコピーを閉じるのと同じです。あなたはそれを異なって扱う必要があります。閉じるときにプロンプトXXXとSSSを更新して、ユーザーがより明確になるようにします。まあ、ユーザーエクスペリエンスを考えると、それはとても良いことです。私はまだあなたができると言いたいです...実際、ブラウザが閉じてリフレッシュすると、それは異なって扱われています。プロンプトは異なりますが、カスタムパーツは異なるコピーライティングを表示することはできません。もちろん、いくつかのハッキング方法もありますが、複数のブラウザに適応することは困難です。各ブラウザ内の閉鎖タブとリフレッシュの実装メカニズムは異なります。
ログインするたびに、エージェントが電話システムにチェックインするために10秒遅延する必要があるのはなぜですか？この制限は削除できますか？ユーザーエクスペリエンスはあまりにも悪いです！また、削除したいと考えていますが、頻繁にチェックインして電話システムから外れて問題が発生します。ユーザーはブラウザをリフレッシュし、再度チェックインします。間隔が短い場合、電話システムが失敗します。この問題を回避するために、この制限を追加しましたが、振り返ると、今日議論しているトピックを入力できます。
更新されたタブとクロージングタブを区別します
ブラウザイベントに従ってタブページを更新するか閉じるかを区別したり、対応するアクションがトリガーされる前に異なるアクションを実行することはできません。ただし、上記の製品によって提起された第三者の意見については、実際に最適化することを検討できます。つまり、リフレッシュ時に10秒しか遅れず、一定期間後に新しいログインまたはタブページを閉じるときに遅れることはありません。
実際にこれを行うのは非常に簡単です。 Cookie、LocalStorageなどのブラウザのローカルストレージメカニズムを使用できます。この返信の後、キャッシュが無効になるため、SessionStorageはここでは使用できません。 Cookieに保存するとバイト数が増加するため、各リクエストの対応するネットワーク伝送が増加します。LocalStorageを使用します。その操作は非常にシンプルで、使用するフロントエンドフレームワークはAngularJSです。これは次のとおりです。
const max_wait_time = 10; const currentdate = new date（）。gettime（）; const lasteStleavetime = parseint（this。$ window.localStorage.getItem（ 'lastEstleavetime'）、10）|| currentDate; this.secondcounter = math.max（max_wait_time -math.ceil（（currentdate -lastleavetime） / 1000）、0）; if（this.secondcounter> 0）{this.logouttime interval = this。 false）。（（）=> {this.updateByStatus（this.avayaservice.status.offline）;}）;} else {this.updateByStatus（this.avayaservice.status.offline）;}上記のコードの主な機能は、システムに入った後、最初にLocalStorageに移動して最後の出口の時間を取得し、現在の時間を取得し、2回減算することです。値が10秒未満の場合、これは更新だと思います。値が10秒を超える場合は、タブを閉じたりログインしたりすることであると考え、次に異なる方法を実行してカスタマーサービスをより良いエクスペリエンスにすることができます。電話システムにチェックインする前に、システムへのエントリごとに10秒待つ必要はありません。プロダクトマネージャーはまだ非常に重要です。ええ、もしそれが彼の疑いのためでなければ、私たちはこの場所を最適化するようにならなかったかもしれません...もちろん、RDは最初にユーザーエクスペリエンスのこの思考を徐々に育てるべきです。カスタマーサービスの効率を改善できることが少しあっても、最適化する価値があります。
関連する出口コードを以下に投稿しましょう。ページが破壊されている限り、タブページを更新したり閉じたりするかどうかにかかわらず、電話システムからログアウトする操作を実行することを忘れていたので、入るたびに再度チェックインする必要があります。
//ページを更新するか、ページ$ window.onbeforeunload =（）=（）=（）=> {操作を返すと、ページデータがクリアされます。 ';}; //ページがアンロードされるたびに、ローカルストレージ時間を設定します。 $ window.onunload =（）=> {$ window.localStorage.setItem（ 'lastEstleavetime'、new date（）。getTime（））;};また、いくつかの問題に気付くかもしれません。つまり、ページを更新して閉じ、前方と後方に、ブラウザのデフォルトのセカンダリ確認ボックスから飛び出す必要がありますが、ユーザーが[出口システム]ボタンをクリックすると、コンポーネントライブラリのダイアログがポップアップする必要があります。特定のコードは次のとおりです。
onStatusClick(index, name) {if (name === 'Exit') {this.mgDialog.openConfirm({showClose: false,template: 'app/header/logoutDialog.html',controller: 'HeaderDialogController as dialog',data: {'title': 'Are you sure you want to exit the System？ '}}）上記は、編集者がブラウザページが更新されているか閉じているかを区別するために紹介するJSのコンテンツ全体です。私はそれが誰にでも役立つことを願っています！