web-dev-qa-db-ja.com

Service Workerがリソースの読み込みに失敗しました：net :: ERR_INTERNET_DISCONNECTED

現在、Polymer +サービスワーカーを使用してPWAを実装しています。

一般的に、サービスワーカーは正常に動作します。アプリケーションを実行すれば、すべて問題ありません。 Service Workerのキャッシュが画像、HTMLファイル、フォントなどで埋められているのがわかります。これはすべて良いです。オフラインでも、画像などのページが正しく読み込まれます。

問題は、動的データがいつ登場するかです。

私は次のようになります： enter image description here

オフラインモードでのみ、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.jsonPolymer.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'
        }
      }
    }
  ]
};
javascriptpolymerservice-workersw-precache
7
Joey Roosing

これらは、現在オフラインであり、サーバーからリソースをフェッチできないことを示すエラーです。私の理解に基づいて心配する必要があるのは、技術的にはエラーではありません。オンラインの場合、これらのエラーは表示されません。

オフラインになったときに静的リソースアセットを提供できる限り。あなたとあなたのPolymer Webアプリは準備ができています！

4
motss

これらのエラーは、すべてのリソースがキャッシュされたわけではないことを示しています。あなたの状況によると、3つのリソースはキャッシュされませんでした。したがって、修正は非常に簡単です。このリソースをキャッシュに追加するだけです。

1
Razzwan