Service Worker, Doppel-Caching?

Question

Ich habe Probleme mit meinem Service Worker. Ich habe es mit der Cache-Netzwerk-Technik implementiert, bei der Inhalt zuerst aus dem Cache abgerufen wird und ein Netzwerk-Abruf immer durchgeführt wird und das Ergebnis bei Erfolg zwischengespeichert wird. (Inspiriert von dieser Lösung, CSS-Tricks)

Wenn ich Änderungen an meiner Web-App und drücken Sie auf Aktualisieren, ich natürlich, das erste Mal, den alten Inhalt. Bei späteren Aktualisierungen wechselt der Inhalt jedoch zwischen alt und neu. Ich kann fünf oder fünf Mal hintereinander neue oder alte Inhalte erhalten oder bei jeder Anfrage anders sein.

Ich habe den Service Worker schon eine Weile ausprobiert und bekomme keine Ahnung. Hat jemand eine Vorstellung davon, was mit der Implementierung falsch ist?

EDIT:

var version = 'v1::2'; 

self.addEventListener("install", function (event) { 
    event.waitUntil(
     caches 
     .open(version + 'fundamentals') 
     .then(function (cache) { 
      return cache.addAll([ 
       "/" 
      ]); 
     }) 
    ); 
}); 

self.addEventListener("fetch", function (event) { 

    if (event.request.method !== 'GET') { 
     return; 
    } 
    event.respondWith(
     caches 
     .match(event.request) 
     .then(function (cached) { 
      var networked = fetch(event.request) 
       .then(fetchedFromNetwork, unableToResolve) 
       .catch(unableToResolve); 

      return cached || networked; 

      function fetchedFromNetwork(response) { 
       var cacheCopy = response.clone(); 

       caches 
        .open(version + 'pages') 
        .then(function add(cache) { 
         cache.put(event.request, cacheCopy); 
        }); 

       return response; 
      } 

      function unableToResolve() { 

       return new Response('<h1>Service Unavailable</h1>', { 
        status: 503, 
        statusText: 'Service Unavailable', 
        headers: new Headers({ 
         'Content-Type': 'text/html' 
        }) 
       }); 
      } 
     }) 
    ); 
}); 

self.addEventListener("activate", function (event) { 

    event.waitUntil(
     caches 
     .keys() 
     .then(function (keys) { 
      return Promise.all(
       keys 
       .filter(function (key) { 
        return !key.startsWith(version); 
       }) 
       .map(function (key) { 
        return caches.delete(key); 
       }) 
      ); 
     }) 
    ); 
}); 

Answer 1

Ich sehe nicht, wie Sie die Version einstellen, aber ich nehme an noch mehr Caches existieren (ich sehe, dass Sie versuchen, den vorherigen Caches zu löschen, aber immer noch). caches.match() is a convenience method und die Bestellung ist nicht garantiert (zumindest scheint Chrome die älteste zuerst abzufragen). In den Chrome-Entwicklertools werden die vorhandenen Caches (Anwendung/Cache/Cache-Speicher) und deren Inhalte angezeigt. Wenn Sie einen bestimmten Cache abfragen möchten, müssen Sie tun:

caches.open(currentCacheName).then(function(cache) {...} 

als in the example in the Cache documentation.