Browser-sync synchronisiert immer nur vorletzten Stand


#1

ich nutze das Programm browser-sync und habe damit ein Problem.

https://www.browsersync.io/

Kurz, das Tool ist eigentlich ganz gut, da man in Web-Projekten, Dateien (z.B. Css, JS, Html) auf Änderungen überwachen kann und damit im Browser einen Reload veranlassen kann. Ich ändere beispielsweise die Farbe in einer css Datei, speichere mit Strg+S und sehe ohne weiteres zutun im Browser die Seite mit geänderter Farbe.
Das funktioniert im “Server-Mode” (browser-sync startet einen eigenen Server und liefert die Daten aus) auch so wie es sollte.

Leider funktioniert das nicht ganz so wie es soll, wenn ich es im Proxy-Mode laufen lasse.
(Browser => Browser-Sync-Proxy (PORT:3000) => Backend (PORT:8080))

Dort habe ich das skurrile Verhalten, dass immer die vorletzte Änderung angezeigt wird.
Mit Farben sieht der Ablauf dann z.B. so aus.

css Farbe => Anzeige im Browser
white => white
black => white
green => black
blue  => green
white => blue
white + Leerzeichen => white
etc.

Wenn ich zum Beispiel dann mittels Leerzeichen und erneutem Speichern einen Reload erzwinge, ist die Ansicht quasi aktuell. Aber das ist ja nicht das Ziel, oder der Sinn des ganzen.

Browser-Sync starte ich so im Ordner in dem die statischen Dateien sind.

browser-sync start --proxy "localhost:8080" -f "*"

Die Änderungen werden auch im Terminal propagiert.

Die Grundlegende Konfiguration ist eine Spring Boot Anwendung, die ich aus der Spring Tool Suite (Eclipse) heraus starte und die das JS-Frontend dann aus src/main/rescources/static bereitstellt. (Allerdings in der Vorletzten Version)

Wenn ich dann im Browser einen Refresh via F5 mache, dann lädt es den aktuellen Stand. Dann brauche ich aber kein Browser-Sync.

Naja und Proxy-Mode eben wegen der Same-origin-Policy und so.

Das Problem besteht nicht nur bei CSS-Dateien, sondern auch allen anderen Dateien.

Wäre über Hinweise, Lösungsvorschläge oder einer Bestätigung, das ich nicht der einzige bin, dem es so geht hocherfreut.

Das einzige, was ich mir noch vorstellen kann ist, dass das Browser-Sync + Request usw. schneller ist, als Spring, das die Änderungen noch nicht mitbekommen hat und daher noch das alte Dokument ausliefert.


#2

Ok, nach dem letzten Satz und etwas Suchen habe ich eine Lösung gefunden.

browser-sync start --proxy "localhost:8080" -f "*" --reload-delay 300

Wenn ich ein Reload-delay von 300 ms angebe, dann wartet das ganze 300 ms bevor der Request gesendet wird. Damit bekomme ich dann immer die aktuellste Version.

100 ms reichen bei mir zum Beispiel nicht, so dass da immer noch die vorletzte Version ausgeliefert wird. Der default Wert für den Delay ist 0 ms.

Also falls noch jemand das Problem hat oder das Tool ausprobieren möchte. You’re invited.