Los desarrolladores web a menudo tienen que enfrentar diversas necesidades de los gerentes de productos en el desarrollo del sistema. Por supuesto, la mayoría de ellos siguen siendo útiles para la experiencia del producto. Por ejemplo, cuando mencionamos hoy, actualice la página, hacia adelante y hacia atrás, y cierre la etiqueta del navegador, para evitar la incapacidad del usuario, se requiere un cuadro de solicitud de confirmación secundaria. Creo que todos están muy familiarizados con esto. El uso del mecanismo de eventos BOM proporcionado por el navegador puede resolverlo. Puede usar el evento OnbeforeNunload del objeto de la ventana. Si el gerente de producto solo realiza dicha solicitud, es realmente comprensible, pero requiere más que estos ...
Por ejemplo, durante el desarrollo de un proyecto, el gerente de producto propuso un "plan de mejora" para nuestra implementación:
Su caja emergente es demasiado fea, no coincide con el estilo general del sistema. ¿No puede usar el diálogo en nuestra propia biblioteca de componentes? Muy buena pregunta ... solo quiero decir, te puedes levantar ...
Su actualización es lo mismo que cerrar la copia que se muestra en la página de pestañas. Necesitas tratarlo de manera diferente. Actualice la solicitud XXX y SSS al cerrar, para que el usuario pueda ser más claro. Bueno, teniendo en cuenta la experiencia del usuario, es muy bueno. Todavía quiero decir que puedes ... de hecho, cuando el navegador se cierra y se actualiza, ha sido tratado de manera diferente. Las indicaciones son diferentes, pero nuestras piezas personalizadas no pueden mostrar diferentes redactores; Por supuesto, también hay algunos métodos de hack, pero es difícil adaptarse a múltiples navegadores. Los mecanismos de implementación de las pestañas de cierre y las actualizaciones dentro de cada navegador serán diferentes;
¿Por qué necesita retrasar 10 segundos para que el agente se registre en el sistema telefónico cada vez que inicia sesión? ¿Se puede eliminar este límite? ¡La experiencia del usuario es una lástima! También queremos eliminarlo, pero habrá problemas con el check-in frecuente y el sistema telefónico. El usuario actualiza el navegador y vuelve a registrarse. Si el intervalo es corto, el sistema telefónico fallará. Para evitar este problema, hemos agregado esta restricción, pero si pensamos, podemos ingresar el tema que estamos discutiendo hoy;
Diferenciar entre pestañas refrescantes y de cierre
No podemos distinguir si actualizar o cerrar la página de pestaña de acuerdo con el evento del navegador, y luego realizar diferentes acciones antes de que se active la acción correspondiente. Sin embargo, para la tercera opinión planteada por el producto anterior, podemos considerar la optimización, que es que solo retrasa 10 segundos cuando se actualiza, y no se retrasa cuando el nuevo inicio de sesión o cierre la página de pestañas después de un período de tiempo;
En realidad, es muy simple hacer esto. Puede usar el mecanismo de almacenamiento local del navegador, como Cookies, LocalStorage, etc. No puede usar SessionStorage aquí, porque después de esta respuesta, el caché no será válido. Dado que el almacenamiento en la cookie aumentará el número de bytes, la transmisión de red correspondiente en cada solicitud aumentará, usamos LocalStorage; Su funcionamiento es muy simple, y el marco frontal que usamos es AngularJS, que es el siguiente:
const max_wait_time = 10; const currentDate = new Date (). getTime (); consttleAveTime = parseInt (this. $ window.localstorage.getItem ('lastleApetime'), 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. this.secondCounter, falso) .then (() => {this.updateByStatus (this.avayaservice.status.offline);});} else {this.updateByStatus (this.avayaservice.status.offline);}La función principal del código anterior es que después de ingresar al sistema, primero irá a LocalStorage para obtener el momento de la última salida, luego obtener el tiempo actual y reste las dos veces. Si el valor es inferior a 10 segundos, creemos que esto es una actualización. Si el valor es mayor de 10 segundos, creemos que es cerrar la pestaña o iniciar sesión, y luego podemos ejecutar diferentes métodos para brindar al servicio al cliente una mejor experiencia. No es necesario esperar 10 segundos para cada entrada al sistema antes de registrarse en el sistema telefónico. El gerente de producto sigue siendo muy importante. Huh, si no fuera por sus dudas, podríamos no haber venido a optimizar este lugar ... Por supuesto, RD debería cultivar gradualmente este pensamiento de la experiencia del usuario primero. Incluso si hay un poco que pueda mejorar la eficiencia del servicio al cliente, vale la pena optimizar nuestro tiempo;
Publicemos el código de salida relevante a continuación. Olvidé decir antes que si es refrescante o cerrando la página de pestañas, siempre que la página sea destruida, realizaremos el funcionamiento de la sesión fuera del sistema telefónico, por lo que debemos registrarse nuevamente cada vez que entremos;
// Actualiza la página o cierre la página $ Window.onbeforeUnload = () => {return 'La operación hará que los datos de la página se borrarán, ten cuidado ...';}; // Cada vez que la página se descarga, establezca el tiempo de almacenamiento local; $ window.Onunload = () => {$ window.localStorage.SetItem ('LastEdleAveTime', nueva fecha (). GetTime ());};También podemos notar algunos problemas, es decir, actualizar, cerrar la página, hacia adelante y hacia atrás, debe saltar del cuadro de confirmación secundaria predeterminada del navegador, pero si el usuario hace clic en el botón Sistema de salida, el cuadro de diálogo en su biblioteca de componentes debe aparecer, y ambos no deben aparecer. El código específico es el siguiente:
OnStatusClick (index, name) {if (name ==== 'Exit') {this.mgdialog.openconfirm ({showClose: false, plantlate: 'app/header/logOutDialog.html', controlador: 'HeaderdialogController sistema? '}}). Entonces (() => {this. $ window.location.href =' /logout';this.$window.onbeforeunload = null;});} else {// operaciones internas, no todos tienen que preocuparse por ...}}}}Lo anterior es todo el contenido de JS que el editor le presenta para distinguir si la página del navegador está actualizada o cerrada. ¡Espero que sea útil para todos!