Le Cache-busting est une technique utilisée pour garantir que l’utilisateur accède à la dernière version de vos fichiers, qu’il s’agisse de Javascript, de feuilles de style (CSS) ou d’images. Cette technique vise à éviter certains problèmes qui surviennent lors de la mise à jour de votre application et que le cache du navigateur entre en jeu. En effet, le Cache-busting permet de contourner la mise en cache des anciennes versions des fichiers en leur attribuant des identifiants uniques ou en modifiant leur URL, assurant ainsi que les utilisateurs accèdent toujours aux versions les plus récentes, sans être affectés par les versions précédemment sauvegardées dans le cache du navigateur.
Ça arrive tellement souvent, n’est-ce pas ? La frustration quand on modifie quelque chose dans l’app et que ces changements ne se reflètent pas immédiatement, surtout pour le style ou les fonctions en JavaScript ! On a l’habitude de faire un CTRL+F5 pour rafraîchir la page, mais quand il s’agit d’un déploiement pour un client qui n’est pas familier avec ces subtilités techniques, ça peut être un vrai casse-tête. 😁
1er astuce : Ajouter un Query à l’URL
Je comprends, ça peut être fastidieux de devoir ajouter manuellement une chaîne alphanumérique à la fin de l’URL pour forcer le navigateur à charger la dernière version des fichiers. Et honnêtement, la plupart du temps, on finit par oublier de le faire. Conclusion : on oublie ❌
2nd astuce : Via une fonction Javascript
Je ne suis pas très fortiche en JS mais en plaçant une fonction JavaScript en bas de la page index.html qui va générer un nombre aléatoire et le concaténer à l’URL des fichiers, on peut s’assurer que le navigateur chargera la dernière version des ressources à chaque appel de la page. Bien que cette méthode soit simple à mettre en place, elle peut être efficace pour contourner le problème du cache. Conclusion : ça passe 🚸
3ème astuce : Via une variable de l’appsettings.json
C’est une façon vraiment élégante de gérer ça. En utilisant une variable comme « BUILD_NUMBER » dans votre fichier appsettings.json et en la récupérant via IConfiguration dans votre application, vous pouvez dynamiquement incorporer cette valeur dans le fichier de routage tel que Routes.razor (ou App.Razor pour les versions antérieures à .NET 8). Cela permet de contrôler l’URL des ressources à partir d’une source centralisée, simplifiant ainsi la gestion du cache-busting pour l’ensemble de votre application.
L’avantage de cette solution est que dans le déploiement vous pouvez modifier cette variable via le pipeline de votre CI/CD
4ème astuce : Utiliser AssemblyVersion avec de la réflection
A l’utilisation ça ressemble à ça :
Et donc dans le fichier .csproj, même si on utilise déjà <Version>, on va ici rajouter <AssemblyVersion> :
C’est une solution facile que j’aime bien
