runtimeCachingで設定されたsw-precacheを使用していないsw-toolbox

Question

sw-precacheのドキュメントhttps://github.com/GoogleChrome/sw-precache#runtime-cachingによると、sw-precacheのランタイムキャッシュ設定では動的コンテンツのランタイムキャッシュをsw-toolboxに含める必要があります。私はsw-precacheのCLIとgrunt-sw-precacheでこれを使用しようとしました。 Gruntの設定は以下の通りです。

grunt.initConfig({ 
'sw-precache': { 
    build: { 
    baseDir: './public', 
    workerFileName: 'service-worker.js', 
    appendTimestamp: true, 
    cacheId: 'cnbc-polymer-cache-20', 
    clientsClaim: true, 
    directoryIndex: 'index.html', 
    navigateFallback: 'index.html', 
    skipWaiting: true, 
    maximumFileSizeToCacheInBytes: (1024000 * 20), 
    staticFileGlobs: [ 
     '/src/**/*', 
     '/index.html', 
     '/manifest.json', 
     '/bower_components/**/*', 
     '/images/**/*.*', 
     '/favicon.ico' 
    ], 
    verbose: true, 
    runtimeCaching: [{ 
     urlPattern: /franchise/, 
     handler: 'cacheFirst', 
     options: { 
      debug: true, 
      cache: { 
      maxEntries: 10, 
      name: 'franchise-cache', 
      maxAgeSeconds: 180 
      } 
     } 
     }, { 
     urlPattern: /story/, 
     handler: 'cacheFirst', 
     options: { 
      debug: true, 
      cache: { 
      maxEntries: 10, 
      name: 'story-cache', 
      maxAgeSeconds: 180 
      } 
     } 
     }] 
    } 
} 

}）;

とするとき、私は、次のSW-プリキャッシュ-config.jsの使用CLIをしよう：

module.exports = { 
    baseDir: './public', 
    workerFileName: 'service-worker.js', 
    appendTimestamp: true, 
    cacheId: 'cnbc-polymer-cache-20', 
    clientsClaim: true, 
    directoryIndex: 'index.html', 
    navigateFallback: 'index.html', 
    skipWaiting: true, 
    maximumFileSizeToCacheInBytes: (1024000 * 20), 
    staticFileGlobs: [ 
     '/src/**/*', 
     '/index.html', 
     '/manifest.json', 
     '/bower_components/**/*', 
     '/images/**/*.*', 
     '/favicon.ico' 
    ], 
    verbose: true, 
    runtimeCaching: [{ 
     urlPattern: /franchise/, 
     handler: 'cacheFirst', 
     options: { 
      debug: true, 
      cache: { 
       maxEntries: 10, 
       name: 'franchise-cache', 
       maxAgeSeconds: 180 
      } 
     } 
     }, { 
      urlPattern: /story/, 
      handler: 'cacheFirst', 
      options: { 
       debug: true, 
       cache: { 
        maxEntries: 10, 
        name: 'story-cache', 
        maxAgeSeconds: 180 
       } 
      } 
     }] 
}; 

runtimeCachingオプション以外のすべての設定オプションは、生成されたサービス・worker.jsファイルに適用されています。

私のpackage.jsonは、sw-precacheの "^ 4.2.3"とsw-toolboxの "^ 3.4.0"を使用するように設定されています。

私はこの問題を抱えているとコメントした人は他にいません。誰でもsw-precacheが私のruntimeCachingオプションを尊重することを妨げる問題が何であるかについてコメントできますか？

Answer 1

Grunt Installationを確認してください。

• 作男-SW-プリキャッシュは、次のコマンドを使用してインストールすることができます。

  $ npm install grunt-sw-precache --save-dev

• は、あなたのGruntfileに以下を追加することでgrunt-sw-precacheを有効に：

  grunt.loadNpmTasks('grunt-sw-precache');

次に、handler: 'cacheFirst'の代わりにhandler: 'networkFirst'を試してみるとよいでしょう。このtutorial、

で述べたように

は、ネットワークからフェッチすることによって、要求を処理するようにしてください。成功した場合は、レスポンスをキャッシュに格納します。それ以外の場合は、キャッシュから要求を実行してください。これは、基本的なリードスルーキャッシュに使用する戦略です。

あなたは、キャッシング戦略の詳細については、一緒にしてもThe offline cookbooksw-precacheとsw-toolboxライブラリを使用したい方法と理由の詳細については、このGitHub postを訪問するかもしれません。

Answer 2

悲しいことにgrunt-sw-precacheは、runtimeCachingオプションやその他の改善点を引き起こす最新のsw-precacheに依存しません.sw-precacheがrequestsRedirectsのようなものを正しく処理しないようにします。

私はレポのクローンを作成し、必要な変更をhereとしました。これをnpmに公開するつもりはありませんが、一時的な解決策です（パッケージ内の私のgithub repoを参照してください！）