AngularJs oblige le navigateur à vider le cache
Mon application angular change constamment, car notre équipe exécute actuellement des mises à jour rapides.
En raison de la mise en cache, nos clients ne disposent pas toujours de la dernière version de notre code.
Donc, y a-t-il un moyen dans angular de forcer le navigateur à vider le cache?
Vous pouvez utiliser une solution très simple consistant à ajouter un hachage à vos fichiers de scripts. Chaque fois que votre application est déployée, vous envoyez automatiquement vos fichiers avec un hachage différent via une tâche gulp/grunt. A titre d'exemple, vous pouvez utiliser gulp-rev . J'utilise cette technique dans tous mes projets et fonctionne très bien, cette automatisation dans votre processus de construction/déploiement peut être une solution pour tous vos projets.
Générateur Yeoman pour AngularJS générateur-gulp-angular (c'était mon générateur de choix) utilisez cette solution pour vous assurer que le navigateur charge le nouveau fichier optimazed et non l'ancien en cache. S'il vous plaît créez un projet de démonstration et jouez avec lui et vous le verrez en action.
Comme mentionné ci-dessus, la solution courante pour résoudre les problèmes de cache du navigateur consiste à ajouter un type de jeton de version (numéro de version, horodatage, hachage, etc.) aux fichiers de ressources chargés. Cela couvre les cas où l'utilisateur charge ou recharge la page. Comme cela a déjà été dit, WebPack, certaines infrastructures dorsales telles que Asp.net MVC, etc., prennent en charge cette fonctionnalité ainsi que le groupage, la minimisation, l’obscurcissement, etc. Il est préférable de les utiliser pour résoudre d'autres problèmes connexes.
Mais on pense qu’ils ne peuvent pas résoudre le problème, c’est la mise à jour de la page principale elle-même et les fichiers déjà chargés lorsqu’ils ont été modifiés (déployés) sur le dos. Par exemple, vous déployez une application pendant que d'autres utilisateurs travaillent avec votre page unique sans la recharger. Ou une application laissée ouverte par l'utilisateur dans l'onglet du navigateur et qui revient dans une heure à cette page. Dans ce cas, certains fichiers déjà chargés, y compris la page principale, sont anciens et d’autres sur le dos. De plus, tous les fichiers déjà chargés ont d'anciennes références à des fichiers qui peuvent ne pas exister dans le backend mais être mis en cache dans le navigateur. Donc, en général, vous avez cassé l'application ici et c'est en fait un problème plus général qui Angular ne peut pas résoudre lui-même.
Pour résoudre ce problème, vous devez informer votre utilisateur de l'existence d'une nouvelle version de l'application et lui demander de recharger la page ou de la recharger de force. La deuxième approche n'est pas bonne du point de vue de l'expérience utilisateur. Imaginons que vous travailliez et qu'à un moment donné, la page commence à se recharger. Bizarre, non?
Afin d'informer l'utilisateur de la nouvelle version, vous pouvez utiliser le message websokets pour l'appliquer à la nouvelle version, transmettre la version dans chaque réponse (ce qui n'est pas une bonne solution) ou extraire de temps en temps une nouvelle version (et non une bonne). Mais ils ne sont pas tous triviaux. Si votre session de connexion à l'application est courte, vous pouvez vérifier la version lors de la reconnexion, actualiser les cookies d'authentification, etc.
Donc, pour résoudre complètement ce problème, vous devez implémenter le regroupement de fichiers + le mécanisme de notification utilisateur de la nouvelle version.
Si vous recherchez une solution très simple et que votre IDE est un studio visuel sous C #), vous pouvez obtenir le numéro de version de l'application et le concaténer sur l'URL de votre fichier js.
Vous devez d’abord activer l’incrémentation pour les versions mineures comme celle-ci: 
Accédez aux propriétés de votre projet, sous Application dans la nouvelle fenêtre, cliquez sur Informations sur l’assemblage et ajoutez un "*" à la version de l’Assemblée (dernier chiffre décrit ci-dessus).
Après cela, ajoutez une nouvelle propriété à votre codebehind, aspx, service Web ou webapi, etc ... pour ce morceau de code que j'utilise aspx:
public string GetVersionApp => System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();
Ensuite, appelez la propriété via votre code HTML et concaténez la valeur en tant que paramètre dans votre fichier url, comme ceci:
<script type="text/javascript" src="App/RequestsList/directives/comment-directive.js?<%=GetVersionApp%>"></script>
Avec cette solution, vos fichiers ne peuvent être rechargés qu’en cas de nouvelle construction.