如何使用React构建渐进式Web应用
Google于2015年推出了渐进式Web应用程序（PWA），这些应用程序可为旨在跨平台工作的Web应用程序提供类似本机应用程序的感觉。 这些功能提供了脱机功能，资产的本地缓存，推送通知和性能优势等功能。
从技术上讲，Web应用程序必须具有三个主要组件，我们才能将其称为渐进式Web应用程序。
使网络应用“进步”的三个功能
- 安全上下文或HTTPS。 渐进式Web应用程序必须通过安全网络提供服务，例如使用HTTPS时提供的网络。 除了安全性好处外，这还有助于将您的Web应用程序建立为受信任的站点，如果您希望将事务集成到PWA中，则这是必不可少的。 具有安全上下文的重要性被列表中的下一个功能所放大，只有当我们具有安全上下文时，才可以通过HTTPS访问。
- 服务人员。 PWA必须具有一个或多个服务工作者，这是允许用户控制Web浏览器如何处理网络请求和资产缓存的脚本。 服务人员是可靠，快速的网页和脱机体验的组成部分。
- 清单文件。 这是一个JavaScript对象表示法（JSON）文件，用于控制您的应用对最终用户的显示方式。 清单文件中包含了所有图标，应用程序的URL以及使PWA变得时尚所需的其他设计详细信息。
为什么要参加PWA？
由于功能的完美结合，用户通常更喜欢PWA，而不是那些需要用户贡献太多的常规Web应用程序。
- 离线功能和类似本机的体验是PWA的一大优势。 用户不必担心自己的互联网，因为即使离线也可以继续使用PWA。 至于类似本机的体验，用户正在与Web应用程序进行交互，但是外观使用户几乎感觉就像正在使用从其Android智能手机上下载的应用程序一样。
- 推送通知增加了Web应用程序的本机体验，可帮助用户随时掌握最新情况，并只需按一下按钮即可与PWA进行交互。
- 多平台，逐步增强–作为Web应用程序，您的PWA可在任何浏览器上运行。 因此，无论用户是Windows还是Ubuntu，您都可以吸引众多用户。 即使某些功能在某些平台上不可用，降级也可以提供不错的用户体验。
如何建立反应性PWA-先决条件
首先，请确保您已安装最新版本的Node，并已安装了自己喜欢的代码编辑器。 Visual Studio Code是一个流行的选择。
如果您已经有了一个React Web应用程序，并且希望将其与渐进功能结合在一起，那就太好了 如果没有，就不用担心。 Facebook的Create React App工具将派上用场。 您甚至可以从GitHub导入现成的React应用。
从基础开始
首先，我们需要在系统中安装Create React App工具。 启动您的代码编辑器，然后输入以下代码段-
Create React App工具的安装将开始。 该过程完成后，输入以下代码以创建一个空项目。
（代码由https://www.zeolearn.com/magazine/build-a-progressive-web-app-using-react提供）
创建项目后，查看package.json文件，并注意该文件随附的依赖项。 也使用代码编辑器安装React-router依赖项，并使用“ npm run start”命令进行测试运行。
PWA清单
为了简化工作，我们安装了Lighthouse，这是Google提供的免费chrome扩展程序，它可以分析网络应用程序并显示其是否具有渐进性。 如果应用程序不是渐进式的，那么Lighthouse将提供您的应用程序需要满足的条件列表，才能使其具有PWA资格。
服务人员
Create React App具有用于缓存静态资产的默认服务工作程序，但是我们要创建一个自定义服务工作程序。 我们首先在项目的源目录中创建一个新的Service Worker文件，然后将以下代码段替换为我们的自定义Service Worker名称，从而开始该过程。
（代码由https://blog.bitsrc.io/build-progressive-web-apps-with-react-part-1-63f1fbc564a6提供）
我们使用默认的console.log（“”）命令将测试功能添加到我们创建的服务工作者文件中，创建该应用的新生产版本，然后检查控制台。 由于我们增加了服务人员功能，Lighthouse将使我们的PWA分数得到改善。 您可以根据需要的功能来发挥创造力并编写更复杂的服务工作者代码。
在添加安全上下文之前，我们必须增强应用程序的“渐进性”。
在应用初始化之前，我们可以通过编辑index.html文件来显示加载消息或CSS，以便我们能够从app.js和index.js文件中删除CSS文件的导入引用（文件名可能因系统而异），并且提高应用程序性能。
添加安全上下文和清单文件
Create React App工具在公共目录中包含一个清单文件，供包含基本配置选项的项目使用。 可以修改public / manifest.json文件，以添加诸如图标，安装选项的功能，并将PWA图标保存在主屏幕或桌面上，以便于访问。
现在，该部署我们创建的内容了。 Firebase是许多开发人员部署基于React的应用程序的首选工具，这也是我们建议用于PWA部署的工具。 通过将doCache的值更改为true来打开缓存，安装Firebase并初始化Firebase模块。
该过程完成后，通过在终端上运行以下代码来部署您的应用程序-
Firebase CLI工具将为您提供一个URL，您可以在Web浏览器中打开该URL。 托管URL将是HTTPS URL，它将解决安全上下文的问题。 示例如下所示-
（代码由https://www.zeolearn.com/magazine/build-a-progressive-web-app-using-react提供）
再运行一次Lighthouse工具，瞧 现在它应该为您提供100 PWA分数。 恭喜，您刚刚使用React构建了第一个渐进式Web应用程序