Wie kann ich den Browser-Cache programmgesteuert leeren?

Ich suche nach einer Möglichkeit, den Browser-Cache programmgesteuert zu leeren. Ich mache das, weil die Anwendung vertrauliche Daten zwischenspeichert und ich diese entfernen möchte, wenn Sie auf "Abmelden" klicken. Dies würde entweder über Server oder JavaScript geschehen. Natürlich wird von der Verwendung der Software auf fremden / öffentlichen Computern immer noch abgeraten, da es mehr Gefahren wie Key Logger gibt, die Sie auf Softwareebene einfach nicht besiegen können.

Es ist möglich, dass Sie einfach jQuery verwenden können, um das 'Meta-Tag', das auf den Cache-Status verweist, durch einen Ereignishandler / eine Ereignisschaltfläche zu ersetzen und dann einfach zu aktualisieren.

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

HINWEIS: Diese Lösung basiert auf dem Anwendungscache, der als Teil der HTML 5-Spezifikation implementiert ist. Außerdem ist eine Serverkonfiguration erforderlich, um das App Cache-Manifest einzurichten. Es wird keine Methode beschrieben, mit der der "traditionelle" Browser-Cache über clientseitigen oder serverseitigen Code gelöscht werden kann, was nahezu unmöglich ist.

Mit einem Browser können Sie den Cache auf keinen Fall leeren. Es wäre ein großes Sicherheitsproblem, wenn dies möglich wäre. Dies kann sehr leicht missbraucht werden - die Minute, in der ein Browser eine solche "Funktion" unterstützt, ist die Minute, in der ich sie von meinem Computer deinstalliere.

Sie können festlegen, dass Ihre Seite nicht zwischengespeichert werden soll, indem Sie die entsprechenden Header senden oder die folgenden Meta-Tags verwenden:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Möglicherweise möchten Sie auch die automatische Vervollständigung für Formularfelder deaktivieren, obwohl ich befürchte, dass es eine Standardmethode gibt ( siehe diese Frage ).

Unabhängig davon möchte ich darauf hinweisen, dass Sie SSL verwenden sollten, wenn Sie mit vertraulichen Daten arbeiten. Wenn Sie kein SSL verwenden, kann jeder, der Zugriff auf das Netzwerk hat, den Netzwerkverkehr abhören und leicht sehen, was Ihr Benutzer sieht.

Durch die Verwendung von SSL verwenden einige Browser auch kein Caching, es sei denn, dies wird ausdrücklich empfohlen. Siehe diese Frage .

Verwenden Sie HTML selbst. Es gibt einen Trick, der verwendet werden kann. Der Trick besteht darin, einen Parameter / eine Zeichenfolge an den Dateinamen im Skript-Tag anzuhängen und ihn zu ändern, wenn Sie Änderungen an der Datei vornehmen.

<script src="myfile.js?version=1.0.0"></script>

Der Browser interpretiert die gesamte Zeichenfolge als Dateipfad, obwohl was nach dem "?" sind Parameter. Jetzt passiert also, dass Sie beim nächsten Aktualisieren Ihrer Datei einfach die Nummer im Skript-Tag auf Ihrer Website ändern (Beispiel <script src="myfile.js?version=1.0.1"></script>) und jeder Benutzerbrowser sieht, dass sich die Datei geändert hat, und holt sich eine neue Kopie.

Die beste Idee ist, js Dateigenerierung mit Name + etwas Hash mit Version zu machen. Wenn Sie den Cache leeren müssen, generieren Sie einfach neue Dateien mit neuem Hash. Dadurch wird der Browser veranlasst, neue Dateien zu laden

Anfangs habe ich verschiedene programmatische Ansätze in meinem HTML-Code JS ausprobiert, um den Browser-Cache zu löschen. Auf dem neuesten Chrome funktioniert nichts.

Schließlich endete ich mit .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Getestet in Chrome, Firefox, Opera

Referenz: https://wp-mix.com/disable-caching-htaccess/

location.reload (true); lädt die aktuelle Seite schwer neu und ignoriert den Cache.
Cache.delete () kann auch für neues Chrome, Firefox und Oper verwendet werden.

In Chrome sollten Sie dies mithilfe der Benchmarking-Erweiterung tun können. Sie müssen Ihr Chrom mit den folgenden Schaltern starten:

./chrome --enable-benchmarking --enable-net-benchmarking 

In der Chrome-Konsole können Sie jetzt Folgendes tun:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Wie Sie den obigen Befehlen entnehmen können, wird nicht nur der Browser-Cache gelöscht, sondern auch der DNS-Cache und Netzwerkverbindungen geschlossen. Diese sind großartig, wenn Sie das Benchmarking der Ladezeit von Seiten durchführen. Natürlich müssen Sie nicht alle verwenden, wenn sie nicht benötigt werden (z. B. clearCache () sollte ausreichen, wenn Sie nur den Cache leeren müssen und sich nicht um DNS-Cache und -Verbindungen kümmern).

Sie können jetzt Cache.delete () verwenden

Beispiel:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Funktioniert mit Chrome 40+, Firefox 39+, Opera 27+ und Edge.

Stellen Sie sich vor, die .jsDateien werden abgelegt/my-site/some/path/ui/js/myfile.js

Normalerweise würde das Skript-Tag also so aussehen:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Ändern Sie dies nun in:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Jetzt wird das natürlich nicht funktionieren. Damit es funktioniert, müssen Sie eine oder mehrere Zeilen zu Ihrer hinzufügen. .htaccess Die wichtige Zeile lautet: (gesamter .htaccess unten)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Das bedeutet also, dass 1111111111der Pfad aus dem Pfad entfernt und mit dem richtigen Pfad verknüpft wird.

Wenn Sie jetzt Änderungen vornehmen, müssen Sie nur die Nummer 1111111111auf die gewünschte Nummer ändern . Und wie auch immer Sie Ihre Dateien einschließen, Sie können diese Nummer über einen Zeitstempel festlegen, wenn die js-Datei zuletzt geändert wurde. Der Cache funktioniert also normal, wenn sich die Nummer nicht ändert. Wenn es sich ändert, wird die neue Datei bereitgestellt (JA IMMER), da der Browser eine vollständig neue URL erhält und nur glaubt, dass die Datei so neu ist, dass er sie abrufen muss.

Sie können dies für verwenden CSS, faviconsund was auch immer zwischengespeichert wird. Für CSS einfach so verwenden

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

Und es wird funktionieren! Einfach zu aktualisieren, einfach zu warten.

Der versprochene volle .htaccess

Wenn Sie noch keinen .htaccess haben, ist dies das Minimum, das Sie dort haben müssen:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>