Meilleures pratiques pour induire AJAX rafraîchissements frontaux d'application
Je développe et gère plusieurs applications web à usage interne dans mon entreprise. Ils sont tous basés sur PHP/MySQL avec des frontaux HTML/JavaScript utilisant jQuery et divers plugins pour les éléments d'interface utilisateur, les affichages de grille, AJAX, etc.
Un problème auquel je suis constamment confronté est que les utilisateurs laissent généralement leurs navigateurs ouverts pendant des jours à la fois, avec un onglet pour chaque application qu'ils ne ferment généralement pas sauf s'ils arrêtent tout leur système. Par conséquent, chaque fois que je modifie un fichier squelette JavaScript ou PHP/HTML, les utilisateurs n'obtiennent pas les scripts mis à jour avant de redémarrer leur navigateur ou d'appuyer sur F5.
Chaque fois que je mentionne à un utilisateur qu'il y aura une mise à jour du jour au lendemain, je reçois inévitablement un appel perplexe le lendemain matin pour lui demander pourquoi il ne voit pas les changements. À chaque fois, ma réponse est "essayez d'appuyer sur F5", mais cela n'a pas été détecté par les utilisateurs. Je ne m'attends pas à ce que les utilisateurs sachent comment les applications Web fonctionnent dans un sens technique - après tout, c'est MON travail, pas le leur. Je ne peux pas m'attendre à ce qu'ils sachent tous instinctivement actualiser l'application avant de m'appeler, et ne pas s'attendre à ce que n'importe quel aspect du front-end change comme par magie à moins qu'ils ne le fassent, bien que ce soit sympa.
Je pense à implémenter une solution rudimentaire où les applications se rafraîchiront au milieu de la nuit à une certaine heure, probablement peu de temps après la tâche cron qui déplace les scripts mis à jour de la zone de mise en scène "bon à aller" vers la production. Je suis sûr que cela fonctionnera, mais il doit y avoir un meilleur moyen. Quelqu'un a-t-il rencontré ce problème et mis en œuvre une solution plus intelligente qu'une simple actualisation planifiée?
La manière simple
Si vous êtes celui qui envoie les notifications de mise à jour à chaque fois, la façon de loin la plus simple de le faire est d'ajouter une grande section de dépannage. La première chose que vous y mettez va:
Pourquoi n'ai-je pas la mise à jour?
R: Essayez d'appuyer sur F5 pour actualiser la page.
Cependant, il n'y a pas de garantie à 100% que les utilisateurs regardent cela, vous pouvez donc également implémenter la partie suivante.
La manière intelligente
Vous pouvez également "informer" votre application lorsqu'une mise à jour est disponible. Vous pouvez le faire avec un simple texte ou un fichier JSON sur le serveur (JSON est probablement mieux car vous pouvez utiliser la méthode getJson de jQuery). Ensuite, vous définissez un long minuteur JS - si vous ne faites des mises à jour que pendant la nuit, vous le définissez pour une journée (1000 * 60 * 60 * 24 millisecondes), et lorsque le minuteur se déclenche, vous effectuez un appel jQuery Ajax au serveur. Cela renvoie le contenu du fichier JSON, dont vous pouvez vérifier le numéro de version et actualiser la page automatiquement s'il y a une nouvelle version.
Sinon, si vous ne souhaitez pas modifier le fichier JSON à chaque fois, définissez une variable globale dans le fichier JS principal de votre application. Vous pouvez vérifier cela avec n'importe quel JS sur la page et actualiser.
Ce qui est mieux?
Comme d'habitude, je dirais "ça dépend". Si vous pouvez être sûr que tout le monde lit vos annonces de mise à jour, optez pour la première méthode. Si ce n'est pas le cas, et si les gens continuent de vous appeler sans vous rafraîchir, utilisez le second - cela ne devrait pas être trop difficile à mettre en œuvre.
Si vous proposez une mise à jour structurelle aux utilisateurs finaux qui nécessite eux de faire un manuel actualisez ensuite vous devez ajuster votre code.
Je vois 2 scénarios de base:
- Le contenu qu'ils voient à l'écran est valide jusqu'à ce qu'ils effectuent une transition
- Le contenu doit être mis à jour pour que l'utilisateur soit informé (pensez au cours actuel des actions) afin de prendre la ou les bonnes décisions.
Si vous traitez avec # 2 où les utilisateurs ont besoin de voir la mise à jour complète, ou si vous devez leur envoyer quelque chose, votre code doit déclencher l'actualisation/rechargement applicable selon les besoins.
par exemple.
location.reload();//or whatever actual loading you need to do
Si le problème concerne spécifiquement une modification du contenu statique de votre site (CSS/JavaScript/Images) qui sera déjà mis en cache dans le navigateur de l'utilisateur, vous devez utiliser une sorte de gestion de cache statique qui modifie physiquement le nom du les ressources statiques quand elles changent ... Cependant, c'est une autre question qui convient le mieux à stackoverflow.com ;-)
Il y a un million de façons de gérer la diffusion automatique de la mise à jour à l'utilisateur, mais l'une des plus simples que j'ai vues est de créer un appel de rythme cardiaque simple qui s'exécute à chaque intervalle (votre choix ... toutes les 15 minutes? Heures? 4 heures?) pour voir s'il y a quelque chose de "nouveau". 99% du temps, vous ne retournerez rien, mais lorsque vous avez une mise à jour, elle indique au client de se recharger.
2019
Cette réponse n'a rien à voir avec l'UX mais je l'inclus ici dans un but d'exhaustivité.
- Ajoutez laravel mix à votre projet.
- Il a une fonction appelée cache busting où il ajoute des hachages uniques à chacun de vos fichiers de script lorsqu'il les envoie au client.
Pas besoin de jouer avec l'interface utilisateur de vos applications Web de quelque manière que ce soit
Lorsque le script change de quelque façon que ce soit, les identifiants changent et le navigateur est obligé de les télécharger à nouveau.