Service worker Failed to load resource: net::ERR_INTERNET_DISCONNECTED
<p>Im currently implementing a PWA using Polymer + service workers.</p>

<p>Generally, the service worker works fine. If I run my application it's all fine. I can see the service worker cache being filled in with images, html files, fonts and what not. This is all good. Even offline, the page with images etc get loaded correctly.</p>

<p>The issue is when dynamic data comes in to play.</p>

<p>I get the following:
<a href="https://i.stack.imgur.com/pYMOh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pYMOh.png" alt="enter image description here"></a></p>

<p>Only in offline mode does the service worker generate errors that really don't say much and are not debuggable: "An unknown error occurred while fetching the script"</p>

<p>and only in offline mode do the errors in the console show.
What I want to achieve is, ofcourse, no errors; and in <a href="https://developers.google.com/web/tools/lighthouse/" rel="noreferrer">lighthouse</a> I want the "URL responds with a 200 when offline" to be green/checked.</p>

<p>My folder structure is as followed:</p>

<pre><code>- images
- fonts
- data
-- portfolio
--- portfolio.json
--- portfolio.md
- src
- blog-app.html
- sw-precache-config.json
</code></pre>

<p>Following code is my polymer.json  + sw-precache-config.json
Polymer.json:</p>

<pre><code>{
  "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"
  ]
}
</code></pre>

<p>sw-precache-config.json:</p>

<pre><code>    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'
        }
      }
    }
  ]
};
</code></pre>