Service worker Failed to load resource: net::ERR_INTERNET_DISCONNECTED

Question

Im currently implementing a PWA using Polymer + service workers.

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.

The issue is when dynamic data comes in to play.

I get the following:

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"

and only in offline mode do the errors in the console show. What I want to achieve is, ofcourse, no errors; and in lighthouse I want the "URL responds with a 200 when offline" to be green/checked.

My folder structure is as followed:

- images
- fonts
- data
-- portfolio
--- portfolio.json
--- portfolio.md
- src
- blog-app.html
- sw-precache-config.json

Following code is my 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'
        }
      }
    }
  ]
};

Answer 1

These are errors to indicate that you're currently offline and unable to fetch resources from the server. It's technically not errors you should be worried about based on my understanding. You will not see those errors when you're online.

As long as you're able to serve static resource assets when you go offline. You and your Polymer web app are good to go!

Answer 2

These error shows you, then not all resources was cached. According to you situation 3 resources were not cached. So it is very easy to fix it, just add this resources to cache.