使用使用RuntiMecaching配置的SW-PRECACHE不会加载SW-Toolbox

Question

根据sw-precache文档https://github.com/googlechrome/googlechrome/sw-precache#runtime-caching，包括用于SW-PRECACHE的运行时缓存的配置本身，应该照顾用于动态内容的运行时缓存的SW-Toolbox。我已经尝试使用SW-Precache的CLI以及Grunt-SW-Precache使用此功能。我对咕unt的配置如下：

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

除runtimecaching选项以外的所有配置选项都应用于生成的servication-worker.js文件。

我的package.json被配置为使用SW-PRECACHE的"^4.2.3"和SW-Toolbox的"^3.4.0"。

我没有看到其他人评论遇到这个问题。任何人都可以评论什么可能阻止SW-PRECACHE尊重我的RuntiMecaching选项的问题？

Answer 1

可悲的是， grunt-sw-precache不取决于最新的SW-PRECACHE，它会导致runtimeCaching选项以及SW-PRECACHE如何正确处理诸如请求的诸如请求之类的事物。

>

我做了一个仓库，这里有必要的更改。我无意将其发布给NPM，但作为临时解决方案（因此请参阅您的软件包中的GitHub repo.json！）

Answer 2

请检查并确保您已经完成了咕unt的安装。

• 可以使用以下命令安装grunt-sw-precache：

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

• 通过将以下内容添加到您的Gruntfile：

  来启用grunt-sw-precache

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

然后，您可能需要尝试使用handler: 'networkFirst'而不是 handler: 'cacheFirst'。

如下所述教程，

尝试通过从网络中获取来处理请求。如果成功，请将响应存储在缓存中。否则，请尝试满足缓存的请求。这是用于基本读取缓存的策略。

您可以访问此GitHub帖子，以获取有关如何以及为什么将sw-precache和sw-toolbox库一起使用的更多信息，以及脱机食谱以获取有关Caching策略的更多信息。