1

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
          }
        }
      }]
  }
}

});

そして、CLI を試すときは、次の sw-precache-config.js を使用しました。

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
              }
          }
      }]
};

生成された service-worker.js ファイルには、runtimeCaching オプション以外のすべての構成オプションが適用されています。

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

この問題を抱えているとコメントしている人を見たことがありません。sw-precache が私の runtimeCaching オプションを無視するのを妨げている問題について、誰かコメントできますか?

4

2 に答える 2

0

Grunt Installationが完了していることを確認してください。

  • grunt-sw-precache は、次のコマンドを使用してインストールできます。

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

  • grunt-sw-precacheに以下を追加することで有効になりますGruntfile。

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

handler: 'networkFirst'次に、代わりに を使用してみることをお勧めします handler: 'cacheFirst'。

このチュートリアルで述べたように、

ネットワークからフェッチしてリクエストを処理してみてください。成功した場合は、応答をキャッシュに保存します。それ以外の場合は、キャッシュから要求を満たすようにしてください。これは、基本的なリードスルー キャッシュに使用する戦略です。

と ライブラリを一緒に使用する方法と理由の詳細については、このGitHub の投稿にアクセスしてください。キャッシュ戦略の詳細については、オフライン クックブックも参照してください。sw-precachesw-toolbox

于 2016-12-13T11:34:00.630 に答える
0

悲しいgrunt-sw-precacheことに、最新の sw-precache に依存していないため、sw runtimeCaching-precache が requestsRedirects などを正しく処理する方法やその他の改善が欠落しています。

レポのクローンを作成し、ここで必要な変更を行いました。これを npm に公開するつもりはありませんが、一時的な解決策として (package.json の私の github リポジトリを参照してください!)

于 2017-04-24T15:57:44.547 に答える