Wie kann ich Clients zwingen, JavaScript-Dateien zu aktualisieren?

Wir arbeiten derzeit in einer privaten Beta und sind daher noch dabei, ziemlich schnelle Änderungen vorzunehmen, obwohl wir diesen Prozess offensichtlich verlangsamen werden, wenn die Nutzung zunimmt. Ein Problem, auf das wir stoßen, ist jedoch, dass die Client-Browser nach dem Herausgeben eines Updates mit neuen JavaScript-Dateien immer noch die zwischengespeicherte Version der Datei verwenden und das Update nicht sehen. Natürlich können wir sie bei einem Supportanruf einfach über eine ctrlF5Aktualisierung informieren, um sicherzustellen, dass sie die aktuellen Dateien vom Server erhalten. Es wäre jedoch vorzuziehen, dies vor diesem Zeitpunkt zu erledigen.

Unser aktueller Gedanke ist, einfach eine Versionsnummer an den Namen der JavaScript-Dateien anzuhängen und dann, wenn Änderungen vorgenommen werden, die Version im Skript zu erhöhen und alle Referenzen zu aktualisieren. Dies erledigt definitiv die Arbeit, aber das Aktualisieren der Referenzen in jeder Version kann umständlich werden.

Da ich sicher bin, dass wir nicht die ersten sind, die sich damit befassen, dachte ich, ich würde es der Community vorwerfen. Wie stellen Sie sicher, dass Clients ihren Cache aktualisieren, wenn Sie Ihren Code aktualisieren? Wenn Sie die oben beschriebene Methode verwenden, verwenden Sie einen Prozess, der die Änderung vereinfacht?

Soweit ich weiß, besteht eine übliche Lösung darin, ?<version>dem src-Link des Skripts einen hinzuzufügen .

Zum Beispiel:

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

Ich gehe an dieser Stelle davon aus, dass es keinen besseren Weg als find-replace gibt, um diese "Versionsnummern" in allen Skript-Tags zu erhöhen.

Möglicherweise lässt ein Versionskontrollsystem dies für Sie tun? Die meisten Versionskontrollsysteme haben die Möglichkeit, die Versionsnummer beispielsweise beim Einchecken automatisch einzugeben.

Es würde ungefähr so ​​aussehen:

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

Natürlich gibt es immer bessere Lösungen wie diese .

Das Anhängen der aktuellen Uhrzeit an die URL ist in der Tat eine gängige Lösung. Sie können dies jedoch auch auf Webserverebene verwalten, wenn Sie möchten. Der Server kann so konfiguriert werden, dass verschiedene HTTP-Header für Javascript-Dateien gesendet werden.

Um beispielsweise zu erzwingen, dass die Datei nicht länger als 1 Tag zwischengespeichert wird, senden Sie Folgendes:

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

Wenn Sie für die Beta den Benutzer zwingen möchten, immer die neuesten Informationen zu erhalten, verwenden Sie Folgendes:

Cache-Control: no-cache, must-revalidate

Google Page-Speed: Fügen Sie der URL für statische Ressourcen keine Abfragezeichenfolge hinzu. Die meisten Proxys, insbesondere Squid up bis Version 3.0, speichern Ressourcen nicht mit einem "?" in ihrer URL, auch wenn in der Antwort ein Cache-control: public-Header vorhanden ist. Um das Proxy-Caching für diese Ressourcen zu aktivieren, entfernen Sie Abfragezeichenfolgen aus Verweisen auf statische Ressourcen und codieren Sie stattdessen die Parameter in die Dateinamen selbst.

In diesem Fall können Sie die Version in die URL ex: http://abc.com/ v1.2 /script.js aufnehmen und den Link zu http://abc.com/script.js mit apache mod_rewrite umleiten . Wenn Sie die Version ändern, aktualisiert der Client-Browser die neue Datei.

Diese Verwendung wurde abgelehnt: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Diese Antwort ist nur 6 Jahre zu spät, aber ich sehe diese Antwort an vielen Stellen nicht ... HTML5 hat den Anwendungscache eingeführt , mit dem dieses Problem gelöst wird. Ich stellte fest, dass der neue Servercode, den ich schrieb, altes Javascript zum Absturz brachte, das in den Browsern der Benutzer gespeichert war, und wollte daher einen Weg finden, ihr Javascript abzulaufen. Verwenden Sie eine Manifestdatei, die folgendermaßen aussieht:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

und generieren Sie diese Datei jedes Mal mit einem neuen Zeitstempel, wenn Benutzer ihren Cache aktualisieren sollen. Wenn Sie dies hinzufügen, wird der Browser nicht neu geladen (selbst wenn ein Benutzer die Seite aktualisiert), bis das Manifest dies anweist.

