服务工作者无法加载资源：net::ERR_INTERNET_DISCONNECTED

Question

我目前正在使用 Polymer + service worker 实现 PWA。

一般来说，service worker 工作正常。如果我运行我的应用程序一切都很好。我可以看到服务工作者缓存中填充了图像、html 文件、字体等等。这一切都很好。即使离线，包含图像等的页面也能正确加载。

问题在于动态数据何时发挥作用。

我得到以下信息：

只有在离线模式下，service worker 才会产生不多且不可调试的错误："An unknown error occurred while fetching the script"

并且只有在离线模式下才会在控制台显示错误。当然，我想要实现的是没有错误；在 lighthouse 中，我希望 "URL responds with a 200 when offline" 为 green/checked。

我的文件夹结构如下：

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

Answer 1

这些错误表明您当前处于离线状态，无法从服务器获取资源。根据我的理解，这在技术上不是您应该担心的错误。您在线时不会看到这些错误。

只要您能够在离线时提供静态资源资产。您和您的 Polymer 网络应用程序一切顺利！

Answer 2

这些错误告诉你，并不是所有的资源都被缓存了。根据您的情况，未缓存 3 个资源。所以很容易修复它，只需将此资源添加到缓存即可。

服务工作者无法加载资源：net::ERR_INTERNET_DISCONNECTED

Service worker Failed to load resource: net::ERR_INTERNET_DISCONNECTED

javascript

polymer

service-worker

sw-precache