0

我在 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'
}]

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

4

3 回答 3

0

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

将您的 sw webpack 配置更改为

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

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

然后查看您的缓存存储。您将看到像 $$$toolbox-cache$$$ https://your-domain.com这样的新缓存项。检查它，你可以看到你的索引缓存在那里。

于 2018-02-11T06:01:09.613 回答
0

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

排除 html 文件按预期工作：

'/**/*.{css,png,jpg,gif,svg}'
于 2017-03-30T23:17:26.147 回答
0

将网址格式更改为

urlPattern: "'/'"

这是一个完全匹配的模式。您的索引将与此匹配，仅此而已。

于 2017-04-06T18:13:22.490 回答