提前谢谢！

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年6月以来发布的浏览器版本，该版本确实支持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誓言要解决此问题。就目前而言，我看不到任何完美的解决方案。

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

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

提前谢谢！

2 个答案:

轻松修复

替代项

更多信息