时间戳

首页 > 解决方案 > React PWA：如何正确设置清单文件并注册服务工作者

reactjs - React PWA：如何正确设置清单文件并注册服务工作者

问题描述

我是反应新手，正在通过开发一个小型应用程序来学习反应。该应用程序使用 create-react-app 进行引导，并使用 github 页面进行部署。一切正常，但我无法让应用程序的 PWA 部分正常工作。

如果我从 chrome Dev 工具的应用程序选项卡中单击添加到主屏幕选项，我会收到以下错误

无法安装站点：未检测到匹配的服务人员。您可能需要重新加载页面，或者检查当前页面的服务工作者是否也控制清单中的起始 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/

标签： reactjsservice-workercreate-react-appprogressive-web-apps

解决方案

根据 facebook 文档，

默认情况下，构建过程会生成一个 service worker 文件，但它不会被注册，因此它不会控制您的生产 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

推荐阅读