Éviter les problèmes de mise en cache HTTP lors de la mise à niveau d’applications ASP.NET Core Blazor

Note

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 10 de cet article.

Avertissement

Cette version d'ASP.NET Core n'est plus prise en charge. Pour plus d’informations, consultez la stratégie de support .NET et .NET Core. Pour la version actuelle, consultez la version .NET 10 de cet article.

Cet article explique comment éviter les problèmes de mise en cache HTTP lors de la mise à niveau Blazor des applications.

Lorsque Blazor les applications sont mal mises à niveau ou configurées, cela peut entraîner des mises à niveau non transparentes pour les utilisateurs existants. Cet article décrit certains des problèmes courants de mise en cache HTTP qui peuvent se produire lors de la mise à niveau Blazor d’applications entre les versions majeures. Il fournit également certaines actions recommandées pour garantir une transition fluide pour vos utilisateurs.

Bien que les futures Blazor versions puissent fournir de meilleures solutions pour traiter les problèmes de mise en cache HTTP, il est finalement à l’application de configurer correctement la mise en cache. Une configuration de mise en cache appropriée garantit que les utilisateurs de l’application ont toujours la version la plus up-to-date de l’application, améliorant leur expérience et réduisant la probabilité de rencontrer des erreurs.

Les problèmes courants qui ont un impact négatif sur l’expérience de mise à niveau de l’utilisateur sont les suivants :

• Gestion incorrecte des mises à jour de projet et de package : cela se produit si vous ne mettez pas à jour tous les projets déployés de l’application pour utiliser la même version principale du framework ou si vous utilisez des packages d’une version précédente lorsqu’une version plus récente est disponible dans le cadre de la mise à niveau majeure.
• Configuration incorrecte des en-têtes de mise en cache : les en-têtes de mise en cache HTTP contrôlent comment, où et pendant combien de temps les réponses de l’application sont mises en cache. Si les en-têtes ne sont pas configurés correctement, les utilisateurs peuvent recevoir des fichiers obsolètes ou incompatibles. Cela inclut Blazor la mise en cache des ressources groupées, où les en-têtes de mise en cache du serveur doivent être correctement définis pour éviter les problèmes de mise en cache sur le client.
• Configuration incorrecte d’autres couches : les réseaux de distribution de contenu (CDN) et d’autres couches de l’application déployée peuvent entraîner des problèmes s’ils sont configurés de manière incorrecte. Par exemple, les CDN sont conçus pour mettre en cache et fournir du contenu afin d’améliorer les performances et de réduire la latence. Si un CDN sert incorrectement des versions mises en cache des ressources, il peut entraîner une remise obsolète du contenu à l’utilisateur.

Détecter et diagnostiquer les problèmes de mise à niveau

Les problèmes de mise à niveau apparaissent généralement comme un échec de démarrage de l’application dans le navigateur. Normalement, un avertissement indique la présence d’une ressource obsolète ou d’une ressource manquante ou incohérente avec l’application.

• Tout d’abord, vérifiez si l’application se charge correctement dans une instance de navigateur propre. Utilisez un mode de navigateur privé pour charger l’application, par exemple en mode Microsoft Edge InPrivate ou en mode Google Chrome Incognito. Si l’application ne parvient pas à charger, cela signifie probablement qu’un ou plusieurs packages ou l’infrastructure n’ont pas été correctement mis à jour.
• Si l’application se charge correctement dans une instance de navigateur propre, il est probable que l’application soit servie à partir d’un cache obsolète. Dans la plupart des cas, une actualisation du navigateur dur avec Ctrl+F5 vide le cache, ce qui permet à l’application de charger et d’exécuter avec les dernières ressources.
• Si l’application continue d’échouer, il est probable qu’un cache CDN obsolète serve l’application. Essayez de vider le cache DNS via le mécanisme que votre fournisseur CDN propose.

Actions recommandées avant une mise à niveau

Le processus précédent de service de l’application peut rendre le processus de mise à jour plus difficile. Par exemple, éviter ou mal utiliser des en-têtes de mise en cache dans le passé peut entraîner des problèmes de mise en cache actuels pour les utilisateurs. Vous pouvez effectuer les actions décrites dans les sections suivantes pour atténuer le problème et améliorer le processus de mise à niveau pour les utilisateurs.

Aligner les packages d’infrastructure avec la version du framework

Assurez-vous que les packages d’infrastructure s’alignent sur la version du framework. L’utilisation de packages à partir d’une version précédente lorsqu’une version plus récente est disponible peut entraîner des problèmes de compatibilité. Il est également important de s’assurer que tous les projets déployés de l’application utilisent la même version principale du framework. Cette cohérence permet d’éviter un comportement et des erreurs inattendus.

Vérifier la présence d’en-têtes de mise en cache corrects

Les en-têtes de mise en cache corrects doivent être présents sur les réponses aux demandes de ressources. Cela inclut ETag, Cache-Controlet d’autres en-têtes de mise en cache. La configuration de ces en-têtes dépend du service d’hébergement ou de la plateforme de serveur d’hébergement. Ils sont particulièrement importants pour les ressources telles que le Blazor script et tout ce que le script télécharge.

Les en-têtes de mise en cache HTTP incorrects peuvent également avoir un impact sur les workers de service. Les travailleurs du service s’appuient sur la mise en cache des en-têtes pour gérer efficacement les ressources mises en cache. Par conséquent, les en-têtes incorrects ou manquants peuvent affecter le fonctionnement du service worker.

Utiliser Clear-Site-Data pour supprimer l’état dans le navigateur

Envisagez d’utiliser l’en-tête pour supprimer l’état Clear-Site-Data dans le navigateur.

En règle générale, la source des problèmes d’état du cache est limitée au cache du navigateur HTTP. L’utilisation de la cache directive doit donc être suffisante. Cette action peut vous aider à vous assurer que le navigateur récupère les ressources les plus récentes du serveur, plutôt que de servir du contenu obsolète à partir du cache.

Vous pouvez éventuellement inclure la storage directive pour effacer les caches de stockage locaux en même temps que vous effacez le cache du navigateur HTTP. Toutefois, les applications qui utilisent le stockage client peuvent rencontrer une perte d’informations importantes si la storage directive est utilisée.

Ajouter une chaîne de requête à la balise de Blazor script

Si aucune des actions recommandées précédentes n’est efficace, possible d’utiliser pour votre déploiement ou d’appliquer à votre application, envisagez d’ajouter temporairement une chaîne de requête à la Blazor source de balise du <script> script. Cette action doit être suffisante dans la plupart des cas pour forcer le navigateur à contourner le cache HTTP local et à télécharger une nouvelle version de l’application. Il n’est pas nécessaire de lire ou d’utiliser la chaîne de requête dans l’application.

Dans l’exemple suivant, la chaîne temporaryQueryString=1 de requête est temporairement appliquée à l’URI source externe relative de la <script> balise :

<script src="_framework/blazor.webassembly.js?temporaryQueryString=1"></script>

Une fois que tous les utilisateurs de l’application ont rechargé l’application, la chaîne de requête peut être supprimée.

Vous pouvez également appliquer une chaîne de requête persistante avec le contrôle de version approprié. L’exemple suivant suppose que la version de l’application correspond à la version de .NET (8 pour .NET 8) :

<script src="_framework/blazor.webassembly.js?version=8"></script>

Pour connaître l’emplacement de la balise de Blazor script<script>, consultez ASP.NET structure de projet CoreBlazor.