サービスワーカー私たちはキャッシュの問題に直面しています

Question

私はサービスワーカーにとってより幸せです。静的キャッシュと動的キャッシュを実装しようとしています。

スタティックキャッシュリクエストに1つのファイルを追加すると、すべてのファイルを自分のものとみなしています。現在、オフラインモードから開始したときに、サービスワーカーからすべてのファイルが実行されています。誰か助けてください。

これは私がindex.htmlにあるコードです。 静的キャッシュで

 self.addEventListener('install',function(event) 
     { 
     console.log('[service worker]Installing service 
     worker....',event); 
     event.waitUntil(caches.open('static') 
     .then(function(cache) 
     { 
      console.log('[Service Worker] Precaching App Shell'); 
      cache.addAll([ 
         '/', 
         '/signin.html', 
         ]); 
    }) 
) 
}); 

Answer 1

要求（ページ）のいくつかは、それは一般的にサービス労働者のinstallイベントで行われ（ブラウザのローカルストレージに保存された）キャッシュされます。一方、ダイナミックキャッシングページ&は、要求（フェッチ）するたびにファイルがキャッシュされるため、サービスワーカーのfetchイベントを使用します。

だから、あなたのinstallイベントであなたがcache.addAllサービスワーカーに'/'を追加するときは、'/'すなわち、ルートディレクトリを表示するために必要なすべてのファイルとリソースを追加します。あなたがかもしれないあなたのローカルストレージを混雑オーバー避けるために：

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

    event.respondWith(
     caches.match(event.request)  // if data has been cached already 
     .then(function (response) { 
      if (response) { 
      return response; 
      } else {    // else fetch from internet & cache in DYNAMIC cache 
      return fetch(event.request) 
       .then(function (res) { 
       return caches.open(CACHE_DYNAMIC_NAME) 
        .then(function (cache) { 
        cache.put(event.request.url, res.clone()); 
        return res; 
        }) 
       }) 
       .catch(function (err) {   //fallback mechanism 
       return caches.open(CACHE_STATIC_NAME) 
        .then(function (cache) { 
        if (event.request.headers.get('accept').includes('text/html')) { 
         return cache.match('/offline.html'); 
        } 
        }); 
       }); 
      } 
     }) 
    ); 
});     

注：これらのキャッシュされたファイルを利用するために、あなたはこのような何かを実装する必要がありますダイナミックキャッシュを実装するために今すぐ

、ファイルを実際にストレージに保存する前に、いくつかの戦略を実装する必要があります。
詳細については、thisをご覧ください。