サービスワーカーに定義されたフォルダ/パスのすべてのファイルをキャッシュする方法はありますか？サービスワーカーで、私はそれらのサービスワーカーの取得時にキャッシュされているリソースの配列を定義することができます

Question

は、下記の開始：

いるので代わりに、すべてのファイルを書き込むので、私は、サービスワーカーでパス/ディレクトリを定義することができますどのように

self.addEventListener('install', event => { 
    event.waitUntil(caches.open('static-${version}') 
     .then(cache => cache.addAll([ 
      '/styles.css', 
      '/script.js' 
     ])) 
    ); 
}); 

名前、サービスワーカーは指定されたパス/ディレクトリからすべてのファイルを選択し、すべてをキャッシュに追加しますか？

Answer 1

これはできません。 SW（またはその点についてはブラウザ）は、Webサーバー上の特定のパスにあるファイルについては何の手がかりも持っていません。キャッシュするファイルの名前を指定する必要があります。同じ問題の詳細here.

ファイルのリストを自動的に生成するビルドツールを使用していますか？ない場合は、あなたが最も可能性が高い

EDIT :)必要があります：SWツーリングのための最も使用されるライブラリの

一つを仕事箱です。彼らは資産のruntime-cachingとprecachingの両方を提供します。彼らはまた、例えばビルド用ツールプラグインを持っています。 WebpackとGulp。

ランタイムキャッシュは、キャッシュにアセットが存在する場合はそのアセットをサーバーから更新することで動作します。基本的に、新しいアセットはすべてネットワークから最初に要求され、その後の要求でキャッシュから戻されます。

EDIT2：

はい、あなたはある程度NPMずに仕事箱を使用することができます。キャッシュされるファイルのファイル名を収集するには、NPMスクリプトなどを実行する必要がありますが、手作業で作成したSWファイルにWorkbox.jsスクリプトをインポートするだけで、ランタイムキャッシュを実装することはできます。ちょうどあなたのSWの最上部には

importScript("https://unpkg.com/workbox-sw@2.1.0/build/importScripts/workbox-sw.prod.v2.1.0.js") 

を言って

は仕事箱の（今のところ）の最新バージョンをインポートします。それはruntime-caching example here tooで起こることがわかります。

上記の.jsファイルをダウンロードして、独自のサーバーに置き、代わりに相対パスからインポートすることもできます。

Answer 2

Workbox swを使用したランタイムキャッシング。

サービスworker.js：

importScripts('https://unpkg.com/workbox-sw@0.0.2/build/importScripts/workbox-sw.dev.v0.0.2.js'); 
importScripts('https://unpkg.com/workbox-runtime-caching@1.3.0/build/importScripts/workbox-runtime-caching.prod.v1.3.0.js'); 
importScripts('https://unpkg.com/workbox-routing@1.3.0/build/importScripts/workbox-routing.prod.v1.3.0.js'); 

const assetRoute = new workbox.routing.RegExpRoute({ 
    regExp: new RegExp('^http://localhost:8081/jobs/static/*'), 
    handler: new workbox.runtimeCaching.CacheFirst() 
}); 

const router = new workbox.routing.Router(); 
//router.addFetchListener(); 
router.registerRoutes({routes: [assetRoute]}); 
router.setDefaultHandler({ 
    handler: new workbox.runtimeCaching.CacheFirst() 
}); 

スクリプト私のhtmlファイル内Servcieワーカーをロードします。

<script> 
    if ('serviceWorker' in navigator) { 
     window.addEventListener('load', function() { 
      navigator.serviceWorker.register('http://localhost:8081/jobs/static/service-worker.js?v=4').then(function(registration) { 
      // Registration was successful 
      console.log('ServiceWorker registration successful with scope: ', registration.scope); 
     }, function(err) { 
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err); 
      }); 
     }); 
    } 
</script>