サービスワーカーキャッシュを多く

Question

私はサービスワーカーに取り組んでいます。サービスワーカーは、特定のファイルをキャッシュするだけです。 しかし、実装とリフレッシュ（はい私は "リロード後にダムスウェット"）より多くのファイルが "sw経由で読み込ま"し、 "キャッシュにファイル"リストに追加した後。 私はサービスワーカーには新しく、何が間違っているのか分かりません。私はちょうどそれについていくつかのチュートリアルを続けた。 ここにコード。おそらく、私は完全に間違った方向に向かっています。

if ('serviceWorker' in navigator) { 
window.addEventListener('load', function() { 
    navigator.serviceWorker.register('/worker.js').then(function(registration) { 
     }, function(err) { 
      console.log('ServiceWorker registration failed: ', err); 
     }); 
    }); 
} 

var debugMode = false; 

//Variables to cache 
var CACHE_NAME = 'companyname-cache-1511794947915'; 
var urlsToCache = [ 
'/typo3conf/ext/companyname/Resources/Public/css/animate.css', 
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap.css', 
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap.min.css', 
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap-theme.css', 
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap-theme.min.css', 
'/typo3conf/ext/companyname/Resources/Public/css/main.css', 
'/typo3conf/ext/companyname/Resources/Public/css/et/override.css', 
'/typo3conf/ext/companyname/Resources/Public/css/et/screen-full.css', 
'/typo3conf/ext/companyname/Resources/Public/css/et/screen-full.min.css', 
'/typo3conf/ext/companyname/Resources/Public/Icons/favicon.ico', 
'/typo3conf/ext/companyname/Resources/Public/Icons/FaviconTouch/android-chrome-512x512.png', 
]; 

self.addEventListener('install', function(event) { 
// Perform install steps 
event.waitUntil(
    caches.open(CACHE_NAME) 
     .then(function(cache) { 
      return cache.addAll(urlsToCache); 
     }) 
    ); 
}); 
self.addEventListener("activate", function(event) { 
event.waitUntil(

    caches.keys().then(function(cacheNames) { 
     return Promise.all(
      cacheNames.map(function(cacheName) { 
       if(debugMode) { 
        console.log('actual cache name: %o', CACHE_NAME); 
        console.log('name inside the cache: %o', cacheName); 
       } 

       if ((cacheName.indexOf('companyname-cache-') !== -1) && (cacheName !== CACHE_NAME)) { 
        if(debugMode) { 
         console.log("old cache deleted"); 
        } 
        return caches.delete(cacheName); 
       } 
      }) 
     ); 
    }) 
); 
}); 
self.addEventListener('fetch', function(event) { 
event.respondWith(
    caches.match(event.request) 

     .then(function(response) { 
      if (response) { 
       if(debugMode) { 
        console.log("fetch 1"); 
       } 
       return response; 
      } 
      var fetchRequest = event.request.clone(); 

      return fetch(fetchRequest).then(
       function(response) { 

        if(!response || response.status !== 200 || response.type !== 'basic') { 
         if(debugMode) { 
          console.log("fetch 2"); 
         } 
         return response; 
        } 

        var responseToCache = response.clone(); 

        caches.open(CACHE_NAME) 
         .then(function(cache) { 
          cache.put(event.request, responseToCache); 
         }); 
        if(debugMode) { 
         console.log("fetch 3"); 
        } 

        return response; 
       } 
      ); 
     }) 
); 
}); 

Answer 1

あなたのSW内のコードは次のように動作します。インストールには

1. 、活性化にキャッシュ
2. にURLのリスト内のすべての項目を追加し、キャッシュのみのためのアイテムを持っていることを確認してくださいキャッシュ名
3. フェッチ・イベントでは、最初に要求されたリソースがキャッシュ内にあるかどうかをチェックし、見つかった場合はそれを戻します。それはに要求されたすべてのものを追加している - 要求されたリソースがキャッシュになかった場合には第二、ネットワークからそれを要求し、は、＃3の最後の部分は、あなたのSWのコードに問題が発生し、キャッシュに

をそれを置きますキャッシュは将来、キャッシュから利用可能になります。

あなたがこのの最後の出現を探している場合は、あなたのコードに問題を見ることができます：

何かがキャッシュから見つかりませんでしたし、ネットワークから要求されたときにあなたのコードの一部です

   caches.open(CACHE_NAME) 

。コードはそれをキャッシュに入れます。これはあなたが望むものではありません。