关于React Progressive Web应用的简介
如果您不了解React Progressive Web应用，那么您来不迟。近年来，PWA已发展为采用最多的优化。它已成为软件行业的一种策略。
因此，不仅优化优点，而且还有很多好处：
逐步改善：无论用户使用何种浏览器，它都对每个用户起作用。因此，您的应用程序将在多种浏览器上完美运行。同样，当某些功能不可用时，它将优雅地降级。而且，它提供了体面的用户体验。
像本地人一样的熟悉：它提供类似移动的体验。这是一个网络应用程序，但感觉就像您正在使用iOS / Android应用程序。
反应性：它可以与iPad，台式机，平板电脑或移动设备上的任何屏幕尺寸相匹配。机械地调整以平衡狭窄空间或新空间。
离线维持：您的应用可以在此处离线运行。
推送通知：PWA以推送通知的色彩吸引人。他们会给您通知，以通知您有关好友请求，新闻消息，当前新闻或任何其他内容的信息。因此，您将需要回复通知。可能是响应消息，阅读报告，检查朋友并再次启动应用程序。因此，使您可以使用Web应用程序。
服务人员
Service Worker是一种Worker，它允许在浏览器的后台运行脚本。它就像是网络和浏览器之间的中间人。服务人员的主要工作是协助我们的缓存并提供缓存的文件。这将提供不间断的轻松体验。服务人员允许开发人员更有效地处理资源缓存。这样即使用户脱离互联网也不会受到干扰。
什么是服务人员？他们如何协助发展绩效？
在一般的网络应用中，我们只能引导我们的网站。如果我们与某个网络相关联，则在没有网络的情况下，我们将遵守默认的“网络错误：页面无法加载”或小型恐龙游戏。服务人员改变了游戏规则。与服务人员一起，我们可以缓存网站页面，但可以缓存组成网页的不同资源，这与文本不同。工作人员可以将网页资源缓存在称为“缓存存储”的新存储中。我们可以脱机加入服务工作者，并在缓存存储中提供缓存的页面。
现在，我们在上一节中了解了服务工作者的工作方式。但是问题是：React Progressive Web应用的缩写有什么改进？
渐进式Web应用
渐进式Web应用程序（PWA）是用于表示现代软件开发方法的短语。与常规应用程序不同，渐进式Web应用程序是常规网站（或网页）或移动应用程序的混合。这种新的应用程序模型试图将现代浏览器提供的功能与移动体验的优点相结合。
许多浏览器尚未支持许多PWA功能。虽然将来会有很多功能。您不必应用所有功能。如果您的浏览器不支持应用清单，而是带有缓存存储，则可以保留应用清单。您可以从缓存存储开始，但将来，您的浏览器（更新时）最终将支持应用清单，您可以添加该功能以方便使用。
您会看到自己不断改进，因为浏览器新增了更多功能，但并未完全阻止并停止浏览器完全支持所有功能。
推杆
我们还必须创建一个服务器，以协助触发Pusher事件。我们将使用Node.js创建一个。在目录的根目录中，项目；制作一个名为server.js的文件并编写以下代码：
| // server.js | ||
| const express = require（'express'） | ||
| const path = require（'path'） | ||
| const bodyParser = require（“ body-parser”） | ||
| const app = express（） | ||
| const Pusher = require（'pusher'） | ||
| //使用您的appId，密钥，机密和群集初始化Pusher | ||
| const pusher = new Pusher（{ | ||
| appId：“ APP_ID”， | ||
| 键：“ APP_KEY”， | ||
| 机密：“ APP_SECRET”， | ||
| 群集：“ YOUR_CLUSTER”， | ||
| 加密：true | ||
| }） | ||
| //身体解析器中间件 | ||
| app.use（bodyParser.json（）） | ||
| app.use（bodyParser.urlencoded（{扩展：假}）） | ||
| // CORS中间件 | ||
| app.use（（req，res，next）=> { | ||
| //您希望允许连接的网站 | ||
| res.setHeader（'Access-Control-Allow-Origin'，'*'） | ||
| //请求您希望允许的方法 | ||
| res.setHeader（'Access-Control-Allow-Methods'，'GET，POST，OPTIONS，PUT，PATCH，DELETE'） | ||
| //请求您希望允许的标题 | ||
| res.setHeader（“访问控制权限标题”，“ X请求的内容类型”） | ||
| //如果需要网站在已发送的请求中包含cookie，则设置为true | ||
| //到API（例如，如果您使用会话）
|
||
| res.setHeader（“访问控制权限凭据”，true） | ||
| res.setHeader（“访问控制权限凭据”，true） | |
| //传递到下一层中间件 | |
| 下一个（） | |
| }） | |
| //设置要由Node.js使用的端口 | |
| app.set（“端口”，（5000）） | |
| app.get（‘/’，（req，res）=> { | |
| res.send（“欢迎”） | |
| }） | |
| //将价格信息从客户端发送到的API路由 | |
| app.post（“ / prices / new”，（req，res）=> { | |
| //将“价格”事件触发到“硬币价格”频道 | |
| pusher.trigger（'coin-prices'，'prices ,, { | |
| 价格：req.body.prices | |
| }）; | |
| res.sendStatus（200）; | |
| }） | |
| app.listen（app.get（'port'），（）=> { | |
| console.log（“节点应用程序正在端口上运行”，app.get（“端口”）） |
(courtesy-//medium.com)
什么是清单？
清单是具有一组规则和规定的非常简单的格式。清单实际上告诉您的浏览器，当您的应用“安装”在桌面或用户的移动设备上时应如何工作。使用或具有清单是必需的，也是必需的。
这是任何manifest.json的样子：
看一看-
| { | |
| “ short_name”：“ GemPuzzle”， | |
| “名称”：“ GemPuzzle”， | |
| “图标”：[ | |
| { | |
| “ src”：“ favicon.ico”， | |
| “尺寸”：“ 64×64 32×32 24×24 16×16”， | |
| “类型”：“图像/ x-icon” | |
| }， | |
| { | |
| “ src”：“ logo192.png”， | |
| “类型”：“图像/ png”， | |
| “尺寸”：“ 192×192” | |
| }， | |
| { | |
| “ src”：“ logo512.png”， | |
| “类型”：“图像/ png”， | |
| “尺寸”：“ 512×512” | |
| } | |
| ]， | |
| “ start_url”：“ /”， | |
| “范围”： ”/”， | |
| “显示”：“独立”， | |
| “ theme_color”：“＃50e3c2”， | |
| “ splash_pages”：null， | |
| “ background_color”：“＃ffffff”
(courtesy- //koala42.com)
）） |
|
| ( |
反应 Progressive Web应用s的优点
- 渐进和发展的增强。它将使任何Web应用程序体验可靠且更快。此外，对于没有支持的功能，它肯定不会破坏其功能。
- 对于所有平台，它只有一个代码库。
- 维护和建造便宜得多
- 所有客户端将自动显示在最新版本上
- 无需进行前期安装即可使用该应用
- 易于共享和查找
反应 Progressive Web应用s的缺点
- 它仍然是一项新技术，因此许多浏览器尚未完全支持它
- 它将具有更多有限的硬件访问权限
- 性能将限于计算繁重的操作。