babeljs - 如何在包裹中使用服务人员？

Question

我有一个来自我的 js/index.js 的服务人员:

import '../scss/app.scss';
// Detect if service workers enabled
if ('serviceWorker' in navigator) {
  try {
    navigator.serviceWorker.register('../sw.js');
    console.log('Service Worker Registered');
  } catch (error) {
    console.log('Service Worker Register Failed');
  }
}

和我的 sw.js 在我的根目录中:

const staticAssets = ['./', 'scss/app.scss', 'js/index.js'];
self.addEventListener('install', async (event) => {
  const cache = await caches.open('min-static');
  cache.addAll(staticAssets);
});
self.addEventListener('fetch', (event) => {
  console.log('fetch');
});

被打包并打包放入dist文件夹。当它建成后，我去 localhost ，我打开 Chrome 工具并进入应用程序选项卡。我进入缓存存储选项卡，然后:

这是怎么回事？为什么我的网站不像 The PWA Tutorial 那样被很好地缓存?
不应该是这样的:
?
当然，我正在通过 babel 运行所有东西，但为什么它不起作用？
提前致谢!

Answer 1

错误 regeneratorRuntime is not defined发生的原因是 Babel(由 Parcel 用于转译代码)正在为您的构建中的 ES6 生成器生成一个 polyfill。要禁用它(并解决您的问题)，您需要指定您不希望转换生成器。
轻松修复
解决这个问题的一种简单方法是将以下几行添加到您的 package.json 中:

"browserslist": [
  "since 2017-06"
],

这使得您的构建将仅尝试支持自 2017-06 以来发布的浏览器版本，这些版本支持 ES6 生成器，因此不需要该功能的 polyfill。
备择方案
您可能希望根据应用程序的目标受众尝试使用这些值，例如这也应该有效:

"browserslist": [
  "last 3 and_chr versions",
  "last 3 chrome versions",
  "last 3 opera versions",
  "last 3 ios_saf versions",
  "last 3 safari versions"
]

更多信息
如果您想查看每个浏览器支持哪些功能，您可以查看 here .
如果您想检查哪些选项对 browserslint 有效检查 here .
还有更多关于您的具体问题的讨论 here .