PWA与本机应用程序：您应该选择哪个？

内容

• PWA与本地应用程序：有什么区别？
• 渐进式Web应用程序：为Web构建
• PWA的优势
• PWA的弱点
• 反应本机
• React Native的优势
• React Native的弱点
• 本机脚本
• NativeScript的优势
• NativeScript的弱点

构建应用程序时应采取哪种方法？您应该采用PWA / Web技术路线还是应该本地化并针对特定平台进行设计？两种选择都有其优缺点，在本文中，我们将重点介绍用于创建Web和本机应用程序的几种流行选择。

PWA（渐进式Web应用程序）又名Web应用程序，是使用流行的Web技术HTML，CSS和JavaScript构建的，并且可以在Web浏览器中工作。 （检查一些必要的HTML标记以帮助您进行构建。）PWA实际上是设计成看起来像应用程序的移动网站，并且使用Web API使它们具有类似于本机应用程序的功能。

有关应用程序构建的更多建议，请参见我们有关如何制作应用程序的文章，或者如果您要创建一个网站，请参见这些顶级网站构建器和网络托管服务。

PWA与本地应用程序：有什么区别？

渐进式Web应用程序的优点是无需应用程序商店即可安装并可以在设备上实时运行。而且，该过程的一部分是Web App Manifest，它使开发人员可以控制应用程序的显示方式和启动方式。而且，网页设计师/前端开发人员将已经具备立即开始构建所需的技能。与本地应用程序不同，无需学习新语言。

本机应用程序是在考虑特定操作系统的情况下构建的，即。 iOS和Android –并使用框架或语言来实现此目的。 iOS应用程序通常使用Xcode或Swift，而Android应用程序则使用JavaScript。但是，在本文中，我们将重点介绍两个基于JavaScript的开源框架-React Native和NativeScript，它们可在两个平台上使用。

本机应用程序的优势在于，它们通常会带来更好的功能，因为它们可以更好地利用设备的硬件和软件，并且速度更快，响应速度更快，并且通过应用程序商店中的评级获得质量保证。但是，这将意味着必须学习如何使用特定的框架或库。

在这里，我们研究了用于构建应用程序的三个不同选项-一个用于Web（PWA），另一个用于本机（React Native，NativeScript）。我们将研究他们的运作方式，他们的工作方式以及它们的优缺点，以帮助您决定应该选择哪个选项来构建您的应用程序。

渐进式Web应用程序：为Web构建

PWA的优势

• 应用程序也可以在浏览器中使用
• 发行：浏览器，企业和应用商店
• 可以利用React，Angular，Vue，vanilla或其他框架

PWA的弱点

• 不能访问每个本机API
• iOS和iPadOS上的能力和商店分布受到限制
• 处于不断发展中

PWA是当前的设计模式，可仅使用Web堆栈（HTML，CSS，JavaScript和浏览器的API）来创建高性能，脱机，可安装的应用程序。由于服务人员和Web应用程序清单规范的支持，我们现在可以在为Android，iOS，iPadOS，Windows，macOS，Chrome OS和Linux安装后创建一流的应用程序体验。

要创建PWA，可以使用任何体系结构：服务器端，vanilla JavaScript，React，Vue，Angular或其他客户端框架。它可以是单页应用程序，也可以是多页Web应用程序，我们定义了离线时如何为用户提供支持。

通过这种方法，我们不需要打包和签名应用程序的资源：我们只是将文件托管在Web服务器中，服务工作人员将负责在客户端中缓存文件并在安装后为它们提供服务。这也意味着如果应用程序需要更新，则只需更改服务器上的文件，服务工作人员的逻辑将负责在用户设备上更新文件，而无需用户或应用程序商店的干预。

在分发方面，最常见的方法是浏览器。用户通过使用“添加到主屏幕”或“安装”菜单项，接受安装邀请或在兼容平台上使用自定义Web应用程序用户界面，从浏览器安装应用程序。值得注意的是，Apple拒绝在App Store中发布的纯PWA，并鼓励Web开发人员通过Safari分发它。

用户界面完全由Web运行时管理，这意味着Web设计人员负责在屏幕上呈现每个控件。如果您使用UI框架（例如Ionic）或Material Design库，则HTML和CSS会模仿Android或iOS上的本机界面，但这不是强制性的。在执行PWA时，必须应用Web性能技术，以保持良好的用户体验。

就功能而言，PWA将只能访问该平台上的浏览器引擎中可用的API，并且不能使用本机代码进行扩展-应用商店PWA发行版除外。就此而言，iOS和iPadOS是PWA的受限平台，而Chrome（适用于Android和台式机OS）具有更高的可用性，并且正在努力通过Fugu项目向JavaScript添加所有可能的API。

