Como controlar o tempo de acesso do usuário

Recentemente, na empresa onde eu trabalho, o pessoal de negócios e UX trouxeram uma demanda para o time de desenvolvimento que se tratava de construir um dashboard com várias informações do comportamento dos nossos clientes finais no sistema web, um item que logo levou uma discussão foram informações desejadas a respeito do tempo de acesso do usuário no sistema, o time de desenvolvimento logo levantou que essa feature não era possível, conforme argumentado, podemos registrar o momento em que o usuário carregou a página, ou então fez login, porém não teríamos como saber o tempo que ele passou usando o sistema depois disso, a menos que o usuário efetuasse um logout, o que as pessoas geralmente não fazem, elas simplesmente fecham a janela no navegador. Algumas possibilidades para implementar essa solução foram levantadas, entre elas:

• Fazer a aplicação enviar requisições periodicamente para informar que o usuário permanece online, dessa forma podemos aproximar o tempo de uso contanto os períodos.
• Utilizar scripts de terceiros que implementam essa solução.

Eu fiquei pensando sobre isso um tempo depois, porque, apesar de existir o evento 'unload' da página que sinaliza do descarregamento e é disparado ao fechar o navegador, usa-lo para disparar uma requisição ao backend não parecia que iria dar certo, já que é uma execução assíncrona, e a pagina não existiria mais dentro de pouco tempo, arrumar um jeito de atrasar o descarregamento também não proporcionaria uma experiência agradável. Tendo isso em mente e depois de pesquisar um objeto JavaScript `window.navigator` que representa o navegador e contém um método, `sendBeacon`, para disparar requisições sem depender da página, e sem ser cancelado pelo descarregamento. Eu depois apresentei essa solução para os demais integrantes do time que também adicionaram o problema do usuário estar utilizando o sistema via dispositivo móvel, ele poderia não encerrar o navegar propriamente dito, apenas trocar para outra aplicação ou desligar a tela, por isso foi acrescentada requisições quando a visibilidade do navegador é altera, assim estaríamos cobertos nesses casos. Vou colocar aqui o link dos repositórios de projetos muito simples, apenas a titulo de demostração, o objetivo é apenas detectar as ações de carregamento, descarregamento e mudança de visibilidade por parte do usuário e imprimir no terminal no backend. Obviamente quem desejar usar deverá criar uma lógica para o cálculo do tempo e registro em um banco de dados, eu acho interessante criar uma tabela de log de ação do usuário e efetuar o cálculo posteriormente.

PS: Neste projeto eu utilizei TypeScript apenas com finalidade de praticar, visto que em geral eu não utilizo, mas devido a simplicidade do projeto, JavaScript já também seria adequado.

Seguem os repositórios exemplo:

Front: https://github.com/myke-oliveira/controle-acesso-frontend

Back: https://github.com/myke-oliveira/controle-acesso-backend

Referência

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon