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

生成的service-worker.js文件将应用除runtimeCaching选项之外的所有配置选项。

我的package.json配置为使用sw-precache的“^ 4.2.3”和sw-toolbox的“^ 3.4.0”。

我还没有看到有人评论过这个问题。任何人都可以评论阻止sw-precache尊重我的runtimeCaching选项的问题吗？

Answer 1

请检查并确保您已完成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'。

如 ~~tutorial~~ 中所述，

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

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

Answer 2

遗憾的是grunt-sw-precache不依赖于最新的sw-precache导致runtimeCaching选项和其他改进sw-precache如何正确处理requestRedirects正确丢失的内容。

我复制了回购和必要的修改here。我无意将这个发布到npm，但作为一个临时解决方案（所以请在你的package.json中引用我的github repo！）

使用配置了runtimeCaching的sw-precache不会加载sw-toolbox

2 个答案: