Como detectar quando o navegador acelera a desconexão de temporizadores e websockets depois que um usuário sai de uma guia ou desliga a tela? (javascript)

12

Contexto

Um jogo enviado como um aplicativo da web progressivo que possui timers ( setTimeout, setInterval) e conexões de soquete da web para obter comunicação em tempo real.

O que está acontecendo

Tudo está bem desde que o usuário permaneça no aplicativo. Mas quando o usuário acessa outra guia ou outro aplicativo ou desliga a tela (no caso de dispositivos móveis), ele se torna um "mundo desconhecido infernal".

  • Os Websockets podem ou não ficar "em pausa" ou "desativados"
  • Os temporizadores parecem estar sendo regulados ou debulhados.

Esse comportamento parece depender de navegadores e plataforma e, talvez, até depender do comportamento específico do usuário. Eu acho que navegadores e sistemas operacionais têm seu próprio ciclo de vida / mecanismos para economizar bateria e / ou computação.

Quando o usuário volta, o aplicativo está em um estado desconhecido e estou lutando para restaurar o estado corretamente.

Em relação aos websockets, tenho reconexão automática com socket.io e reconexão com websocket, mas não basta resolver tudo.

Procurando respostas

  • Quais são os "ciclos de vida" dos diferentes navegadores em relação a esses? Isso está documentado? Quando eles decidem desligar e acelerar?
  • O que eles fazem exatamente nos websockets? Navegadores apenas os desconectam?
  • O que eles fazem exatamente com os temporizadores? Eles os estrangulam ou denunciam ou algo mais?
  • O que acontece com a execução de javascript em geral? Pausado / destruído / regulado?
  • Existe uma maneira de conectar-se a algum tipo de evento do ciclo de vida do navegador quando ele desativa as coisas? A única coisa que encontrei pode ser a API de visibilidade

  • Existe uma maneira de reproduzir artificialmente esse comportamento para poder testar soluções? É especialmente difícil na área de trabalho. Os Websockets não podem ser desativados e os desenvolvedores de cromo não parecem ter pressa para ajudar um problema a partir de 2014 (!): Os Websockets não estão incluídos ao usar a otimização de conexão

  • Independentemente do exposto, existe uma solução pragmática entre navegadores para detectar / resolver esse problema? (por exemplo, por experiência, o Firefox na área de trabalho parece se comportar completamente diferente em comparação com o Chrome e um iPhone será desconectado com muito mais frequência do que um Android)

Links Relacionados

javascript websocket cross-browser progressive-web-apps Kev
fonte
11
Este é apenas um rascunho wicg.github.io/page-lifecycle .
norbertpy 27/03

Respostas:

7

Não tenho muita certeza, mas você pode usar profissionais de serviço. Tanto quanto eu sei, eles são executados em segundo plano, mesmo que a guia não seja aberta e são finalizados se a guia for fechada.

Btw. os ciclos de vida das guias do navegador parecem diferentes em todos os navegadores, pois cada navegador lida com isso de maneira diferente. Pelo que vejo, o navegador pode congelar guias se o navegador precisar de mais memória para outras coisas.

Aqui estão os documentos do Chrome .

Lembrei-me de que existem alguns eventos, como onload, que informam se um usuário saiu ou reabriu a guia. Você pode usar esses eventos para reconectar etc.

Mointy
fonte
Esta é uma ideia interessante. Isso é algo que você fez com algum código para compartilhar?
Kev 28/03
Sinto muito, mas não tenho um código de exemplo no momento, mas se você procurar profissionais de serviço, há vários tutoriais sobre como configurá-los. A única coisa que você precisa fazer é colocar apenas um pequeno código no qual você se conecta ao servidor ws e console.log()quando receber mensagens do servidor ws. No chrome, você pode abrir o console do seu técnico de serviço e testar se as mensagens são recuperadas ao sair da guia.
Mointy 28/03
0

Eu daria conselhos diferentes sobre como criar seu aplicativo. Pelo que entendi, sua intenção é adicionar mais lógica para entender se o usuário não está mais ativo no navegador. Isso implica um problema diferente, que é específico do navegador para implementar essa lógica. Com isso em mente, eu investiria em um melhor tratamento de erros , tanto no servidor quanto no cliente.

Os erros não serão específicos do navegador. A manipulação dessas opções tornará seu aplicativo mais resiliente e independente das alterações do navegador, que poderão mudar, digamos, a maneira como hibernam uma guia, qualquer outro recurso que um fornecedor possa implementar no futuro.

Essa é uma ideia que você pode encontrar na arquitetura de serviços, mas o mesmo padrão se aplica a qualquer aplicativo Web. Você pode querer procurar Design-for-Failconceitos:

A complexidade torna inviável assumir robustez por parte dos sistemas nos quais se baseia. Em vez disso, é necessário projetar sistemas e aplicativos em qualquer camada na pilha de TI, para assumir a possibilidade de falha em níveis mais baixos. O projeto para falha exige pensar em tolerância a falhas em todas as camadas. Os desenvolvedores de aplicativos não podem mais se limitar a pensar em funcionalidade.

https://www.oreilly.com/library/view/designing-delivery/9781491903742/ch04.html

sou
fonte
Em que tipo de "melhor tratamento de erros" você está pensando?
Kev