如何使用sw-precache缓存除内容之外的所有内容

Question

我正在使用jekyll网站中的sw-precache添加脱机功能，配置如下：

gulp.task('generate-service-worker', function(cb) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = '_site';
  var packageJson = require('./package.json');

  swPrecache.write('./service-worker.js', {
    staticFileGlobs: [rootDir + '/**/*.{html,css,png,jpg,gif,svg}', rootDir + '/js/*'],
    stripPrefix: rootDir + '/',
    runtimeCaching: [{
      urlPattern: /\/$/,
      handler: 'networkOnly'
    }],
    handleFetch: argv.cacheAssets || false,
    maximumFileSizeToCacheInBytes: 10485760, // 10 mb
    cacheId: packageJson.name + '-v' + packageJson.version
  }, cb);
});

问题是，当我更改网站中的内容(例如，博客文章中的文本，或索引页面中的一些文本)时，在安装了新的serviceworker版本并刷新了浏览器之后，更改才会显示出来，这当然是cacheFirst的预期行为。

我想要的是首先向站点索引发出请求，这就是我在这里尝试的：

runtimeCaching: [{
  urlPattern: /\/$/,
  handler: 'networkFirst'
}]

但是这不起作用，索引总是从服务工作者而不是从网络中获取，我如何做到这一点？

Answer 1

我的问题是，我包含了precache：'/**/*.{html,css,png,jpg,gif,svg}'的实际页面内容。

除html文件外，这些文件按预期工作：

'/**/*.{css,png,jpg,gif,svg}'

Answer 2

将url模式更改为

urlPattern: "'/'"

这是一个精确的匹配模式。您的索引将与此匹配，而不匹配其他任何内容。

Answer 3

解决方案是，将您的index.html视为动态内容。

将sw webpack配置更改为

new SWPrecacheWebpackPlugin({
  cacheId: 'yourcacheid',
  filename: 'service-worker.js',
  staticFileGlobs: [
    'dist/**/*.{js,css}'
  ],
  minify: true,
  stripPrefix: 'dist/',
  runtimeCaching: [{
    urlPattern: /\/$/,
    handler: 'networkFirst'
  }]
})

从index.html中删除staticFileGlobs，并将根索引添加到运行时缓存中。

然后看看你的缓存存储。您将看到$$toolbox之类的东西-缓存$https://your-domain.com作为一个新的缓存项。检查它，您可以看到您的索引缓存在那里。