反应PWA：如何正确设置清单文件和注册服务工作者

Question

我是新来的反应，并学习通过开发一个小应用程序反应。该应用程序是使用创建反应的应用程序内自举和使用github上的网页部署。一切工作正常，但我不能让应用程序工作的PWA的一部分。

如果我点击来自应用程序选项卡中的Chrome浏览器开发工具添加到主屏幕选项，我发现了以下错误

网站无法安装：没有匹配的服务人员进行检测。您可能需要重新加载页面，或检查当前页面的服务人员还控制从清单起始URL

我的manifest.json文件看起来像这样

{
  "short_name": "Bill Splitter",
  "name": "205 Bill Splitter",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "192X192 144X144 64x64 32x32 24x24 16x16",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

我没有对服务人员多的知识，我的信念是，它会被自动注册到应用程序。但我不知道在构建过程是否是这样做的。我怎样才能做到这一点。

应用程序的实时版本可以在这个环节https://jishnuramesh.github.io/bill-splitter/找到

Answer 1

根据Facebook的文档，

默认情况下，在构建过程中会产生一个服务人员的文件，但它不会被注册，所以它不会把你的生产Web应用程序的控制。

为了选择加入离线先行为，开发商应该寻找自己的src / index.js文件如下：

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers
serviceWorker.unregister();

正如评论状态，开关serviceWorker.unregister（）来serviceWorker.register（）会选择您在使用服务人员。

参考：https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app