Cache-Busting mit Create-React-App

Dies liegt wahrscheinlich an Ihrem Web-Worker.

Wenn Sie in Ihre index.js-Datei schauen, können Sie sehen 

registerServiceWorker();

Ich habe mich nie gefragt, was es getan hat. Wenn wir uns die Datei ansehen, aus der sie importiert wurde, können wir sehen 

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read {URL}
// This link also includes instructions on opting out of this behavior.

Wenn Sie den Web-Worker löschen möchten, löschen Sie nicht nur die Zeile. Importiere unregister und rufe es in deiner Datei anstelle des Registers auf.

import { unregister } from './registerServiceWorker';

und Anruf sagen 

unregister()

P.S. Wenn Sie die Registrierung rückgängig machen, ist mindestens eine Aktualisierung erforderlich, damit die Registrierung funktioniert

BEARBEITEN: Bei create-react-app v2 ist der Service-Mitarbeiter standardmäßig deaktiviert

Ich hatte das gleiche Problem, wenn ich create-react-app verwende (und bei Heroku implementiere). Es wird immer die alte Version meiner App angezeigt.

Ich fand das Problem auf der Browserseite, es speichert meinen alten index.html mit seinem veralteten js-Bundle

Möglicherweise möchten Sie dem serverseitigen Antwortheader Folgendes hinzufügen 

"Cache-Control": "no-store, no-cache"

wenn Sie auch heroku create-react-app-buildpack verwenden, aktualisieren Sie die static.json-Datei

"headers": { 
    "/**": { 
        "Cache-Control": "no-store, no-cache" 
    } 
}

Ich denke auf diese Weise kann man den armen Service-Mitarbeiter trotzdem behalten ????, und der neueste Inhalt wird auf der N + 1-Last angezeigt (zweite Aktualisierung) 

Hoffe das hilft...

Wie in einigen der vorherigen Antworten erwähnt, können sich sowohl der Service-Worker als auch die (fehlenden) Cache-Header gegen Sie verschwören, wenn es darum geht, alte Versionen Ihrer React App zu sehen.

Die React docs geben Folgendes an, wenn es um Caching geht:

Die Verwendung von Cache-Control: max-age=31536000 Für Ihre build/static - Assets und Cache-Control: no-cache Für alles andere ist ein sicherer und effektiver Ausgangspunkt, der sicherstellt, dass der Browser Ihres Benutzers immer nach einem aktualisierten index.html und speichert alle build/static - Dateien für ein Jahr im Cache. Beachten Sie, dass Sie das Ablaufdatum von einem Jahr für build/static Ohne Bedenken verwenden können, da der Hash des Dateiinhalts in den Dateinamen eingebettet ist.

Wie von @squarism erwähnt, haben ältere Versionen von create-react-app standardmäßig Opt-out der Service Worker-Registrierung, während neuere Versionen Opt-in sind. Sie können mehr darüber in den offiziellen Dokumenten lesen. Es ist ziemlich einfach, Ihre Konfiguration an die neueste anzupassen Vorlage wenn Sie mit einer älteren Version der create-react-app begonnen haben und auf das neue Verhalten umsteigen möchten.

Verwandte Fragen:

• Wie vermeide ich Caching für die create-react-App?
• ReactJS: Wie verhindert man, dass der Browser statische Dateien zwischenspeichert?
• wie man den Browser-Cache in reactjs löscht

Es scheint, dass sie sich von Opt-Out zu Opt-In in Bezug auf den Servicearbeiter gewandelt haben. Hier ist das Commit, das die README geändert hat, und es gibt Beispiele, die der Antwort von Kerry G ähneln:

https://github.com/facebook/create-react-app/commit/1b2813144b3b0e731d8f404a8169e6fa5916dde4#diff-4e6ec56f74ee42069aac401a4fe448ad

Wenn sich Ihr Problem auf Ressourcen bezieht, auf die in index.html statisch verwiesen wird, wie z. B. CSS-Dateien oder zusätzliche JS-Dateien (z. B. Konfigurationsdateien), können Sie eine Umgebungsvariable React) deklarieren und einen eindeutigen Wert zuweisen darauf verweisen und es in Ihrer index.html-Datei.

In Ihrem Build-Skript (Bash):

REACT_APP_CACHE_BUST={e.g. build number from a CI tool} npm run build

In Ihrer index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css?cachebust=%REACT_APP_CACHE_BUST%" />

Der Variablenname muss mit REACT_APP_ beginnen. Weitere Informationen zu Umgebungsvariablen in React: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables .