PWA 与 React Native：详细介绍

已发表: 2021-05-21

目录

与 PWA 和 Flutter 类似，PWA 和 React Native 是目前开发跨平台应用程序最流行的方法之一。 在研究这个主题时，在尝试为您的业务决定正确的发展路径时感到困惑是可以理解的。 在本文中，我们将详细介绍每种开发方法——从它们是什么、它们的用例以及每种开发方法如何对您的业务有益的细节。

简要细节

以下是每种开发方法的快速总结，以及其中的用例。

渐进式 Web 应用程序 (PWA)

定义

Progressive Web App (PWA) 是一种用于开发基于 Web 的应用程序的新兴解决方案。 PWA 的核心是依靠服务工作者和 Web 应用程序清单来提供类似应用程序的体验，其中包括以前专属于应用程序的功能，例如推送通知、离线可用性、可安装性等。

用例和示例

由于其基于 Web 的性质，PWA 最适合主要关注提供更具吸引力、独立于连接的体验的网站，或者仅适用于希望覆盖更广泛受众的网站。

截至目前，PWA 在电子商务行业中得到广泛采用，其中推送通知和离线可用性等功能对于提高购买转化率和建立更忠诚的客户群是必不可少的。

贝内科斯 pwa
Benecos 是一个电子商务 PWA
 推荐阅读：2021 年渐进式 Web 应用程序 (PWA) 的 12 个最佳示例

反应原生

定义

React Native 是一个用于开发跨平台、基于 JavaScript 的真正原生应用程序的框架。 使用 React Native 构建的应用程序可以通过 React 的声明式 UI 范例和 JavaScript 与原生 API 交互——这意味着可以使用单个 React 代码库来维护两个平台（iOS 和 Android），而所有这些都不会影响用户体验。

用例和示例

很难为 React Native 定义一个特定的用例，因为它用于构建各种类型的应用程序，例如流行的社交媒体应用程序（例如 Facebook、Instagram、Pinterest 等）或数字通信应用程序（例如 Skype、Discord 、腾讯QQ等）。 有关使用 React Native 构建的应用程序列表，请查看 React Native 应用程序展示。

Instagram 反应本机
Instagram 是使用 React Native 构建的

进入细节

在接下来的部分中，我们将详细介绍每种开发方法，以及每种开发方法如何适合您的业务计划的见解。

语

PWA 依靠 Web 技术来提供类似应用程序的体验。 因此，HTML、CSS 和 JavaScript 等 Web 语言仍然是构成 PWA 的核心语言，而 React Native 应用程序使用 React.js（一个 JavaScript 库）作为其核心语言。

这就是为什么在挖掘 React Native 应用程序的代码时，您应该会看到它与 Web 语言有一些相似之处，唯一的主要区别是 React Native 应用程序使用原生组件而不是 Web 组件来创建用户界面。

反应原生代码
React Native 中的开发语言与 Web 语言有一些相似之处

用户界面

因为 PWA 基于 Web 技术并在浏览器的引擎上运行，所以典型 PWA 的用户 UI 可能看起来不像受过训练的眼睛那样原生。 但是，对于普通用户来说，PWA 的类应用 UI 和真正的原生应用 UI 之间的差异最多是微乎其微的。

刀具知识
一个制作精良的 PWA 看起来应该与原生应用程序没有什么不同

相反，React Native 应用程序能够提供真正的原生体验，这要归功于它使用原生组件——这些组件包括特定于平台的组件，例如 iOS 的<DatePickerIOS>和<ProgressViewIOS> ，或<ViewPagerAndroid>和<ToastAndroid>对于安卓。

反应原生视图
在 React Native 中，您可以使用特定于平台的 UI 组件创建真正的原生体验

表现

表演是一个微妙的话题，因为很难理解这一点。 然而，由于 这两种开发方法都大量使用 JavaScript，你可以期望性能在所有方面都非常相似——React Native 有一点优势，因为它与使用的系统更紧密地集成，并且不必通过浏览器进行通信。

但是，PWA存在于浏览器环境中这一事实并不意味着它的性能与您的普通网站一样。 得益于 PWA 中采用的高级缓存方法，在一般网站/Web 应用程序中的页面之间加载时不再出现偶尔的打嗝； 再加上 PWA 本质上是增强的单页应用程序这一事实，PWA 的感知性能与您所能获得的真正的原生应用程序体验一样接近。

其中一个例子是一次性用品行业的科威特品牌 Temoorst。 选择 SimiCart 作为他们首选的解决方案提供商后，该品牌同时选择了原生应用程序和 PWA 以获得最佳投资回报率，而 PWA 的性能方面仍然是该品牌没有预料到的。 在盲测中，你很难发现他们的 PWA 和他们的 React Native 应用程序之间的性能和视觉差异。

Temoorst React Native 应用程序和 Temoorst PWA
Temoorst React Native 应用程序（左）和 Temoorst PWA（右）的外观和性能相似

为了测试 React Native 应用程序和 PWA 之间的性能差异，我们鼓励您试用 Temoorst 应用程序。 这些应用程序本身就是对 React Native 应用程序或 PWA 的最佳优化在推到最大时可能的样子的证明。

  • React Native 应用程序：Google Play 商店 | 苹果应用商店
  • PWA ：https://temoorst.com/

