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

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

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

我没有看到其他人评论有这个问题。谁能评论阻止 sw-precache 尊重我的 runtimeCaching 选项的问题可能是什么？

4

2 回答 2

0

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

  • 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-precache库 sw-toolbox的更多信息，也可以访问离线食谱以获取有关缓存策略的更多信息。

于 2016-12-13T11:34:00.630 回答
0

遗憾grunt-sw-precache的是，它不依赖于最新的 sw-precache，这会导致runtimeCachingsw-precache 如何正确处理诸如 requestsRedirects 之类的选项和其他改进丢失。

我在此处复制了 repo 和必要的更改。我无意将它发布到 npm，但作为一个临时解决方案（所以请参阅我的 github repo 在你的 package.json 中！）

于 2017-04-24T15:57:44.547 回答