Wie wäre es mit dem Hinzufügen der Dateigröße als Ladeparameter?

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

Jedes Mal, wenn Sie die Datei aktualisieren, ändert sich der Parameter "filever".

Wie wäre es, wenn Sie die Datei aktualisieren und Ihre Aktualisierungsergebnisse dieselbe Dateigröße haben? Was sind die Chancen?

Nicht alle Browser zwischenspeichern Dateien mit '?' drin. Was ich getan habe, um sicherzustellen, dass es so weit wie möglich zwischengespeichert wurde, habe ich die Version in den Dateinamen aufgenommen.

Also stuff.js?123tat ich es stattdessenstuff_123.js

Ich habe mod_redirect(glaube ich) in Apache verwendet, um have stuff_*.jszu gehenstuff.js

Für ASP.NET-Seiten verwende ich Folgendes

VOR

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

AFTER (Nachladen erzwingen)

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

Das Hinzufügen von DateTime.Now.Ticks funktioniert sehr gut.

Für ASP.NET nehme ich die nächste Lösung mit erweiterten Optionen an (Debug- / Release-Modus, Versionen):

Auf diese Weise enthaltene Js- oder CSS-Dateien:

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

Global.JsPostfix und Global.CssPostfix werden in Global.asax folgendermaßen berechnet:

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

Heutzutage ist es üblich, einen Inhalts-Hash-Code als Teil des Dateinamens zu generieren, um den Browser, insbesondere den IE, zu zwingen, die Javascript- oder CSS-Dateien neu zu laden.

Zum Beispiel,

Verkäufer. a7561fb0e9a071baadb9 .js
main. b746e3eb72875af2caa9 .js

Es ist im Allgemeinen die Aufgabe für die Build-Tools wie Webpack. Hier finden Sie weitere Informationen, wenn jemand ausprobieren möchte, ob Sie ein Webpack verwenden.

Wenn Sie die Seite generieren, die auf die JS-Dateien verweist, hängt eine einfache Lösung den Zeitstempel der letzten Änderung der Datei an die generierten Links an.

Dies ist der Antwort von Huppie sehr ähnlich, funktioniert jedoch in Versionskontrollsystemen ohne Schlüsselwortersetzung. Es ist auch besser, als die aktuelle Zeit anzuhängen, da dies das Caching verhindern würde, selbst wenn sich die Datei überhaupt nicht geändert hätte.

Die jQuery-Funktion getScript kann auch verwendet werden, um sicherzustellen, dass eine js-Datei tatsächlich jedes Mal geladen wird, wenn die Seite geladen wird.

So habe ich es gemacht:

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

Überprüfen Sie die Funktion unter http://api.jquery.com/jQuery.getScript/

Standardmäßig setzt $ .getScript () die Cache-Einstellung auf false. Dadurch wird ein zeitgestempelter Abfrageparameter an die Anforderungs-URL angehängt, um sicherzustellen, dass der Browser das Skript bei jeder Anforderung herunterlädt.

In PHP :

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

In HTML :

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

Wie es funktioniert:

Schreiben filepathSie in HTML den Namen und wie gewohnt, jedoch nur in die Funktion. PHP ruft die filetimeDatei ab und gibt die filepath+name+"?"+timeletzte Änderung zurück

Wir haben ein SaaS für Benutzer erstellt und ihnen ein Skript zum Anhängen auf ihrer Website-Seite bereitgestellt. Es war nicht möglich, eine Version mit dem Skript anzuhängen, da der Benutzer das Skript für Funktionen an seine Website anfügt und ich sie nicht erzwingen kann um die Version jedes Mal zu ändern, wenn wir das Skript aktualisieren

Daher haben wir eine Möglichkeit gefunden, die neuere Version des Skripts jedes Mal zu laden, wenn der Benutzer das ursprüngliche Skript aufruft

Der Skriptlink, der dem Benutzer zur Verfügung gestellt wird

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

die Skriptdatei

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
}

Erläuterung:

Der Benutzer hat das ihm auf seiner Website bereitgestellte Skript angehängt, und wir haben mithilfe des jQuery-Selektors überprüft, ob das mit dem Skript verknüpfte eindeutige Token vorhanden ist oder nicht. Wenn nicht, wird es dynamisch mit einem neueren Token (oder einer neueren Version) geladen.

Dies bedeutet, dass dasselbe Skript zweimal aufgerufen wird, was ein Leistungsproblem sein kann. Es löst jedoch das Problem, dass das Skript nicht aus dem Cache geladen werden muss, ohne die Version in den tatsächlichen Skriptlink einzufügen, der dem Benutzer oder Client zugewiesen wurde

