Wird meine Seite aus dem Browser-Cache geladen?

Question

Ich habe ein Abzeichen "neue Gegenstände" auf einer Seite, die ich sofort aktualisieren möchte die Seite aus dem Cache geladen wird (d. H. Wenn Sie "Zurück" oder "Weiter" drücken, um zu dieser Seite zurückzukehren). Was ist der beste Weg, dies zu erreichen?

Das Setup ist ziemlich einfach. Das Layout für die App sucht alle 8 Sekunden nach neuen Objekten und aktualisiert die Badge + Liste der Elemente entsprechend.

$(function() { 
    setInterval(App.pollForNewItems, 8000); 
}); 

Wenn jemand von dieser Seite weg navigiert, um sich die Details eines Objekts anzusehen, kann viel passieren. Die Dinge sind "neu", bis alle Benutzer hat sie angezeigt, und die App wird wahrscheinlich mehrere Benutzer haben es gleichzeitig (die Art von Workflow für ein Call-Center oder Support-Tickets verwendet).

Um sicherzustellen, dass die Abzeichen sind immer auf dem neuesten Stand, die ich habe:

$(window).bind('focus load', function (event) { 
    App.pollForNewItems(); 
}); 

..und obwohl dies funktioniert, Polling für neue Elemente auf ‚Last‘ ist nur dann sinnvoll, wenn die Seite geladen wird von der Cache. Gibt es eine zuverlässige Cross-Browser-Möglichkeit, um festzustellen, ob eine Seite aus dem Cache geladen wird?

Answer 1

Eine teilweise Hacky-Lösung ist eine Var mit der aktuellen Zeit auf dem Server festgelegt, und legen Sie eine Variable mit der aktuellen Client-Zeit am Anfang der Seite. Wenn sie sich um mehr als einen bestimmten Schwellenwert (1 Minute?) Unterscheiden, können Sie davon ausgehen, dass es sich um eine zwischengespeicherte Seitenladung handelt.

Beispiel JS (unter Verwendung von ASP.Net Syntax für die Serverseite):

var serverTime = new Date('<%= DateTime.Now.ToUniversalTime().ToString() %>'); 
var pageStartTime = Date.UTC(new Date()); 
var isCached = serverTime < pageStartTime && 
       pageStartTime.getTime() - serverTime.getTime() > 60000; 

Alternativ Cookies auf der Client-Seite (unter der Annahme von Cookies aktiviert ist) verwenden, können Sie mit einem eindeutigen Schlüssel für einen Cookie überprüfen für die aktuelle Version der Seite. Wenn keine vorhanden ist, schreiben Sie ein Cookie dafür, und bei jedem anderen Seitenzugriff zeigt das Vorhandensein des Cookies an, dass es aus dem Cache geladen wird.

z. (Angenommen, einige Cookie-Hilfsfunktionen sind verfügbar)

Answer 2

Persönlich würde ich Datenattribute festlegen, die die Element-ID für jedes Element enthalten.

I.e.

<ul> 
    <li data-item-id="123">Some item.</li> 
    <li data-item-id="122">Some other item.</li> 
    <li data-item-id="121">Another one..</li> 
</ul> 

Ihre App.pollForNewItems Funktion würde das data-item-id Attribut des ersten Elements greifen (wenn neueste zuerst ist) und sie an den Server mit Ihrer ursprünglichen Anfrage senden.

Der Server würde dann nur die Elemente WHERE id > ... zurückgeben, die Sie dann der Liste voranstellen können.

Ich bin immer noch verwirrt, warum Sie wissen möchten, ob der Browser eine zwischengespeicherte Version der Seite hat.

Gibt es auch einen Grund für die Bindung an load statt ready?

• Christian

Answer 3

können Sie den Web-Browser bitten, die Seite nicht zwischenspeichern.Versuchen Sie, diese HTTP-Header:

Insbesondere Cache-control: no-store interessant ist, weil es den Browser anweist, die Seite nicht im Speicher speichern überhaupt, die eine veraltete Seite verhindert geladen, wenn Sie die Vor/Zurück-Button drücken.

Wenn Sie dies stattdessen tun, müssen Sie beim Laden der Seite keine Daten abrufen.

Answer 4

Navigation Timing in den meisten Browsern ist jetzt (ie9 +) http://www.w3.org/TR/navigation-timing/#sec-navigation-info-interface

if (!!window.performance && window.performance.navigation.type === 2) { 
    // page has been hit using back or forward buttons 
} else { 
    // regular page hit 
} 

Answer 5

gute Antwort: https://stackoverflow.com/a/9870920/466363

Sie könnten nutzen auch Navigation Timing der Netzwerk-Latenz im Detail zu messen.

Hier ist ein guter Artikel: http://www.html5rocks.com/en/tutorials/webperformance/basics/

Wenn die Zeitdifferenz zwischen fetchStart und responseStart sehr gering ist, wurde die Seite aus dem Cache geladen, zum Beispiel.

von stewe

Answer 6

versuchen Sie folgendes Skript in Ihrer js-Datei.

if(!!window.performance && window.performance.navigation.type == 2) 
{ 
    window.location.reload(); 
}