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

Nous travaillons actuellement dans une version bêta privée et nous sommes donc toujours en train de faire des changements assez rapides, bien que de toute évidence, comme l'utilisation commence à augmenter, nous allons ralentir ce processus. Cela étant dit, un problème que nous rencontrons est qu'après avoir poussé 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. Évidemment, lors d'un appel de support, nous pouvons simplement les informer de faire un ctrlF5rafraîchissement pour s'assurer qu'ils obtiennent les fichiers à jour du serveur, mais il serait préférable de gérer cela avant cette date.

Notre idée actuelle est de simplement attacher un numéro de version au nom des fichiers JavaScript, puis lorsque des modifications sont 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 peut devenir fastidieuse.

Comme je suis sûr que nous ne sommes pas les premiers à faire face à cela, j'ai pensé que j'allais le jeter à la communauté. Comment 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?

Pour autant que je sache, une solution courante consiste à ajouter un ?<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 qui le fasse pour vous? La plupart des systèmes de contrôle de version ont un moyen d'injecter automatiquement le numéro de révision lors de l'enregistrement par exemple.

Cela ressemblerait à quelque chose comme ceci:

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

Bien sûr, il existe toujours de meilleures solutions comme celle-ci .

Ajouter 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 plus d'un jour, vous enverrez:

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 utiliseriez:

Cache-Control: no-cache, must-revalidate

Google Page-Speed: n'incluez pas de chaîne de requête dans l'URL des ressources statiques. La plupart des serveurs proxy, notamment Squid jusqu'à la version 3.0, ne mettent pas en cache les ressources 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 codez plutôt 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 utiliser apache mod_rewrite pour rediriger le lien vers http://abc.com/script.js . Lorsque vous modifiez la version, le navigateur client mettra à jour le nouveau fichier.

Cette utilisation a été supprimée: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Cette réponse n'a que 6 ans de retard, mais je ne vois pas cette réponse à de nombreux endroits ... HTML5 a introduit le cache d'application qui est utilisé pour résoudre ce problème. Je découvrais que le nouveau code de serveur que j'écrivais faisait planter le vieux javascript stocké dans les navigateurs des gens, alors je voulais trouver un moyen de faire expirer leur javascript. Utilisez un fichier manifeste qui ressemble à ceci:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

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

Que diriez-vous d'ajouter la taille du fichier comme 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.

Qu'en est-il lorsque vous mettez à jour le fichier et que votre mise à jour donne la même taille de fichier? quelles sont les chances?

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

Donc au lieu de stuff.js?123, je l'ai faitstuff_123.js

J'ai utilisé mod_redirect(je pense) en apache have stuff_*.jspour allerstuff.js

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

AVANT

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

APRÈS (forcer le rechargement)

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

L'ajout de DateTime.Now.Ticks fonctionne très bien.

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

Fichiers Js ou Css inclus de cette manière:

<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 est calculé 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();
    }
    ...
}

De nos jours, la pratique courante consiste à générer un code de hachage de contenu dans le nom de fichier pour forcer le navigateur, en particulier IE, à recharger les fichiers javascript ou les fichiers css.

Par exemple,

vendeur. a7561fb0e9a071baadb9 .js
main. b746e3eb72875af2caa9 .js

C'est généralement le travail des outils de construction tels que webpack. Voici plus de détails si quelqu'un veut essayer si vous utilisez webpack.

Si vous générez la page qui établit un lien vers les fichiers JS, une solution simple consiste à ajouter l'horodatage de la dernière modification du fichier aux liens générés.

Ceci est très similaire à la réponse de Huppie, mais fonctionne dans les systèmes de contrôle de version sans substitution de mots clés. C'est aussi mieux que d'ajouter l'heure actuelle, car cela empêcherait la mise en cache même lorsque le fichier ne change pas du tout.

La fonction jQuery getScript peut également être utilisée pour garantir qu'un fichier js est bien chargé à chaque fois que la page est chargée.

Voici comment je l'ai fait:

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

Vérifiez la fonction sur http://api.jquery.com/jQuery.getScript/

Par défaut, $ .getScript () définit le paramètre de cache sur false. Cela ajoute un paramètre de requête horodaté à l'URL de la demande pour garantir que le navigateur télécharge le script chaque fois qu'il est demandé.

En PHP :

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

En HTML :

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

Comment ça fonctionne:

En HTML, écrivez le filepathet le nom comme vous le feriez, mais uniquement dans la fonction. PHP récupère le filetimefichier et renvoie la filepath+name+"?"+timedernière modification

