Me preguntaba cuál sería la mejor manera de implementar un temporizador en la interfaz.
La idea es notificar al usuario después de 13 minutos de inactividad (= no se realizó una solicitud al backend) que se cerrará la sesión en 2 minutos.
Mi primer intento fue simplemente usar un Timer que se ejecuta cada segundo (estoy haciendo esto con Flutter web pero no debería marcar la diferencia) y cuenta regresivamente desde 15 minutos.
Luego probamos esto internamente y notamos que el navegador de alguna manera detiene la ejecución de JavaScript si el usuario cambia a una pestaña diferente durante mucho tiempo o si la computadora entra en modo de espera y el temporizador se detiene.
Ya tenemos un tiempo de espera de sesión después de 15 minutos desde el backend, esto es solo para mejorar la experiencia del usuario.
¿Cómo se implementaría esto correctamente?
Para abreviar, creo que es imposible solo usar frontend
Mientras examina, el código javascript se detendrá cada vez que cambie de pestaña o cierre la pestaña, la computadora está en espera. Así que no será bueno usar un tiempo muerto o algo así.
Usé una idea antes pero aún no la implementé porque cambié a una idea más simple con sessionStorage. Pero podría ver y de alguna manera tener éxito: cuando se realiza la última solicitud, se crea una cookie con un tiempo de caducidad de 13 minutos. Si se realiza la próxima solicitud, borre la cookie antigua y agregue una nueva cookie con 13 minutos también. Si la solicitud no se realiza durante 13 minutos, cuando caduque la cookie, active un evento para anunciar al usuario. Para escuchar el cambio de cookies, creo que hay muchas soluciones por ahí. Pero para mí, esta idea no es tan buena, así que la olvidé.
Si puede usar un backend de nodejs, puede intentar usar Server Send Event - SSE. Esto creará datos de envío unidireccionales. Por lo tanto, puede transmitir una parte de los datos. Y la interfaz escuchará esa transmisión y decidirá si se lo anuncia al usuario.