Web developers often have to face various needs of product managers in system development. Of course, most of them are still helpful to product experience. For example, when we mentioned today, refresh the page, forward and backward, and close the browser tag, in order to avoid user misoperation, a secondary confirmation prompt box is required. I believe everyone is very familiar with this. Using the BOM event mechanism provided by the browser can solve it. You can use the onbeforeunload event of the window object. If the product manager only makes such a request, it is indeed understandable, but it requires more than these...
For example, during a project development, the product manager proposed an "improvement plan" for our implementation:
Your pop-up box is too ugly, it doesn’t match the overall style of the system. Can’t you use the Dialog in our own component library? Very good question... I just want to say, you can you up...
Your refresh is the same as closing the copy displayed in the tab page. You need to treat it differently. Refresh the prompt XXX and SSS when closing, so that the user can be more clear. Well, considering the user experience, it's very good. I still want to say that you can you up... In fact, when the browser closes and refreshes, it has been treated differently. The prompts are different, but our custom parts cannot display different copywriting; of course, there are also some hack methods, but it is difficult to adapt to multiple browsers. The implementation mechanisms of closing tabs and refreshes within each browser will be different;
Why do you need to delay 10 seconds for the agent to check in to the phone system every time you log in? Can this limit be removed? The user experience is too bad! We also want to remove it, but there will be problems with frequent check-in and out of the phone system. The user refreshes the browser and checks in again. If the interval is short, the phone system will fail. In order to avoid this problem, we have added this restriction, but if we think back, we can enter the topic we are discussing today;
Differentiate between refreshing and closing tabs
We cannot distinguish whether to refresh or close the tab page according to the browser event, and then perform different actions before the corresponding action is triggered. However, for the third opinion raised by the product above, we can actually consider optimizing it, which is that it only delays 10 seconds when refreshing, and does not delay when new login or close the tab page after a period of time;
It is actually very simple to do this. You can use the browser's local storage mechanism, such as cookies, LocalStorage, etc. You cannot use SessionStorage here, because after this reply, the cache will be invalid. Since storing in the cookie will increase the number of bytes, the corresponding network transmission in each request will increase, we use LocalStorage; its operation is very simple, and the front-end framework we use is AngularJS, which is as follows:
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.logoutTimeInterval = this.$interval(()=> {this.secondCounter--;this.$scope.$digest();}, 1000, this.secondCounter, false).then(() => {this.updateByStatus(this.AvayaService.status.OFFLINE);});} else {this.updateByStatus(this.AvayaService.status.OFFLINE);}The main function of the above code is that after entering the system, it will first go to LocalStorage to get the time of the last exit, then get the current time, and subtract the two times. If the value is less than 10 seconds, we think this is a refresh. If the value is greater than 10 seconds, we think it is to close the tab or log in, and then we can execute different methods to give customer service a better experience. There is no need to wait 10 seconds for every entry into the system before checking in to the phone system. The product manager is still very important. Huh, if it weren't for his doubts, we might not have come to optimize this place... Of course, RD should gradually cultivate this thinking of user experience first. Even if there is a little bit that can improve customer service efficiency, it is worth our time to optimize;
Let’s post the relevant exit code below. I forgot to say before that whether it is refreshing or closing the tab page, as long as the page is destroyed, we will perform the operation of logging out of the phone system, so we need to check in again every time we come in;
//Refresh the page or close the page $window.onbeforeunload = () => {return 'The operation will cause the page data to be cleared, please be careful...';};//Every time when the page is unloaded, set the LocalStorage time; $window.onunload = () => {$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());};We may also notice some problems, that is, refresh, close the page, forward and backward, you need to jump out of the browser's default secondary confirmation box, but if the user clicks the exit system button, the Dialog in his component library must pop up, and both must not pop up. The specific code is as follows:
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?'}}).then(() => {this.$window.location.href = '/logout';this.$window.onbeforeunload = null;});} else {// Internal operations, everyone doesn't have to worry about...}}The above is the entire content of JS that the editor introduces to you to distinguish whether the browser page is refreshed or closed. I hope it will be helpful to everyone!