Nous avons créé un SaaS pour les utilisateurs et leur avons fourni un script à attacher dans la page de leur site Web, et il n'a pas été possible de joindre une version avec le script car l'utilisateur attachera le script à leur site Web pour les fonctionnalités et je ne peux pas les forcer pour changer la version à chaque mise à jour du script

Nous avons donc trouvé un moyen de charger la nouvelle version du script chaque fois que l'utilisateur appelle le script d'origine

le lien du script fourni à l'utilisateur

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

le fichier script

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

Explication:

L'utilisateur a attaché le script qui lui a été fourni sur son site Web et nous avons vérifié si le jeton unique attaché au script existe ou non à l'aide du sélecteur jQuery et sinon, chargez-le dynamiquement avec un jeton (ou une version) plus récent

Ceci est appelé deux fois le même script, ce qui pourrait être un problème de performances, mais cela résout vraiment le problème de forcer le script à ne pas se charger à partir du cache sans mettre la version dans le lien de script réel donné à l'utilisateur ou au client

Avertissement: Ne pas utiliser si les performances sont un gros problème dans votre cas.

Dans asp.net mvc, vous pouvez utiliser @ DateTime.UtcNow.ToString () pour le numéro de version du fichier js. Le numéro de version change automatiquement avec la date et vous forcez le navigateur des clients à actualiser automatiquement le fichier js. J'utilise cette méthode et cela fonctionne bien.

<script src="~/JsFilePath/[email protected]()"></script>

location.reload (true);

voir https://www.w3schools.com/jsref/met_loc_reload.asp

J'appelle dynamiquement cette ligne de code afin de m'assurer que javascript a été récupéré depuis le serveur Web plutôt que depuis le cache du navigateur afin d'échapper à ce problème.

Une solution consiste à ajouter une chaîne de requête avec un horodatage à l'URL lors de la récupération de la ressource. Cela profite du fait qu'un navigateur ne mettra pas en cache les ressources extraites des URL contenant des chaînes de requête.

Vous ne voulez probablement pas que le navigateur ne mette pas en cache ces ressources; il est plus probable que vous souhaitiez les mettre en cache, mais vous souhaitez que le navigateur récupère une nouvelle version du fichier lorsqu'elle sera disponible.

La solution la plus courante semble être d'incorporer un horodatage ou un numéro de révision dans le nom du fichier lui-même. C'est un peu plus de travail, car votre code doit être modifié pour demander les bons fichiers, mais cela signifie que, par exemple, la version 7 de votre snazzy_javascript_file.js(ie snazzy_javascript_file_7.js) est mise en cache sur le navigateur jusqu'à ce que vous publiez la version 8, puis votre code passe à chercher à la snazzy_javascript_file_8.jsplace.

L'avantage d'utiliser un file.js?V=1sur un fileV1.jsest que vous n'avez pas besoin de stocker plusieurs versions des fichiers JavaScript sur le serveur.

Le problème que je vois file.js?V=1est que vous pouvez avoir du code dépendant dans un autre fichier JavaScript qui se casse lors de l'utilisation de la nouvelle version des utilitaires de bibliothèque.

Pour des raisons de compatibilité descendante, je pense qu'il est préférable d'utiliser jQuery.1.3.js pour vos nouvelles pages et de laisser les pages existantes utiliser jQuery.1.1.js, jusqu'à ce que vous soyez prêt à mettre à niveau les anciennes pages, si nécessaire.

Utilisez une GETvariable de version pour empêcher la mise en cache du navigateur.

L'ajout ?v=AUTO_INCREMENT_VERSIONà la fin de votre URL empêche la mise en cache du navigateur - en évitant tous les scripts mis en cache.

Mon collègue vient de trouver une référence à cette méthode juste après avoir posté (en référence à css) à http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ . C'est bien de voir que d'autres l'utilisent et cela semble fonctionner. 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?

Bien qu'il soit spécifique au framework, Django 1.4 a cette fonctionnalité qui fonctionne de manière similaire au lien vers le site 'greenfelt' dans la réponse ci - dessus

Le contournement du cache dans ASP.NET Core via un assistant de balise traitera cela pour vous et permettra à votre navigateur de conserver les scripts / css mis en cache jusqu'à ce que le fichier change. Ajoutez simplement le tag helper asp-append-version = "true" à votre script (js) ou lien (css):

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

Dave Paquette a un bon exemple et une explication de cache busting ici (bas de page) Cache Busting

La solution la plus simple? Ne laissez pas le cache du navigateur du tout. Ajoutez l'heure actuelle (en ms) en tant que requête.

(Vous êtes toujours en version bêta, vous pouvez donc faire un argument raisonnable pour ne pas optimiser les performances. Mais YMMV ici.)

Une façon simple. Modifier htaccess

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

Ci-dessous a fonctionné pour moi:

<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
</head>