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

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

被babel化，打包放入dist文件夹。构建完成后，我转到 localhost，打开 chrome 工具并进入应用程序选项卡。我进入缓存存储选项卡并：这是怎么回事？为什么我的网站没有像 The PWA Tutorial 那样得到很好的缓存？它不应该看起来像这样：？诚然，我运行一切都通过 babel，但为什么它不起作用？

提前致谢！

Answer 1

我是 Parcel 的新手，我也面临着同样的问题。

网上查了几个小时，估计跟这个问题有关parcel-bundler/parcel #301: PWA support

不过，有 2 个 plugins and 1 discussion 发誓要解决这个问题。暂时没看到什么完美的解决办法。

如果您碰巧有什么新发现，请告诉我们。

Answer 2

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

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

How do I use service workers in parcel?

babeljs

service-worker

progressive-web-apps

parceljs

提前致谢！

轻松修复

备选方案

更多信息