Wie aktualisiere ich die Seite nach einem ServiceWorker-Update?

Ich habe viele Ressourcen zu Servicemitarbeitern konsultiert:

Updating your ServiceWorkerServiceWorker: Revolution der Webplattform Jake Archibald ist schön SVGOMG.

Ich weiß jedoch nicht, wie ich die Seite aktualisieren soll, nachdem ein neuer ServiceWorker installiert wurde. Egal, was ich mache, meine Seite ist auf einer alten Version fixiert und nur eine harte Aktualisierung (Cmd-Shift-R) wird das Problem beheben. Keine Kombination von 1) Schließen des Tabs, 2) Schließen von Chrome oder 3)location.reload(true) wird den neuen Inhalt liefern.

Ich habe einsuper einfache Beispiel-App basiert hauptsächlich auf SVGOMG. Bei der Installation werden eine Reihe von Ressourcen mit @ zwischengespeichercache.addAll(), und ich mache auchskipWaiting() wenn die Hauptversionsnummer der aktuellen Version nicht mit der Nummer der aktiven Version übereinstimmt (basierend auf einer IndexedDB-Suche):

self.addEventListener('install', function install(event) {
  event.waitUntil((async () => {
    var activeVersionPromise = localForage.getItem('active-version');
    var cache = await caches.open('cache-' + version);
    await cache.addAll(staticContent);
    var activeVersion = await activeVersionPromise;
    if (!activeVersion ||
      semver.parse(activeVersion).major === semver.parse(version).major) {
      if (self.skipWaiting) { // wrapping in an if while Chrome 40 is still around
        self.skipWaiting();
      }
    }
  })());
});

Ich verwende ein semver-inspiriertes System, bei dem die Hauptversionsnummer darauf hinweist, dass der neue ServiceWorker nicht im laufenden Betrieb gegen den alten ausgetauscht werden kann. Dies funktioniert auf der ServiceWorker-Seite - eine Erhöhung von v1.0.0 auf v1.0.1 bewirkt, dass der Worker sofort bei einer Aktualisierung installiert wird, während von v1.0.0 auf v2.0.0 gewartet wird, bis die Registerkarte geschlossen und erneut geöffnet wird, bevor sie geöffnet wird Eingerichtet

Zurück im Haupt-Thread, ich aktualisiere den ServiceWorker nach der Registrierung manuell - andernfalls erhält die Seite nicht einmal die Notiz, dass eine neue Version des ServiceWorker verfügbar ist (seltsamerweise habe ich nur sehr wenige Erwähnungen in der ServiceWorker-Literatur gefunden):

navigator.serviceWorker.register('/sw-bundle.js', {
  scope: './'
}).then(registration => {
  if (typeof registration.update == 'function') {
    registration.update();
  }
});

Der Inhalt, der dem Haupt-Thread bereitgestellt wird, bleibt jedoch immer auf einer alten Version der Seite ("Meine Version ist 1.0.0") hängen, unabhängig davon, ob ich die Version auf 1.0.1 oder 2.0.0 erhöhe.

Ich bin hier irgendwie ratlos. Ich hatte gehofft, eine elegante Semesterlösung für die ServiceWorker-Versionierung zu finden (daher meine Verwendung vonrequire('./package.json').version), aber in meiner aktuellen Implementierung bleibt der Benutzer ständig auf einer alten Version der Seite hängen, es sei denn, er aktualisiert alle seine Daten hart oder löscht sie manuell. : /

Antworten auf die Frage(6)

Ihre Antwort auf die Frage