Os desenvolvedores da Web geralmente precisam enfrentar várias necessidades dos gerentes de produto no desenvolvimento do sistema. Obviamente, a maioria deles ainda é útil para a experiência do produto. Por exemplo, quando mencionamos hoje, atualize a página, para frente e para trás e feche a tag do navegador, a fim de evitar a mioperação do usuário, é necessária uma caixa de prompt de confirmação secundária. Eu acredito que todos estão muito familiarizados com isso. O uso do mecanismo de eventos BOM fornecido pelo navegador pode resolvê -lo. Você pode usar o evento OnBeforeUnload do objeto da janela. Se o gerente do produto apenas fizer esse pedido, é realmente compreensível, mas requer mais do que estes ...
Por exemplo, durante um desenvolvimento de projetos, o gerente de produtos propôs um "plano de melhoria" para nossa implementação:
Sua caixa pop-up é muito feia, não corresponde ao estilo geral do sistema. Você não pode usar a caixa de diálogo em nossa própria biblioteca de componentes? Muito boa pergunta ... eu só quero dizer, você pode acordar ...
Sua atualização é a mesma que o fechamento da cópia exibida na página da guia. Você precisa tratá -lo de maneira diferente. Atualize o prompt XXX e o SSS ao fechar, para que o usuário possa ser mais claro. Bem, considerando a experiência do usuário, é muito bom. Ainda quero dizer que você pode acordar ... Na verdade, quando o navegador fecha e refresca, ele foi tratado de maneira diferente. Os avisos são diferentes, mas nossas peças personalizadas não podem exibir diferentes redatores; Obviamente, também existem alguns métodos de hack, mas é difícil se adaptar a vários navegadores. Os mecanismos de implementação de fechamento de guias e atualizações em cada navegador serão diferentes;
Por que você precisa atrasar 10 segundos para o agente fazer o check -in no sistema telefônico toda vez que você efetuar login? Esse limite pode ser removido? A experiência do usuário é muito ruim! Também queremos removê-lo, mas haverá problemas com o check-in e fora do sistema telefônico frequente. O usuário atualiza o navegador e faz check -in novamente. Se o intervalo for curto, o sistema telefônico falhará. Para evitar esse problema, adicionamos essa restrição, mas se pensarmos, podemos entrar no tópico que estamos discutindo hoje;
Diferencie as guias refrescantes e de fechamento
Não podemos distinguir se devemos atualizar ou fechar a página da guia de acordo com o evento do navegador e, em seguida, execute ações diferentes antes que a ação correspondente seja acionada. No entanto, para a terceira opinião levantada pelo produto acima, podemos realmente considerá -lo otimizá -lo, que é que ele atrasa apenas 10 segundos quando refrescante e não atrasa quando o novo login ou fechar a página da guia após um período de tempo;
Na verdade, é muito simples fazer isso. Você pode usar o mecanismo de armazenamento local do navegador, como cookies, localStorage etc. Você não pode usar o SessionStorage aqui, porque após essa resposta, o cache será inválido. Como o armazenamento no cookie aumentará o número de bytes, a transmissão de rede correspondente em cada solicitação aumentará, usamos o LocalSorage; Sua operação é muito simples e a estrutura front-end que usamos é o AngularJS, que é o seguinte:
const max_wait_time = 10; const currentDate = new date (). gettime (); const lvestleAvetime = parseint (this. CurrentDate; this.SecondCounter = Math.max (max_wait_time - math.ceil ((currentDate - lastLevetime) / 1000), 0); if (this.SecondCounter> 0) {this. false) .then (() => {this.UpDateByStatus (this.avayaservice.status.offline);});} else {this.updatebyStatus (this.avayaservice.status.offline);}A principal função do código acima é que, depois de entrar no sistema, ele irá primeiro ao LocalSorage para obter o tempo da última saída, depois obter o horário atual e subtrair as duas vezes. Se o valor for inferior a 10 segundos, achamos que isso é uma atualização. Se o valor for superior a 10 segundos, achamos que é fechar a guia ou fazer login e, em seguida, podemos executar diferentes métodos para proporcionar uma melhor experiência de serviço ao cliente. Não há necessidade de esperar 10 segundos para cada entrada no sistema antes de fazer o check -in no sistema telefônico. O gerente de produto ainda é muito importante. Huh, se não fosse por suas dúvidas, talvez não tenhamos otimizado esse lugar ... é claro, a RD deveria cultivar gradualmente esse pensamento da experiência do usuário primeiro. Mesmo que haja um pouco que possa melhorar a eficiência do atendimento ao cliente, vale a pena otimizar;
Vamos postar o código de saída relevante abaixo. Esqueci de dizer antes que, se está refrescante ou fechando a página da guia, desde que a página seja destruída, executaremos a operação de logoff do sistema telefônico, por isso precisamos fazer o check -in novamente toda vez que entramos;
// Atualize a página ou feche a página $ window.onbeforeunload = () => {retorna 'A operação fará com que os dados da página sejam limpos, tenha cuidado ...';}; // Toda vez que a página estiver descarregada, defina o tempo local; $ window.onunload = () => {$ window.localstorage.setItem ('LURESTLEAVETIME', new Date (). getTime ());};Também podemos notar alguns problemas, ou seja, atualizar, fechar a página, para frente e para trás, você precisa sair da caixa de confirmação secundária padrão do navegador, mas se o usuário clicar no botão de saída do sistema, a caixa de diálogo em sua biblioteca de componentes deve aparecer e ambos não forem exibidos. O código específico é o seguinte:
ONSTATUSCLICK (índice, nome) {if (name === 'exit') {this.mgdialog.openconfirm ({ShowClose: false, modelo: 'app/header/logoutDialog.html', controlador: 'headerdialogling como systems? => {this. $ window.location.href = '/Logout'; This.$window.onbeforeunload = null;});} else {// operações internas, todo mundo não precisa se preocupar com ...}}O exposto acima é o conteúdo inteiro do JS que o editor apresenta a você para distinguir se a página do navegador está atualizada ou fechada. Espero que seja útil para todos!