Der Cache wird aktualisiert oder nicht, wenn ein Update im Netzwerk verfügbar ist (Progressive Web App). Wenn ja, wie?

Question

enter image description here

Der Cache wird aktualisiert oder nicht, wenn ein Update im Netzwerk verfügbar ist (Progressive Web App). Wenn ja, wie?

(E-Commerce-Szenario) Angenommen, Client greift zum dritten und vierten Mal auf denselben Pfad zu, und das Netzwerk empfängt einige Updates für diesen Pfad (Sie suchen nach Handys in flipkart). Aber die Sache ist im Cache-Speicher Die gesuchten Daten wurden gespeichert und das Netzwerk verfügt über die Updates. Wenn wir wiederholt auf denselben Pfad zugreifen, ruft der Service Worker Daten aus dem lokalen Speicher mit den aktualisierten Daten oder den Daten ab, die bereits während der Datenspeicherung gespeichert wurden vorheriger Besuch?

Answer 1

Here's a good description

Es läuft darauf hinaus: (. Ex HTML oder JavaScript-Datei)

Wenn Sie eine Ressource erhalten mit http/GET kann die Antwort zwei Eigenschaften umfassen:

• Cache-Control: max-age=[number of seconds]

• ETag: [some code or hash]

max-age teilt dem Browser mit, wie viele Sekunden der Cache verwendet werden soll, anstatt eine neue http/GET-Anforderung für die Ressource zu senden.

Sobald die maximale Zeit verstrichen ist, sendet der Browser die http/GET-Anfrage einschließlich ETag. Der Server überprüft dann seine Ressource, um festzustellen, ob die ETag immer noch mit der vom Browser gesendeten übereinstimmt. Wenn es übereinstimmt, sendet der Server eine 304 Not Modified Antwort, die Netzwerkbandbreite spart. Ist dies nicht der Fall, wird die Ressource erneut gesendet, wobei der Browser-Cache für die in max-age angegebene neue Zeit aktualisiert wird.

Für ein Live-Beispiel gehen Sie zur Entwicklerkonsole Ihres Browsers, während Sie diese Antwort betrachten (Drücken Sie STRG + UMSCHALT + I, wenn Sie Chrom verwenden). Seite aktualisieren. Wechseln Sie zur Registerkarte Network, und verwenden Sie den Filter, um favicon zu finden. Klicken Sie darauf und Sie werden die Antwort und Request-Header zu sehen, wie unten in der Abbildung dargestellt:

Beachten Sie die Cache-Control und Etag HTTP-Header-Elemente.