为什么我的服务人员会阻止渲染？

Question

我正在构建一个渐进式Web应用程序。当我以隐身方式打开我的网站时，在控制台上打印了SW正在加载的资产。然后我意识到加载时，页面是白色的空白。我假设在SW填充资产时阻止渲染。

试图确保，我用慢速3G连接再次做到了。结果是一样的。

以下是截图：

这怎么可能发生？

我认为SW必须加载到另一个线程而不是阻止渲染。 （cmiiw）

编辑：

我在此处注册了SW，并在html中注册了内联。

if (navigator.serviceWorker) {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then(function(registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope)
      })
      .catch(function(ex) {
        console.warn(ex)
        console.warn('(This warning can be safely ignored outside of the production build.)')
      })
  }

我使用service-worker.js构建了sw-precache-webpack-plugin。这是我的配置。

new SWPrecacheWebpackPlugin({
      minify: true,
      cacheId: 'sw-cache',
      filename: 'service-worker.js',
      navigateFallbackWhitelist: [/^(?!\/(login|logout|appauth|status|filtron|service-worker|.*\.pl|.*\.html)).*/],
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/connect\.facebook\.net\//,
          handler: 'cacheFirst'
        },
      ],
      staticFileGlobsIgnorePatterns: [/\.map$/, /assets\.json$/, /service-worker\.js$/, /manifest\.json$/],
    }),