Haftungsausschluss: Nicht verwenden, wenn die Leistung in Ihrem Fall ein großes Problem darstellt.

In asp.net mvc können Sie @ DateTime.UtcNow.ToString () für die Versionsnummer der js-Datei verwenden. Die Versionsnummer ändert sich automatisch mit dem Datum und Sie zwingen den Client-Browser, die js-Datei automatisch zu aktualisieren. Ich benutze diese Methode und das funktioniert gut.

<script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"></script>

location.reload (true);

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

Ich rufe diese Codezeile dynamisch auf, um sicherzustellen, dass Javascript nicht vom Cache des Browsers, sondern vom Webserver erneut abgerufen wurde, um diesem Problem zu entgehen.

Eine Lösung besteht darin, beim Abrufen der Ressource eine Abfragezeichenfolge mit einem Zeitstempel an die URL anzuhängen. Dies nutzt die Tatsache aus, dass ein Browser keine Ressourcen zwischenspeichert, die von URLs mit darin enthaltenen Abfragezeichenfolgen abgerufen werden.

Sie möchten wahrscheinlich nicht, dass der Browser diese Ressourcen überhaupt nicht zwischenspeichert. Es ist wahrscheinlicher, dass Sie möchten, dass sie zwischengespeichert werden, aber Sie möchten, dass der Browser eine neue Version der Datei abruft, wenn sie verfügbar ist.

Die häufigste Lösung scheint darin zu bestehen, einen Zeitstempel oder eine Revisionsnummer in den Dateinamen selbst einzubetten. Dies ist etwas mehr Arbeit, da Ihr Code geändert werden muss, um die richtigen Dateien anzufordern. Dies bedeutet jedoch, dass z. B. Version 7 von snazzy_javascript_file.js(dh snazzy_javascript_file_7.js) im Browser zwischengespeichert wird, bis Sie Version 8 veröffentlichen, und Ihr Code dann in geändert wird snazzy_javascript_file_8.jsstattdessen holen .

Der Vorteil der Verwendung von a file.js?V=1über a fileV1.jsbesteht darin, dass Sie nicht mehrere Versionen der JavaScript-Dateien auf dem Server speichern müssen.

Das Problem, das ich sehe, file.js?V=1ist, dass Sie möglicherweise abhängigen Code in einer anderen JavaScript-Datei haben, der bei Verwendung der neuen Version der Bibliotheksdienstprogramme beschädigt wird.

Aus Gründen der Abwärtskompatibilität ist es meiner Meinung nach viel besser, diese jQuery.1.3.jsfür Ihre neuen Seiten zu verwenden und vorhandene Seiten zu verwenden jQuery.1.1.js, bis Sie bereit sind, die älteren Seiten bei Bedarf zu aktualisieren.

Verwenden Sie eine Versionsvariable GET, um das Zwischenspeichern des Browsers zu verhindern.

Das Anhängen ?v=AUTO_INCREMENT_VERSIONan das Ende Ihrer URL verhindert das Zwischenspeichern von Browsern und vermeidet alle zwischengespeicherten Skripte.

Mein Kollege hat gerade einen Verweis auf diese Methode gefunden, nachdem ich (in Bezug auf CSS) unter http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ gepostet habe . Gut zu sehen, dass andere es benutzen und es scheint zu funktionieren. Ich gehe an dieser Stelle davon aus, dass es keinen besseren Weg gibt als find-replace, um diese "Versionsnummern" in allen Skript-Tags zu erhöhen.

Obwohl es rahmenspezifisch ist, verfügt Django 1.4 über diese Funktion, die auf ähnliche Weise funktioniert wie der Link zur 'greenfelt'-Site in der obigen Antwort

Cache-Busting in ASP.NET Core über einen Tag-Helper erledigt dies für Sie und ermöglicht Ihrem Browser, zwischengespeicherte Skripte / CSS zu behalten, bis sich die Datei ändert. Fügen Sie einfach den Tag-Helfer asp-append-version = "true" zu Ihrem Skript- (js) oder Link-Tag (css) hinzu:

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

Dave Paquette hat hier (unten auf der Seite) ein gutes Beispiel und eine Erklärung für das Cache-Busting

Einfachste Lösung? Lassen Sie den Browser überhaupt nicht zwischenspeichern. Fügen Sie die aktuelle Zeit (in ms) als Abfrage hinzu.

(Sie befinden sich noch in der Beta-Phase, daher können Sie einen vernünftigen Grund dafür angeben, die Leistung nicht zu optimieren. Aber YMMV hier.)

Ein einfacher Weg. Bearbeiten Sie 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]

Unten hat bei mir funktioniert:

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