Verwaltung von Service-Worker-Cache

Question

Der Servicemitarbeiter Code, den ich zur Zeit mit wie folgt aussieht teil

self.addEventListener('install', function(event) { 
    event.waitUntil(
     caches.open('v1').then(function(cache) { 
      return cache.addAll([ 
       '/react-redux/node_modules/react/dist/react-with-addons.js', 
       '/react-redux/node_modules/react-dom/dist/react-dom.js', 
       '/react-redux/a.js' 
      ]); 
     }) 
    ); 
}); 

Mit natürlich die Standard-Fetch-Ereignis-Listener, die aus dem Cache zurückgibt, oder führt eine Netzwerkanforderung, wenn das Element das Experimentieren ist nicht da.

Aber was, wenn, aus dem obigen Beispiel, a.js, und nur a.js ist aktualisiert-wie kann ich den Dienst Arbeiter bekommen, die Datei zu aktualisieren, aber nur, die Datei; und wie stelle ich sicher, dass die nächste die jetzt veraltete Version der Datei aus dem Service-Worker zieht, wenn der Benutzer das nächste Mal zu meiner Seite blättert?

Das Beste, was ich würde sich vorstellen kann einen Cache-buster auf diese Datei-URLs hinzufügen, zum Beispiel

'/react-redux/node_modules/react/dist/react-with-addons.js?hash=1MWRF3...'

dann aktualisieren, was Modul-Lader Ich verwende diese Dateien mit dem gleichen, aktuellen anfordern Hash/Cache-Buster, und dann in der SW-Installation Ereignis iterieren über die aktuellen Cache-Schlüssel und löschen Sie alles, was veraltet ist, und fügen Sie alles, was fehlt.

Das würde scheint beide Probleme zu lösen: Wenn eine Datei aktualisiert wird, wird die Netzwerkanforderung, die gesendet wird, nichts in der jetzt abgestandenen Service Worker übereinstimmen, und so das gleiche Netzwerk Fallback passieren wird; und die selektive Cache-Einfügung in das Installationsereignis des Service Worker würde nicht versuchen, Dinge zum Cache hinzuzufügen, die bereits vorhanden und aktuell sind.

Und natürlich würde sich der Code des Service Worker ändern, wenn sich diese Hashwerte ändern (automatisch aus einem Build-Prozess) und die SW so neu installieren, wenn sich Dateien ändern würden.

Aber ich kann nicht helfen, aber denke, es gibt einen einfacheren Weg. Ist da?

Answer 1

Ihr Verständnis von dem, was idealerweise passieren sollte, und die Schwierigkeiten, sicherzustellen, dass zwischengespeicherte Assets effizient und zuverlässig aktualisiert werden, ist genau richtig.

Während Sie Ihren eigenen Ansatz verfolgen können, gibt es Tools, die den Prozess der Fingerabdruckung jeder Datei automatisieren und dann eine Service-Worker-Datei generieren, die Ihre zwischengespeicherten Assets verwaltet. Ich habe eine von ihnen entwickelt, sw-precache. offline-plugin ist eine andere Alternative, die ähnlichen Boden bedeckt.