サービスワーカーが更新されない

Question

サービスワーカーが私のWebサイトにインストールされていますが、キャッシュされたファイルへの更新をプッシュする場合を除いて、すべて正常に動作します。彼らは永遠にcatched滞在し、私は `クロムから労働者を解除しない限り、私はキャッシュを無効にすることができないように見える：#VERSIONキャッシュ名に追加されたバージョンです// serviceworker-内部/

const STATIC_CACHE_NAME = 'static-cache-v1'; 
const APP_CACHE_NAME = 'app-cache-#VERSION'; 

const CACHE_APP = [ 
    '/', 
    '/app/app.js' 
] 
const CACHE_STATIC = [ 
    'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700', 
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css' 
] 

self.addEventListener('install',function(e){ 
    e.waitUntil(
     Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME)]).then(function(storage){ 
      var static_cache = storage[0]; 
      var app_cache = storage[1]; 
      return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); 
     }) 
    ); 
}); 

self.addEventListener('activate', function(e) { 
    e.waitUntil(
     caches.keys().then(function(cacheNames) { 
      return Promise.all(
       cacheNames.map(function(cacheName) { 
        if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { 
         console.log('deleting',cacheName); 
         return caches.delete(cacheName); 
        } 
       }) 
      ); 
     }) 
    ); 
}); 

self.addEventListener('fetch',function(e){ 
    const url = new URL(e.request.url); 
    if (url.hostname === 'static.mysite.co' || url.hostname === 'cdnjs.cloudflare.com' || url.hostname === 'fonts.googleapis.com'){ 
     e.respondWith(
      caches.match(e.request).then(function(response){ 
       if (response) { 
        return response; 
       } 
       var fetchRequest = e.request.clone(); 

       return fetch(fetchRequest).then(function(response) { 
        if (!response || response.status !== 200 || response.type !== 'basic') { 
         return response; 
        } 
        var responseToCache = response.clone(); 
        caches.open(STATIC_CACHE_NAME).then(function(cache) { 
         cache.put(e.request, responseToCache); 
        }); 
        return response; 
       }); 
      }) 
     ); 
    } else if (CACHE_APP.indexOf(url.pathname) !== -1){ 
     e.respondWith(caches.match(e.request)); 
    } 
}); 

コンパイル時に。 STATIC_CACHE_NAMEは決して変更されません。ファイルは永久に静的であると考えられます。

また、私は削除機能（ログを記録する部分）をチェックしており、すでに削除されている（おそらくは）削除されたキャッシュのログを記録しています。私がcaches.keys().then(function(k){console.log(k)})を実行すると、削除されているはずの古いキャッシュがたくさんあります。

Answer 1

udacityで動画をグーグルで視聴した後、新しいサービスワーカーがコントロールできるようになると、制御しているページが閉じられて再び開くまで、ワーカーの意図した動作が維持されることがわかりました。

解決策は、https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaitingに基づいて制御を強制することでした。新しい従業員が変更を反映するために2回のリロードが必要な場合でも、次の問題が解決されました。作業者は以前のものに置き換えられます）。

self.addEventListener('install',function(e){ 
    e.waitUntil(
     Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME),self.skipWaiting()]).then(function(storage){ 
      var static_cache = storage[0]; 
      var app_cache = storage[1]; 
      return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]); 
     }) 
    ); 
}); 

self.addEventListener('activate', function(e) { 
    e.waitUntil(
     Promise.all([ 
      self.clients.claim(), 
      caches.keys().then(function(cacheNames) { 
       return Promise.all(
        cacheNames.map(function(cacheName) { 
         if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) { 
          console.log('deleting',cacheName); 
          return caches.delete(cacheName); 
         } 
        }) 
       ); 
      }) 
     ]) 
    ); 
});