サービスワーカー、ダブルキャッシング？

Question

サービスワーカーに問題があります。私はキャッシュからネットワーク技術を実装しました。ここでは、コンテンツがキャッシュから最初にフェッチされ、ネットワークフェッチが常に実行され、結果はキャッシュに入れられます。 （この解決策に触発されて、CSS-Tricks）

私は自分のWebアプリケーションを変更し、リフレッシュすると、私はもちろん、古いコンテンツを取得します。しかし、それ以降のリフレッシュでは、コンテンツは古いものと新しいものとの間で交互に表示されます。新しいコンテンツや古いコンテンツを5回連続して取得することも、リクエストごとに異なるコンテンツを作成することもできます。

サービスワーカーをしばらくデバッグしていて、賢明なことはありません。実装に何が間違っているのか誰かが考えていますか？

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

私はあなたがバージョンを設定しているが、私は複数のキャッシュがまだ存在すると推定方法を確認していない（私はあなたがまだ前のキャッシュを削除しようとしているが、されて見ることができます）。 caches.match() is a convenience methodとその順序は保証されていません（少なくともChromeはのうち最も古いものをと最初に照会するようです）。 Chromeデベロッパーツールには、既存のキャッシュ（アプリケーション/キャッシュ/キャッシュストレージ）とその内容が表示されます。あなたが特定のキャッシュを照会したい場合、あなたは何をする必要があります：in the example in the Cache documentationとして

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

。