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

时间:2016-12-15 20:59:16

标签: javascript polymer service-worker sw-precache

我目前正在使用Polymer +服务工作者实施PWA。

通常,服务人员工作正常。如果我运行我的应用程序,一切都很好。我可以看到服务工作者缓存中填充了图像,html文件,字体等等。这一切都很好。即使是离线,带有图像等的页面也会正确加载。

问题在于动态数据的发挥。

我得到以下内容: enter image description here

只有在离线模式下,服务工作者才会生成真正无法说明且无法调试的错误:"获取脚本时出现未知错误"

并且仅在离线模式下执行控制台中显示的错误。 我想要实现的是,当然,没有错误;并且在lighthouse我希望" 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-预缓存-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'
        }
      }
    }
  ]
};

2 个答案:

答案 0 :(得分:3)

这些错误表示您当前处于脱机状态且无法从服务器获取资源。从技术上讲,根据我的理解,你不应该担心错误。当你在线时,你不会看到这些错误。

只要您在离线时能够提供静态资源资产。您和您的Polymer Web应用程序很不错!

答案 1 :(得分:1)

这些错误显示您,然后并非所有资源都被缓存。根据你的情况3资源没有缓存。因此,修复它非常容易,只需将此资源添加到缓存中即可。