我在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'
}]
但这不起作用,索引始终是从服务工作者那里获取而不是从网络获取,我该如何实现?
答案 0 :(得分:0)
我的问题是我包含了预先缓存的实际页面内容:'/**/*.{html,css,png,jpg,gif,svg}'
。
排除html文件按预期工作:
'/**/*.{css,png,jpg,gif,svg}'
答案 1 :(得分:0)
将网址格式更改为
file2
这是完全匹配的模式。您的索引将与此匹配,而不是其他任何内容。
答案 2 :(得分: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这样的新缓存项。检查一下,你可以看到你的索引缓存在那里。