Polymer 3 SPA中的工作箱,显示“未定义过程”

时间:2019-10-09 12:54:18

标签: workbox workbox-window

Polymer 3 SPA试图从sw-precahe迁移到Workbox。我使用workbox-window模块将生命周期集成到应用程序中,以使用户可以获知新版本。

我使用5.0.0-beta版本可以使用update()功能,但是此问题在v4.3.1上同样有效。创建服务工作者并运行我的SPA之后,我在logger.js中得到“未定义进程”。

我曾尝试包括不同版本的工作箱构建文件,并且如果我包括可以使用的umd版本,但是我的SPA是为ES6模块构建的,因此我想使用这些导入。

"globDirectory": "./",
  "globPatterns": [
    "**/*.{js,css,json,svg,png,jpg,gif,html}",
    "manifest.json"
  ],
  "swDest": "service-worker.js",
  "globIgnores": ["node_modules/**/*", "build/**/*", "workbox-config.js"],
  "inlineWorkboxRuntime": "true",
  "maximumFileSizeToCacheInBytes": 10*1024*1024,
  "runtimeCaching":
  [
    {
      urlPattern: /\/node_modules\/@webcomponents\/webcomponentsjs\//,
      handler: 'StaleWhileRevalidate'
    },
    {
      urlPattern: /\/node_modules\/web-animations-js\//,
      handler: 'StaleWhileRevalidate',
    }
  ]

我的目标是了解为什么失败了,因为我意识到我的配置可能做错了。因此,任何建议表示赞赏!

1 个答案:

答案 0 :(得分:1)

您应该可以为此目的使用workbox-window.prod.mjsworkbox-window.dev.mjs捆绑包。它们以ES模块的形式发布,其中删除了process.env.NODE_ENV以及其他一些优化。

您可以从CDN URL引用它们,也可以在本地提供它们-如果已从node_modules/workbox-window/build/安装了workbox-window,它们就位于npm下。

这是一个例子:

<script type="module">
import {Workbox} from
  'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-window.prod.mjs';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/service-worker.js');

  // Use wb...
}
</script>