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

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');
});

被 babelized 并通过 parcel 放入 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。

Answer 2

我对 Parcel 很陌生，我也面临同样的问题。

在网上花了几个小时搜索后，我想这可能与这个问题有关parcel-bundler/parcel #301: ? PWA support

尽管有 2 个plugins 和 1 个discussion 发誓要解决这个问题。 目前，我还没有看到任何完美的解决方案。

如果您碰巧发现了一些新发现，请告诉我们。