Polymer 3 SPA 中的工作箱，获得 "process is not defined"

Question

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

我使用 5.0.0-beta 版本能够使用 update()-功能，但是这个问题在 v4.3.1 上也有效。在创建服务工作者和运行我的 SPA 后，我在 logger.js.

中得到 "process is not defined"

我已经尝试包含不同版本的 workbox 构建文件，如果我包含 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',
    }
  ]

我的目标是了解为什么这会失败，因为我意识到我可能在我的配置中做错了什么。所以，任何建议表示赞赏！

Answer 1

您应该能够为此目的使用 workbox-window.prod.mjs 或 workbox-window.dev.mjs 捆绑包。它们作为 ES 模块提供，删除了 process.env.NODE_ENV 以及一些其他优化。

您可以从 CDN URL 引用它们，或者在本地提供它们——如果您从 npm 安装了 workbox-window，它们就在 node_modules/workbox-window/build/ 下。

这是一个例子：

<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>

Polymer 3 SPA 中的工作箱，获得 "process is not defined"

Workbox in Polymer 3 SPA, getting "process is not defined"

workbox

workbox-window