安全

由于与所用设备的更高级别集成，React Native 应用程序自然更安全，更不容易出现漏洞。 为了在 React Native 应用程序中添加更多安全层，在开发过程中可以采用多种方法，例如：

  • SSL Pinning：保护应用程序到服务器的连接
  • Keychain/sensitive-info：提供安全的本地存储以及生物特征/面部认证
  • Jscrambler：通过添加自我防御层防止代码篡改

由于 PWA 存在于浏览器环境中并利用浏览器实现其大部分功能，因此大部分安全工作由浏览器本身完成。 与普通网站相比，PWA 更安全，因为 PWA 的核心组件 service worker 仅通过 HTTPS 运行，这意味着客户端和服务器端之间的通信始终是加密的。

Service Worker 仅通过 HTTPS 运行。 因为服务工作者可以拦截网络请求并修改响应，所以“中间人”攻击可能非常糟糕。

Service Worker 简介

可发现性

这就是 PWA 大放异彩的地方。 PWA 不仅可以在 Web 上使用并暴露给搜索引擎，它们实际上也可以发布到应用商店。 谷歌、微软甚至三星都加入了这一行列，通过将重新打包的 PWA 纳入其应用商店来推动 PWA 的更多采用。 例如，Microsoft Store 甚至更进一步，计划使用由他们自己的 Bing 爬虫索引的高质量 PWA 自动重新填充他们的应用商店：

由 Bing 爬虫提供支持的 Microsoft Store 将自动索引选定的质量 Progressive Web App

欢迎使用渐进式 Web 应用程序加入 Microsoft Edge 和 Windows 10

截至目前，Apple App Store 是唯一一个 PWA 似乎无法触及的流行应用市场。 这是因为苹果在他们的审查指南中明确表示，为了获得批准，应用程序需要“超越重新包装的网站”——而这本身完全是另一个讨论，关于苹果如何积极阻止开发网络害怕伤害他们的底线。
与 PWA 相比，使用 React Native 构建的应用程序的可发现性并不那么令人印象深刻，但该框架的跨平台特性意味着，使用单一代码库，您仍然可以在 Google Play Store 和 Apple App Store 上找到您的应用程序。 考虑到 iOS 用户在某些国家（包括美国）占多数——而且 PWA 不能发布到 Apple App Store——这应该足以成为选择 React Native 应用程序开发的理由，以便在您的大多数用户是..

谷歌游戏商店苹果应用商店微软商店网络
反应原生是的是的是（带扩展包） 不
PWA 是的不是的是的

硬件可访问性

因为 React Native 应用程序是真正的原生应用程序，所以它们可以更广泛地访问原生 API。 这意味着即使是对设备硬件的低级访问（例如，访问 NFC（近场通信）、联系人列表等）和系统访问（例如，访问系统设置、日志等）也是可能的并且可以被利用以改善用户体验。
而且由于 PWA 依赖于 Web API 来实现其硬件可访问性，因此 PWA 在如何利用系统资源方面自然受到更多限制。 在最好的情况下——也就是说，如果使用的浏览器支持所有最新的硬件访问 API——PWA 可以访问以前专属于本地应用程序的各种硬件功能，例如地理定位、访问摄像头和麦克风、增强现实（使用 WebXR设备 API）。

 推荐阅读：Progressive Web App (PWA) 和硬件访问

开发成本

在开发成本方面，由于涉及的高度复杂性，React Native 项目往往价格昂贵。 例如，一个基本的 React Native 项目的成本是很常见的 15.000 美元以上，而一个基本的 PWA 项目应该只花费大约1000 美元到 10.000 美元。 然而，与其他原生应用程序框架相比，React Native 仍然是一个具有成本效益的解决方案，这要归功于其与平台无关的架构。 使用单个 React Native 代码库，您可以将您的应用程序发布到 Google Play Store 和 Apple App Store，从而显着降低总开发成本而不会损害用户体验。

虽然通常比 React Native 项目便宜，但 PWA 项目的开发成本可能会根据您选择的开发路径而有很大差异。 例如，如果您决定使用无头架构（与传统架构相比，这是一种更灵活、可扩展的解决方案），您可以预期您的 PWA 的开发成本将显着增加，因为该过程需要更高水平的技术专长.

结论

因为这是针对非常特定需求的两种开发途径，所以在 React Native 和 PWA 之间进行选择可能是一个艰难的决定。 PWA 是轻量级的，更新和安装过程毫不费力，PWA 提供的特性和功能对于普通应用用户来说应该绰绰有余。 但是，由于 Apple 目前对其 App Store 施加的限制，如果您的大多数移动用户都在 iPhone 上，那么投资一个好的 React Native 应用程序可能是一个好主意。

对于希望构建跨平台 React Native 应用程序或无头 PWA 的 Magento 商家，我们在 SimiCart 提供了具有成本效益的解决方案，以帮助您获得超越竞争对手的竞争优势。

探索 simicart 解决方案