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

Ajoutant le temps actuel de l'adresse 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 envoyez:

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

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 va pas reload (même lorsqu'un utilisateur actualise la page) jusqu'à ce que le manifeste dit il à.

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'ai stuff_123.js

J'ai utilisé mod_redirect(je crois) dans apache pour have stuff_*.js aller stuff.js

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

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 d'avoir 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)

C'est d'appeler 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.

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; 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 à la place.

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?

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 cela fonctionne:

En HTML, écrire le filepath et le nom que vous wold faire, mais dans la fonction.
PHP obtient le filetime du fichier et renvoie le filepath+name+"?"+time de dernière modification

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,

vendeur.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.

L'avantage de l'utilisation d'un file.js?V=1 sur une fileV1.js 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.

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/[email protected]()"></script>