[英]Using sw-precache configured with runtimeCaching is not loading sw-toolbox
According to the sw-precache documentation https://github.com/GoogleChrome/sw-precache#runtime-caching including configuration for runtime caching for sw-precache should itself take care of including sw-toolbox for runtime caching of dynamic content. 根据sw-precache文档https://github.com/GoogleChrome/sw-precache#runtime-caching包括sw-precache的运行时缓存配置本身应该包括用于动态内容的运行时缓存的sw-toolbox。 I have tried using this with sw-precache's CLI as well as grunt-sw-precache. 我尝试过使用sw-precache的CLI以及grunt-sw-precache。 My configuration for Grunt is as follow: 我对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
}
}
}]
}
}
}); });
And when trying with the CLI I used the following sw-precache-config.js: 在尝试使用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
}
}
}]
};
All configuration options other than the runtimeCaching options are being applied to the generated service-worker.js file. 除runtimeBaching选项之外的所有配置选项都将应用于生成的service-worker.js文件。
My package.json is configured to use "^4.2.3", of sw-precache, and "^3.4.0" of sw-toolbox. 我的package.json配置为使用sw-precache的“^ 4.2.3”和sw-toolbox的“^ 3.4.0”。
I have not seen anyone else commenting of having this problem. 我还没有看到有人评论过这个问题。 Can anyone comment on what might be the issue preventing sw-precache from respecting my runtimeCaching options? 任何人都可以评论阻止sw-precache尊重我的runtimeCaching选项的问题吗?
Please check and make sure that you have done Grunt Installation . 请检查并确保您已完成Grunt安装 。
grunt-sw-precache can be installed using the following command: 可以使用以下命令安装grunt-sw-precache:
$ npm install grunt-sw-precache --save-dev
enabled
grunt-sw-precache
by adding the following to yourGruntfile
: 通过在Gruntfile
添加以下内容来启用grunt-sw-precache
:
grunt.loadNpmTasks('grunt-sw-precache');
Then, you might want to try using handler: 'networkFirst'
instead of handler: 'cacheFirst'
. 然后,你可能想使用尝试handler: 'networkFirst'
,而不是handler: 'cacheFirst'
。
As mentioned in this tutorial , 如本教程中所述 ,
Try to handle the request by fetching from the network. 尝试通过从网络获取来处理请求。 If it succeeds, store the response in the cache. 如果成功,则将响应存储在缓存中。 Otherwise, try to fulfill the request from the cache. 否则,尝试从缓存中完成请求。 This is the strategy to use for basic read-through caching. 这是用于基本读取缓存的策略。
You may visit this GitHub post for more information on how and why you'd use sw-precache
and sw-toolbox
libraries together and also The offline cookbook for more information on caching strategies. 您可以访问此GitHub帖子 ,了解有关如何以及为何将sw-precache
和sw-toolbox
库一起使用的更多信息,以及有关缓存策略的更多信息的脱机菜谱 。
sadly grunt-sw-precache
does not depend on the newest sw-precache which causes the runtimeCaching
option and other improvements how sw-precache handles things like requestsRedirects correctly to be missing. 遗憾的是, grunt-sw-precache
不依赖于导致runtimeCaching
选项的最新sw-precache以及其他改进sw-precache如何正确处理runtimeCaching
正确丢失等问题。
I made a clone of the repo and the necessary changes here . 我在这里修复了回购和必要的修改。 I have no intention on publishing this to npm, but as a temporary solution (so refer to my github repo in your package.json!) 我无意将此发布到npm,但作为临时解决方案(所以请参阅我的package.json中的github repo!)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.