Question Comment puis-je forcer les clients à actualiser les fichiers JavaScript?


Nous travaillons actuellement sur une version bêta privée et sommes donc encore en train de faire des changements assez rapides, bien que de toute évidence, à mesure que l'utilisation commence à s'accélérer, nous allons ralentir ce processus. Cela étant dit, un problème que nous rencontrons est qu'après avoir mis à jour une mise à jour avec de nouveaux fichiers JavaScript, les navigateurs clients utilisent toujours la version mise en cache du fichier et ils ne voient pas la mise à jour. De toute évidence, sur un appel de soutien, nous pouvons simplement les informer de faire un ctrlF5 rafraîchir pour s'assurer qu'ils obtiennent les fichiers à jour du serveur, mais il serait préférable de gérer cela avant cette heure.

Notre idée actuelle est de simplement attacher un numéro de version au nom des fichiers JavaScript et, une fois les modifications apportées, d’incrémenter la version sur le script et de mettre à jour toutes les références. Cela fait définitivement le travail, mais la mise à jour des références sur chaque version pourrait devenir fastidieuse.

Comme je suis sûr que nous ne sommes pas les premiers à y faire face, je me suis dit que je l'enverrais à la communauté. Comment vous assurez-vous que les clients mettent à jour leur cache lorsque vous mettez à jour votre code? Si vous utilisez la méthode décrite ci-dessus, utilisez-vous un processus qui simplifie le changement?


485
2017-08-28 14:30


origine


Réponses:


Pour autant que je sache, une solution commune consiste à ajouter ?<version> au lien src du script.

Par exemple:

<script type="text/javascript" src="myfile.js?1500"></script>

Je suppose à ce stade qu'il n'y a pas de meilleur moyen que find-replace pour incrémenter ces "numéros de version" dans toutes les balises de script?

Vous pourriez avoir un système de contrôle de version fait cela pour vous? La plupart des systèmes de contrôle de version ont un moyen d'injecter automatiquement le numéro de révision à l'enregistrement par exemple.

Cela ressemblerait à ceci:

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

Bien sûr, il y a toujours de meilleures solutions comme celui-là.


443
2017-08-28 14:34



L'ajout de l'heure actuelle à l'URL est en effet une solution courante. Cependant, vous pouvez également gérer cela au niveau du serveur Web, si vous le souhaitez. Le serveur peut être configuré pour envoyer différents en-têtes HTTP pour les fichiers javascript.

Par exemple, pour forcer la mise en cache du fichier pendant un jour au maximum, vous devez envoyer:

Cache-Control: max-age=86400, must-revalidate

Pour la version bêta, si vous voulez forcer l'utilisateur à toujours obtenir la dernière version, vous utiliserez:

Cache-Control: no-cache, must-revalidate

72
2017-09-17 16:04



Google Page-Speed: n'incluez pas de chaîne de requête dans l'URL des ressources statiques. La plupart des proxies, notamment Squid jusqu'à la version 3.0, ne mettent pas les ressources en cache avec un "?" dans leur URL même si un en-tête Cache-control: public est présent dans la réponse. Pour activer la mise en cache du proxy pour ces ressources, supprimez les chaînes de requête des références aux ressources statiques et, à la place, codez les paramètres dans les noms de fichiers eux-mêmes.

Dans ce cas, vous pouvez inclure la version dans l'URL ex: http://abc.com/v1.2/script.js et utilisez apache mod_rewrite pour rediriger le lien vers http://abc.com/script.js. Lorsque vous changez la version, le navigateur client mettra à jour le nouveau fichier.


40
2017-10-06 08:13



Cette réponse est seulement 6 ans en retard, mais je ne vois pas cette réponse dans de nombreux endroits ... HTML5 a introduit Cache de l'application qui est utilisé pour résoudre ce problème. Je trouvais que le nouveau code serveur que j'écrivais écrasait javascript ancien stocké dans les navigateurs des gens, donc je voulais trouver un moyen d'expirer leur javascript. Utilisez un fichier manifeste qui ressemble à ceci:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

et générez ce fichier avec un nouvel horodatage chaque fois que vous souhaitez que les utilisateurs mettent à jour leur cache. En remarque, si vous ajoutez ceci, le navigateur ne pas recharger (même lorsqu'un utilisateur actualise la page) jusqu'à ce que le manifeste le lui demande.


33
2017-08-14 20:05



Que diriez-vous d'ajouter la taille de fichier en tant que paramètre de chargement?

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

Ainsi, chaque fois que vous mettez à jour le fichier, le paramètre "filever" change.

Que diriez-vous lorsque vous mettez à jour le fichier et que votre mise à jour a la même taille de fichier? quelles sont les chances?


25
2017-12-02 00:45



Tous les navigateurs ne mettent pas en cache les fichiers avec '?' dedans. Ce que j'ai fait pour m'assurer qu'il était caché autant que possible, j'ai inclus la version dans le nom de fichier.

Donc, au lieu de stuff.js?123, J'ai fait stuff_123.js 

j'ai utilisé mod_redirect(Je pense) à Apache à have stuff_*.js aller stuff.js


18
2017-09-17 16:08



Pour les pages ASP.NET, j'utilise les éléments suivants

AVANT

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

APRES (recharge de force)

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

Ajouter le DateTime.Now.Ticks fonctionne très bien.


9
2018-01-23 01:10



Pour ASP.NET, je suppose la prochaine solution avec des options avancées (mode debug / release, versions):

Js ou fichiers Css inclus de cette façon:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix et Global.CssPostfix sont calculés de la manière suivante dans Global.asax:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

5
2017-08-03 13:55