使用配置了 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
          }
        }
      }]
  }
}

});

在尝试使用 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 选项之外的所有配置选项都将应用于生成的 service-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 如何正确处理 requestsRedirects 等内容的其他改进丢失。

我克隆了 repo 和必要的更改 here。我无意将它发布到 npm，但作为一个临时解决方案（请参阅我的 github 存储库在你的 package.json 中！）

Answer 2

请检查并确保您已完成Grunt Installation。

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

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

• 通过将以下内容添加到您的Gruntfile 来启用grunt-sw-precache：

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

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

如本文所述tutorial，

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

您可以访问此GitHub post，了解有关如何以及为什么一起使用sw-precache 和sw-toolbox 库的更多信息，还可以访问The offline cookbook，了解有关缓存策略的更多信息。