it-swarm.com.de

Umgang mit dem Browser-Cache in einseitigen Apps

Ich versuche herauszufinden, wie der Webbrowser-Cache für einseitige Apps richtig gehandhabt wird.

Ich habe ein ziemlich typisches Design: mehrere HTML-, JS- und CSS-Dateien, die das SPA implementieren, und eine Reihe von JSON-Daten, die vom SPA verwendet werden. Probleme treten auf, wenn ich ein Update pushen möchte: Ich aktualisiere gleichzeitig den statischen Teil der Site und den Code, der den JSON generiert, aber in Client-Browsern wird der statische Teil häufig zwischengespeichert, sodass der alte Code versucht, die neuen Daten und zu verarbeiten kann (abhängig von den vorgenommenen Änderungen) auf Probleme stoßen. (Insbesondere IE scheint aggressiver zu sein als Chrome oder Firefox über die Verwendung von zwischengespeichertem JS ohne erneute Validierung.)

Was ist der beste Weg, um damit umzugehen?

  1. Stellen Sie sicher, dass meine JSON-Änderungen abwärtskompatibel sind, und gehen Sie davon aus, dass die Browser-Caches in einem angemessenen Zeitraum ablaufen.
  2. Betten Sie eine Versionsnummer sowohl in das statische JS als auch in das JSON ein und führen Sie dann window.location.reload(true); aus, wenn sie nicht übereinstimmen.
  3. Finden Sie die geeignete Kombination von Überschriften heraus (must-revalidate oder no-cache oder Wasauchimmer; Quellenvariieren wie dies zu tun ist) um sicherzustellen, dass Browser bei jedem Laden immer alle Ressourcen erneut validieren, auch wenn dies einige zusätzliche Roundtrips zum Laden der Site bedeutet.
  4. Verwalten Sie meine Cache-Steuerung mikro und lassen Sie Header ablaufen, sodass statischer Inhalt abläuft, wenn ich ein Update pushen möchte.
  5. Etwas anderes?
30
Josh Kelley

Sie benötigen eine Cache-Busting-Lösung . Die Rolle des Cache-Bustings ist:

  1. Benennen Sie Ressourcen je nach Inhalt in einen eindeutigen Namen um.
  2. Aktualisieren Sie alle Verweise auf diese Ressourcen.

In einem Grunt-basierten Projekt wird häufig grunt-rev verwendet, um sicherzustellen, dass alle Dateien, die aktualisiert werden müssen, basierend auf ihrem Inhalt eindeutige Namen erhalten.

Wenn Sie sicherstellen, dass Ihre JSON-Dateien Cache-Busting-Dateinamen zusammen mit den Verweisen darauf in Ihrem Javascript erhalten, laden Clients immer die JSON-Dateien, die das Javascript erwartet.

Der Vorteil der Hash-basierten Dateinamenbildung besteht darin, dass Dateien, die nicht geändert wurden, nach dem Cache-Busting dieselben Dateinamen erhalten, sodass Browser zwischengespeicherte Inhalte weiterhin sicher verwenden können, wenn sie nicht geändert wurden.

Offensichtlich ist dies die Art von Dingen, die Sie im Rahmen des Produktionsaufbaus Ihres Projekts automatisieren möchten, damit Sie die Änderung von Dateinamen und Referenzen nicht manuell nachverfolgen müssen.

14
Ted Percival

Sie können if-modified-since + last-modified Oder if-none-match + etag Header zusammen mit dem richtigen cache-control Header verwenden. (Es kann Browser-Fehler geben, aber nichts, was Sie in den letzten Browsern nicht verwalten können.)

Wenn die Dateien statisch sind, empfehle ich Ihnen, if-modified-since Zu verwenden, da dies automatisch mit einem gut konfigurierten HTTP-Server möglich ist. Es sollte 304 zurücksenden, wenn die Datei seit dem letzten Download nicht geändert wurde.

Ich glaube nicht, dass Ihre Nr. 1 und Nr. 2 langfristig funktionieren würden. Die # 3 oder # 4 können funktionieren. Die Nummer 3 ist einfacher, aber Sie müssen nur einmal lernen, mit diesem Problem umzugehen. Ich würde also die Nummer 4 ausprobieren, wenn ich Sie wäre, aber die Lösung könnte davon abhängen, welche Browser Ihre Kunden verwenden ... Zum Beispiel hat IE8 Probleme beim Aktualisieren des Ajax-Cache usw.

5
inf3rno

Wenn Sie Java Servlet Filter in Ihr SPA aufnehmen können, finden Sie hier eine funktionierende Lösung: CorrectBrowserCacheHandlerFilter.Java

Wenn Ihr Browser die statischen Dateien anfordert, leitet der Server grundsätzlich alle Anforderungen an dieselbe um, jedoch mit einem Hash-Abfrageparameter (z. B. ?v=azErT), Der vom Inhalt der statischen Zieldatei abhängt.

Auf diese Weise speichert der Browser beispielsweise niemals die in Ihrem index.html Deklarierten statischen Dateien zwischen (da immer ein 302 Moved Temporarily Erhalten wird), sondern nur diejenigen mit der Hash-Version (der Server wird dies zwischenspeichern) antworte 200 für sie). Der Browser-Cache wird also effizient für statische Dateien mit Hash-Version verwendet.

Haftungsausschluss: Ich bin der Autor von CorrectBrowserCacheHandlerFilter.Java.

2
Anthony O.