Comment détecter quand le navigateur accélère la déconnexion des minuteries et des websockets après qu'un utilisateur quitte un onglet ou éteint l'écran? (javascript)

12

Le contexte

Un jeu livré en tant qu'application Web progressive qui dispose de minuteries ( setTimeout, setInterval) et de connexions Websocket pour obtenir une communication en temps réel.

Qu'est-ce qui se passe

Tout va bien tant que l'utilisateur reste dans l'application. Mais lorsque l'utilisateur accède à un autre onglet, à une autre application ou éteint l'écran (en cas de mobile), cela devient un "monde inconnu infernal".

Les Websockets peuvent ou non être "suspendues" ou "désactivées"
Les minuteries semblent être étranglées ou rebondies.

Ce comportement semble dépendre des navigateurs et de la plate-forme et peut-être même dépendre du comportement particulier de l'utilisateur. Je suppose que les navigateurs et les systèmes d'exploitation ont leur propre cycle de vie / mécanismes pour économiser la batterie et / ou le calcul.

Lorsque l'utilisateur revient, l'application est dans un état inconnu et j'ai du mal à restaurer l'état correctement.

Concernant les websockets, j'ai la reconnexion automatique avec socket.io et reconnecting-websocket mais ce n'est pas suffisant pour tout résoudre.

Recherche de réponses

Quels sont les "cycles de vie" des différents navigateurs les concernant? Est-ce documenté? Quand décident-ils de s'éteindre et d'accélérer?
Que font-ils exactement aux websockets? Les navigateurs les déconnectent simplement?
Que font-ils exactement aux chronomètres? Ils les étranglent ou les rebondissent ou autre chose?
Qu'advient-il de l'exécution javascript en général? En pause / détruit / étranglé?
Existe-t-il un moyen de se connecter à une sorte d'événement de cycle de vie du navigateur quand il va éteindre les choses? La seule chose que j'ai pu trouver pourrait être l' API de visibilité
Existe-t-il un moyen de reproduire artificiellement ce comportement pour pouvoir tester des solutions? C'est particulièrement difficile sur le bureau. Les Websockets ne peuvent pas être désactivées et les développeurs de chrome ne semblent pas pressés de résoudre un problème de 2014 (!): Les Websockets ne sont pas incluses lors de l'utilisation de la limitation de connexion
Indépendamment de ce qui précède, existe-t-il une solution pragmatique multi-navigateur pour détecter / résoudre ce problème? (par exemple, par expérience, Firefox sur le bureau semble se comporter complètement différemment de Chrome, et un iPhone se déconnectera beaucoup plus souvent qu'un Android)

Liens connexes

Safari abandonnant la connexion de socket Web en raison de l'inactivité lorsque la page n'est pas active

— Kev
source

1

Ce n'est qu'un brouillon wicg.github.io/page-lifecycle .

— norbertpy

7

Pas exactement sûr, mais vous pourriez avoir recours à des travailleurs des services. Autant que je sache, ils s'exécutent en arrière-plan même si votre onglet n'est pas ouvert et se terminent si votre onglet se ferme.

Btw. les cycles de vie des onglets du navigateur semblent être différents sur chaque navigateur, car chaque navigateur le gère différemment. D'après ce que je vois, le navigateur peut geler les onglets si le navigateur a besoin de plus de mémoire pour d'autres choses.

Voici les documents de Chrome .

Je me suis souvenu qu'il y avait certains événements, comme onload, qui vous indiquent si un utilisateur a quitté ou rouvert l'onglet. Vous pouvez utiliser ces événements pour vous reconnecter, etc.

— Mointy
source

C'est une idée intéressante. Est-ce quelque chose que vous avez fait avec du code à partager?

— Kev

Je suis désolé, je n'ai pas d'exemple de code pour le moment, mais si vous recherchez des techniciens de maintenance, il existe une tonne de tutoriels pour les configurer. La seule chose que vous avez à faire est de mettre juste un petit code où vous vous connectez à votre serveur ws et un console.log()lorsque vous recevez des messages du serveur ws. Dans Chrome, vous pouvez ouvrir la console de votre technicien de service et ainsi tester si les messages sont revisités lorsque vous quittez l'onglet.

— Mointy

0

Je donnerais différents conseils sur la façon de concevoir votre application. D'après ce que je comprends, votre intention est d'ajouter plus de logique afin de comprendre si l'utilisateur n'est plus actif dans le navigateur. Cela implique un problème différent qui est spécifique au navigateur pour implémenter cette logique. Dans cet esprit, j'investirais plutôt dans une meilleure gestion des erreurs , à la fois sur le serveur et sur le client.

Les erreurs ne seront pas spécifiques au navigateur. Les gérer rendra votre application plus résistante et agnostique aux modifications du navigateur, ce qui pourrait éventuellement changer, disons, la façon dont ils mettent en veille prolongée un onglet, toute autre fonctionnalité qu'un fournisseur pourrait implémenter à l'avenir.

C'est une idée que vous pouvez trouver dans l'architecture des services, mais le même modèle s'applique à n'importe quelle application Web. Vous voudrez peut-être rechercher des Design-for-Failconcepts:

La complexité rend infaisable l'hypothèse d'une robustesse de la part des systèmes sur lesquels on s'appuie. Au lieu de cela, il faut concevoir des systèmes et des applications à n'importe quelle couche donnée dans la pile informatique pour supposer la possibilité de défaillance à des niveaux inférieurs. La conception pour l'échec nécessite de penser à la tolérance aux pannes à toutes les couches. Les développeurs d'applications ne peuvent plus se limiter à penser aux fonctionnalités.

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

— un m
source

À quel type de "meilleure gestion des erreurs" pensez-vous?

— Kev