• 最佳的云存储：为您选择正确的选项。

反应本机

React Native的优势

• 与React.js相同的模式
• 一些Web API已公开
• Web和桌面支持

React Native的弱点

• 无法重复使用Web UI组件
• 本机桥需要一些工作
• 需要React经验

React Native是Facebook赞助的基于JavaScript的开源组件框架，它使用React设计模式以及JavaScript语言从一个源代码为iOS，iPadOS和Android编译本机应用程序。

但是，不接受任何HTML元素进行渲染。只有其他本机组件有效。因此，与其渲染一个 div> 与一个 > 和一个 输入> 元素与JSX，您将呈现一个 查看> 与一个 文字> 和一个 TextInput>。对于样式组件，您仍然使用CSS，并且布局是通过Flexbox定义的。

用户界面不会在浏览器的DOM中呈现，而是使用Android和iOS上的本机用户界面库。因此， 按钮> 在ReactNative中将成为iOS上UIButton的实例，并且 android.widget.Button Android上的课程； React Native没有涉及Web运行时。

但是，所有JavaScript代码都将在设备上的JavaScript虚拟机中执行，因此在编译应用程序时没有JavaScript到真正的本机代码转换。对于Web开发人员，有一组众所周知的API，例如Fetch API，WebSockets和浏览器的计时器：setInterval和requestAnimationFrame。其他功能通过自定义API（例如动画）部署在平台中。

您可以使用两个免费的CLI启动一个快速的React Native项目：Expo或更正式的ReactNative CLI。如果您使用官方的CLI，则还需要Android Studio来编译和测试Android应用程序，并需要Xcode在iOS和iPadOS上进行相同的操作，因此该平台需要一台macOS计算机。

React Native编译适用于iOS和Android的本地应用程序，这意味着您的应用程序分发将遵循与其他本地应用程序相同的规则：公共应用程序的应用商店，企业分发和alpha / beta测试。通常，您无法通过浏览器分发应用程序，尽管Web上的React Native和Windows平台上的Microsoft React Native可以提供帮助。

本机脚本

NativeScript的优势

• 编码和测试的好工具
• 准备使用的广泛应用程序库
• 所有的Android和iOS API都在JS中公开

NativeScript的弱点

• 小社区
• 无法重复使用Web UI组件
• 不支持网页，桌面或React

NativeScript不像React Native那样知名，但是它在同一领域竞争：来自JavaScript和Web框架的本地iOS和Android应用程序。它使您可以使用JavaScript或TypeScript和XML用户界面文件来创建本机应用程序。它还开箱即用地支持Angular和Vue，因此对于习惯于这些框架的开发人员来说，这是一个很好的解决方案。

使用Angular或Vue时，NativeScript的优点更加明显。对于Angular，您可以创建与以前相同的组件，但是使用XML而不是HTML作为模板，包括所有数据绑定。在XML中，而不是 div> 与一个 > 和 img>，您将放置一个 StackLayout> 与一个 标签> 和 图片> 成分。

支持CSS和Sass的样式与浏览器中的CSS相似。路由和网络管理通过标准Angular服务的实现来完成。对于Vue来说，这是相似的。您用XML编写模板，而不是在同一模板中使用HTML 模板> .vue文件中的元素。

NativeScript包含一组组件，然后将这些组件映射到Android或iOS本机控件，因此，当您呈现列表或选择器时，它将是本机应用程序，使用的方法与React Native中的相同。

您的JavaScript或TypeScript代码（已编译）是在设备上的JavaScript虚拟机中执行的，该虚拟机具有与本机环境之间的桥梁/来自本机环境的桥梁。在该桥中，公开了来自Android或iOS / iPadOS的整个本机API，因此尽管可以访问跨平台API，我们仍可以实例化或调用JavaScript / TypeScript中的任何Java或Objective-C代码，而NativeScript可以封送数据类型。

NativeScript对工具提供了强大的支持，包括VS代码插件，CLI，热重载测试系统和NativeScript游乐场应用程序，因此您无需在测试时安装所有依赖项，还不需要安装其他一些服务，例如在线操场。

最后，NativeScript仅编译适用于Android和iOS的应用程序，如果您遵守它们的规则，企业发行版和alpha / beta测试，则可以从官方发行渠道和应用程序商店安装该应用程序。通常，将无法通过浏览器分发应用程序，并且该平台也没有针对桌面应用程序的解决方案。

本文最初发表于 发行325 net，这是面向网页设计师和开发人员的全球最畅销杂志。买 发行325 或者 订阅 净。

加入2020年4月，我们的JavaScript超级巨星阵容将在GenerateJS上参加–该会议将帮助您构建更好的JavaScript。现在预订generateconf.com