管理サービスワーカーキャッシュ

Question

私は現在、一部では、このようなルックスで、もちろんのでは

self.addEventListener('install', function(event) { 
    event.waitUntil(
     caches.open('v1').then(function(cache) { 
      return cache.addAll([ 
       '/react-redux/node_modules/react/dist/react-with-addons.js', 
       '/react-redux/node_modules/react-dom/dist/react-dom.js', 
       '/react-redux/a.js' 
      ]); 
     }) 
    ); 
}); 

を実験してるサービスワーカーのコードキャッシュから返す、または項目場合は、ネットワーク要求を実行し、標準のフェッチイベントリスナーそこにいない。

しかし、どのような場合は、上記の例から、a.js、とだけa.jsがされ、更新-どのように私は、サービス労働者がそのファイルを更新するために得るが、のみファイルです。ユーザーが次回自分のページを参照するときに、は、サービス休暇中のファイルの最新バージョンをにプルしないようにするにはどうすればよいですか？

例えば、私はそれらのファイルのURLへのキャッシュバスターを追加することです想像できる最高の

'/react-redux/node_modules/react/dist/react-with-addons.js?hash=1MWRF3...'

その後、私は同じ、現在でこれらのファイルを要求するために使用しているものは何でもモジュールローダー更新ハッシュ/キャッシュバスターを作成し、次にSWインストールイベントで現在のキャッシュキーを反復処理し、古くなったものを削除し、欠落しているものを追加します。

はとなります。ファイルが更新されたときに送信されたネットワーク要求は、現在失効しているサービスワーカーのものと一致しないため、同じネットワークフォールバックが発生します。サービスワーカーのインストールイベントのセレクティブキャッシュの挿入は、すでに存在しているキャッシュに物事を追加しようとしません。

もちろん、サービスワーカーコードはこれらのハッシュ値が（ビルドプロセスから自動的に）変更されるため変更されるため、ファイルが変更されたときにSWを再インストールするようにすることもできます。

しかし、もっと簡単な方法があるとは思えません。ある？

Answer 1

キャッシュされたアセットが効率的かつ確実に更新されることを理想的に理解することが重要です。

独自の手法を使用することもできますが、各ファイルのフィンガープリンティングプロセスを自動化し、キャッシュされたアセットを管理するサービスワーカーファイルを生成する既存のツールがあります。私はそのうちの1つ、sw-precacheを開発しました。 offline-pluginは、同様の理由をカバーする別の代替手段です。