Comment puis-je forcer les clients à actualiser les fichiers JavaScript?
https://stackoverflow.com/questions/32414
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Nous sommes actuellement en train de travailler dans une version bêta privée et sont encore dans le processus de prise assez rapide modifications, bien que, évidemment, que l'usage est de commencer à construire, nous allons être en train de ralentir ce processus.Cela étant dit, une question nous sont en train de faire est que, après nous pousser une mise à jour avec de nouveaux fichiers JavaScript, les navigateurs clients toujours utiliser la version en cache du fichier et ils ne voient pas la mise à jour.Évidemment, sur un appel au support, on peut simplement informer pour faire un ctrlF5 actualisation afin de s'assurer qu'ils obtiennent de la mise à jour des fichiers à partir du serveur, mais il serait préférable de traiter cette avant cette date.
Notre courant de pensée est tout simplement de joindre un numéro de version sur le nom des fichiers JavaScript et ensuite, lorsque des modifications sont apportées, incrémenter la version du script et de la mise à jour de toutes les références.C'est certainement le travail effectué, mais la mise à jour des références sur chaque sortie pourrait obtenir de la lourdeur.
Comme je suis sûr que nous ne sommes pas les premiers à faire face à cela, j'ai pensé que je devrais la jeter à la communauté.Comment êtes-vous assurer aux clients de mettre à jour leur cache lorsque vous mettez à jour votre code?Si vous êtes à l'aide de la méthode décrite ci-dessus, êtes-vous à l'aide d'un processus qui simplifie le changement?
La solution
Autant que je sache, une solution est d'ajouter un ?<version> pour le script src lien.
Par exemple:
<script type="text/javascript" src="myfile.js?1500"></script>
Je suppose, à ce point qu'il n'y a pas de meilleure façon de le rechercher-remplacer 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 faire pour vous?La plupart des systèmes de contrôle de version avoir un moyen d'injecter automatiquement le numéro de révision sur le check-in par exemple.
Il ressemblerait à quelque chose comme ceci:
<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>
Bien sûr, il y a toujours de meilleures solutions comme cette une.
Autres conseils
Ajout de l'heure de l'URL est en effet une solution commune.Cependant, vous pouvez également gérer cela sur le serveur web de niveau, si vous le souhaitez.Le serveur peut être configuré pour envoyer des différents en-têtes HTTP pour les fichiers javascript.
Par exemple, pour forcer le fichier mis en cache pour une durée de 1 jour, vous envoyer:
Cache-Control: max-age=86400, must-revalidate
Pour la bêta, si vous voulez forcer l'utilisateur à toujours obtenir la dernière, vous pouvez utiliser:
Cache-Control: no-cache, must-revalidate
Google Page Speed:Ne pas inclure une chaîne de requête dans l'URL pour les ressources statiques.La plupart des procurations, notamment le Calmar jusqu'à la version 3.0, ne pas mettre en cache les ressources avec un "?" dans leur URL, même si un Cache-control:public de l'en-tête est présent dans la réponse.Activer le proxy de mise en cache de ces ressources, supprimer les chaînes de requête à partir des références à des ressources statiques, et, au lieu de coder les paramètres dans le fichier de noms eux-mêmes.
Dans ce cas, vous pouvez inclure la version dans l'URL ex: http://abc.com/v1.2/script.js et l'utilisation de mod_rewrite d'apache pour rediriger le lien vers http://abc.com/script.js.Lorsque vous modifiez la version navigateur du client mettra à jour le fichier de nouveau.
Cet usage a été deprected: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
Cette réponse est à seulement 6 ans de retard, mais je ne vois pas cette réponse dans de nombreux endroits...HTML5 a introduit Le Cache De L'Application qui est utilisée pour résoudre ce problème.Je trouvais que le nouveau code de serveur, j'ai écrit a été s'écraser vieux javascript stockés dans les navigateurs, donc je voulais trouver un moyen pour expirer le code javascript.Utiliser un fichier de manifeste qui ressemble à ceci:
CACHE MANIFEST
# Aug 14, 2014
/mycode.js
NETWORK:
*
et de générer ce fichier avec un nouveau timbre de temps chaque fois que vous voulez les utilisateurs à mettre à jour leur cache.Comme une note de côté, si vous ajoutez à cela, le navigateur pas reload (même lorsqu'un utilisateur actualise la page) jusqu'à ce que le manifeste dit qu'il.
Comment au sujet de l'ajout de la taille du fichier en tant que paramètres de charge?
<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>
Donc, chaque fois que vous mettez à jour le fichier de la "filever" les modifications de paramètres.
Comment faire lorsque vous mettez à jour le fichier de mise à jour des résultats de la même taille de fichier?quelles sont les chances?
Pas tous les navigateurs de fichiers de cache avec '?' en elle.Ce que j'ai fait pour vous assurer qu'il a été mis en cache autant que possible, j'ai inclus la version dans le nom du fichier.
Ainsi, au lieu de stuff.js?123, Je n' stuff_123.js
J'ai utilisé mod_redirect(Je crois) dans apache pour have stuff_*.js pour aller stuff.js
Pour ASP.NET pages que je suis en utilisant la suite
AVANT
<script src="/Scripts/pages/common.js" type="text/javascript"></script>
APRÈS (la force de rechargement)
<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>
Ajout de la date / heure.Maintenant.Les tiques fonctionne très bien.
Pour ASP.NET je suppose que la prochaine solution avec des options avancées (debug/release mode, les versions):
Js ou Css fichiers inclus par une telle manière:
<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />
Mondiale.JsPostfix et Mondial.CssPostfix est calculé de la façon suivante Mondiale.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();
}
...
}
Si vous êtes à la génération de la page des liens vers les fichiers JS, une solution simple est en ajoutant le fichier de la dernière modification date sur les liens générés.
Ceci est très similaire à Huppie réponse, mais fonctionne dans les systèmes de contrôle de version sans substitution de mots clés.C'est mieux que d'ajouter l'heure actuelle, parce que ce serait empêcher la mise en cache même lorsque le fichier n'a pas changé du tout.
Nous avons été la création d'un SaaS pour les utilisateurs et de leur fournir un script pour fixer dans son site web, et il n'était pas possible de joindre une version avec le script en tant qu'utilisateur, vous fixez le script à leur site web pour les fonctionnalités et je ne peux pas les forcer à changer le numéro de version à chaque fois que nous mettons à jour le script
Donc, nous avons trouvé un moyen de charger la version la plus récente du script à chaque fois que l'utilisateur appelle le script original
le lien de script fourni à l'utilisateur
<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>
le fichier de 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 avons joint le script fourni dans leur site web et nous l'avons vérifié pour le jeton unique attaché avec le script existe ou pas en utilisant le sélecteur jQuery et si non, alors le charger dynamiquement avec les nouveaux jeton (ou version)
Cet appel est le même scénario deux fois ce qui pourrait être un problème de performance, mais il résout vraiment le problème de forcer le script pour ne pas charger à partir du cache sans mettre la version dans le script réel lien donné à l'utilisateur ou au client
Avertissement:Ne pas utiliser si la performance est un gros problème dans votre cas.
La fonction jQuery getScript peut également être utilisé pour s'assurer qu'un fichier js est en effet chargé à chaque fois que la page est chargée.
Voilà comment j'ai fait ça:
$(document).ready(function(){
$.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
startProgram();
});
});
De vérifier la fonction à http://api.jquery.com/jQuery.getScript/
Par défaut, $.getScript() définit le paramètre de cache à false.Ceci ajoute un horodaté paramètre de requête de l'URL de la requête pour s'assurer que le navigateur télécharge le script à chaque fois qu'il est demandé.
Une solution est d'ajouter une chaîne de requête avec un timestamp, à l'URL lors de l'extraction de la ressource.Cette méthode tire parti du fait qu'un navigateur ne sont pas en cache les ressources extraites à partir des Url avec des chaînes de requête en eux.
Vous ne voulez probablement pas le navigateur de ne pas mettre en cache ces ressources à tous de bien;il est plus probable que vous le souhaitez en cache, mais vous souhaitez que le navigateur d'aller chercher une nouvelle version du fichier lorsqu'il est disponible.
La solution la plus courante semble être d'intégrer un timestamp ou le numéro de révision dans le nom du fichier lui-même.C'est un peu plus de travail, parce que votre code doit être modifié à la demande les fichiers corrects, mais cela signifie que, par exemple,la version 7 de votre snazzy_javascript_file.js (c'est à dire snazzy_javascript_file_7.js) est mis en cache sur le navigateur jusqu'à ce que vous relâchez la version 8, et ensuite vos modifications de code pour récupérer snazzy_javascript_file_8.js au lieu de cela.
Utiliser une version GET variable pour éviter la mise en cache du navigateur.
Ajoutant ?v=AUTO_INCREMENT_VERSION à la fin de votre url empêche la mise en cache du navigateur - éviter tous les mis en cache des scripts.
Mon collègue vient de trouver une référence à la méthode, juste après que j'ai posté (en référence aux feuilles de style css) à http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/.Bon de voir que d'autres l'utilisent et il semble fonctionner.Je suppose, à ce point qu'il n'y a pas de meilleure façon de le rechercher-remplacer pour incrémenter ces "numéros de version" dans toutes les balises de script?
Même si c'est un framework spécifique, Django 1.4 a cette functionailty qui fonctionne de manière similaire pour le lien vers la greenfelt site dans le la réponse ci-dessus
Dans PHP:
function latest_version($file_name){
echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}
Dans HTML:
<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>
Comment il fonctionne:
En HTML, écrire l' filepath et le nom que vous wold faire, mais dans la fonction.PHP obtient le filetime de le fichier et renvoie le filepath+name+"?"+time de dernière modification
Cache Busting dans ASP.NET grâce à une balise à l'aide de la poignée pour vous, et permettre à votre navigateur de garder en mémoire cache des scripts/css jusqu'à ce que les modifications apportées au fichier.Il suffit d'ajouter la balise helper asp-ajouter-version="true" de votre script (js) ou un lien (css) de la balise:
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>
Dave Paquette a un bon exemple et l'explication de contournement du cache ici (bas de page) Cache Busting
La pratique courante de nos jours est de générer un hachage du contenu de ce code de la nom de fichier pour forcer le navigateur en particulier IE pour recharger les fichiers javascript ou css.
Par exemple,
le fournisseur.a7561fb0e9a071baadb9.js
principal.b746e3eb72875af2caa9.js
Il est généralement la tâche pour construire des outils tels que webpack.Ici, c'est plus détails si quelqu'un veut essayer si vous utilisez webpack.
La plus simple solution?Ne laissez pas le cache du navigateur à tous.Ajout de l'heure actuelle (en ms) en tant que requête.
(Vous êtes encore en version bêta, donc vous pourriez faire de façon raisonnable pour ne pas optimiser pour la performance.Mais YMMV ici.)
L'avantage de l'utilisation d'un file.js?V=1 plus d'un fileV1.js c'est que vous n'avez pas besoin de stocker plusieurs versions des fichiers JavaScript sur le serveur.
Le problème que je vois avec file.js?V=1 est que vous avez à charge le code dans un autre fichier JavaScript qui se brise lors de l'utilisation de la nouvelle version de la bibliothèque d'utilitaires.
Pour des raisons de rétro-compatibilité, je pense qu'il est préférable d'utiliser jQuery.1.3.js pour vos nouvelles pages et des pages existantes utiliser jQuery.1.1.js, jusqu'à ce que vous êtes prêt à mettre à niveau les anciennes pages, si nécessaire.
La manière la plus simple.Edit 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]
Dans asp.net mvc vous pouvez utiliser @DateTime.UtcNow.ToString() pour js numéro de version du fichier.Numéro de Version de changement automatique avec date et de forcer le navigateur client pour actualiser automatiquement le fichier js.J'en utilisant cette méthode et c'est bien.
<script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"></script>
Ci-dessous 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>
