我目前正在使用 Polymer + service workers 实现 PWA。
一般来说，服务人员工作正常。如果我运行我的应用程序，一切都很好。我可以看到 Service Worker 缓存中填充了图像、html 文件、字体等等。这一切都很好。即使离线，带有图像等的页面也会正确加载。
问题是动态数据何时发挥作用。
我得到以下信息：
只有在离线模式下，Service Worker 才会生成真正不多说且不可调试的错误：“获取脚本时发生未知错误”
并且只有在离线模式下才会显示控制台中的错误。我想要实现的当然是没有错误；在灯塔中，我希望“离线时 URL 以 200 响应”为绿色/选中。
我的文件夹结构如下：
- images
- fonts
- data
-- portfolio
--- portfolio.json
--- portfolio.md
- src
- blog-app.html
- sw-precache-config.json
以下代码是我的 polymer.json + sw-precache-config.json Polymer.json：
{
"entrypoint": "index.html",
"shell": "src/jrblog-app.html",
"fragments": [
"src/portfolio-page.html",
"src/contact-page.html",
"src/404-page.html"
],
"sourceGlobs": [
"src/**/**/*",
"data/**/*",
"images/**/*",
"style/*",
"fonts/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
sw-precache-config.json：
module.exports = {
cacheId: 'jrblog-app-v1',
staticFileGlobs: [
'/index.html',
'/manifest.json',
'/bower_components/webcomponentsjs/webcomponents-lite.min.js',
'/images/*.*',
'/fonts/**/*.*',
'/style/*.css'
],
navigateFallback: '/index.html',
navigateFallbackWhitelist: [/^(?!.*\.html$|\/data\/).*/],
runtimeCaching: [
{
urlPattern: /\/data\/*\/.*/,
handler: 'fastest',
options: {
cache: {
maxEntries: 100,
name: 'data-cache'
}
}
}
]
};