現在、Polymer + Service Worker を使用して PWA を実装しています。
通常、Service Worker は問題なく動作します。アプリケーションを実行すると、すべて問題ありません。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'
}
}
}
]
};