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

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

更多信息

如果您想查看每个浏览器支持哪些功能，您可以在此处查看。

如果您想检查哪些选项对browserslint检查有效，请点击此处。

还有更多关于您的具体问题的讨论可点击此处。