渐进式 Web 应用程序和混合移动应用程序之间的区别

Posted 2023-02-16

【中文标题】渐进式 Web 应用程序和混合移动应用程序之间的区别

【英文标题】：Difference between a progressive web app and a hybrid mobile app

【发布时间】：2017-04-10 18:37:07

【问题描述】：

谁能告诉我混合移动应用和渐进式 Web 应用之间的区别以及它们的优势？

【参考方案1】：

混合移动应用程序通常是指使用 Web 和原生技术组合构建的应用程序，该应用程序通过原生应用商店分发。这些应用通过 Apple、Google、Microsoft 等的应用商店审核流程。

Progressive Web App 是使用 Web 技术构建的应用程序，可在浏览器中运行并可添加到主屏幕。它们不需要通过本地应用商店分发，但可以包含在其中。截至 2018 年，Microsoft 在其 Microsoft Store 中包含 PWA，Trusted Web Activities 使将 PWA 提交到 Google Play 商店变得更加容易。

一些混合移动应用平台包括PhoneGap（又名Cordova）、Appcelerator Titanium 和Ionic。您不需要平台来创建混合应用程序，但它们很有帮助，因为它们已经负责在原生 API 和 javascript API 之间建立桥梁。

Progressive Web Apps 只需在浏览器中运行，因此可以使用基本的 html、CSS 和 JavaScript 构建它们。

【讨论】：

PWA 不仅仅是普通的旧网站，而是采用了如下@oleksii 回复中详述的新技术

【参考方案2】：

渐进式网络应用

这项由 Google 开发的相对较新的技术使移动设备能够将网站或网络应用程序添加到智能手机的主屏幕并能够与其离线交互。

优点

允许推送通知 应用可以在离线模式下运行 底层网站通常在搜索引擎上获得更好的排名

缺点

这项技术只是一个浏览器包装器，而不是一个功能齐全的应用程序，所以从技术上讲它仍然是一个网站 用户不会获得原生应用体验（即交互、动画、性能），因为 UI 只是一个全屏浏览器窗口，没有可以离线工作的 URL 栏。 兼容性差（仍然不适用于 iPhone 和 iPad）

混合移动应用

这里可以有两种选择：

Apache Cordova、Ionic 和 PhoneGap 框架

优点

开发速度快 采用 Web 开发技术（HTML、CSS、Javascript）编码，可产生交叉兼容的 ios、android 和 Web 软件（只需一名 Web 开发人员） 可以使用框架来模拟原生应用 UI 元素（即按钮、菜单等） UX 非常接近原生体验，使用模仿原生应用行为的 UI 元素 访问智能手机的硬件 API，促进设备功能（例如相机、推送通知、地理定位等）

缺点

UX 不如原生应用程序好（300 毫秒的点击延迟、滚动时的幻觉点击等） 应用程序越复杂，由于使用了各种包装器和库，它的运行速度就越慢 不能离线工作 动画很难在 UI 中实现

或 React Native。

优点

基于 React 的应用程序的高开发速度 使用 React.js 构建的 Web 应用程序可以轻松转换为 React Native 移动应用程序，并且可以重复使用部分源代码 原生用户体验 应用程序的外观和感觉与特定平台的原生移动应用程序完全一样 降低开发成本 React Native 专家通常可以构建 Android 和 iOS 应用程序

缺点

相对较新的技术（有限的开源解决方案） 在视觉设计方面受到限制 不适合需要高负载（大量计算）的复杂项目，例如手机游戏或应用程序

最近我们写了一篇关于这个话题的文章：From Website to Mobile App – Your Four Best Options

我相信你会感兴趣的。

【讨论】：

根据这篇文章 - ***.com/questions/35463547/…，转换并非易事。您能否详细说明您的“专业：轻松转换”？

我不敢苟同，混合应用程序的缺点之一是“不能离线工作”。您可以为混合应用程序提供离线支持。我参与了基于物流的混合应用程序的开发，该应用程序具有离线支持。

不要在这里吹毛求疵，但鉴于其他人会看到这一点，值得指出的是，您对 Hybrid 的所有缺点都是不正确和固执己见的。出色的用户体验、离线支持和动画都可以在混合应用程序上实现，就像在浏览器中一样。多年来，300 毫秒的延迟一直不是问题。

我同意takesavy和GFoley83。您绝对可以构建混合应用程序以离线工作。我一直在为我的雇主开发一个利用本地存储和 SQLite 的应用程序。当用户重新上线时，该数据将与远程服务器同步。点击延迟几乎不存在。

是的，有些项目是有争议的。 “基于 React 的应用程序的高开发速度”、“相对较新的技术”、“不适合复杂的项目，如手机游戏或需要高负载的应用程序”、“不能离线工作”，以及 cordova 应用程序也是“允许推送通知。其中一些是不正确的，而另一些则取决于你做什么和如何做。你是如何做的，你正在使用什么代码库以及你的编码有多糟糕/多好，无论是在 PWA 还是混合应用程序上，真的。

【参考方案3】：

渐进式网络应用： 直到最近，移动 Web 应用程序还缺乏本地移动应用程序的许多功能，例如发送推送通知、离线工作和在主屏幕上加载的能力，但是提供这些功能的浏览器和 Web 应用程序已经有了一些改进。利用这些功能的应用称为渐进式网络应用。

渐进式网络应用程序是要走的路吗？这取决于你的目标是什么。它们只适用于相当有限的谷歌浏览器。如果您的目标是覆盖 Android 和 iOS 上的受众，那么渐进式 Web 应用程序可能不适合您。从这个意义上说，它们不是移动应用程序的替代品，但它们可以成为一种快速将类似移动应用程序的网络应用程序交到人们手中的方式。如果您正在考虑将您的 Web 应用程序转换为渐进式 Web 应用程序，请考虑使用 Canvas 等解决方案将您的 Web 应用程序转变为移动应用程序。真的很简单！

网络应用： 网络应用程序“是通过网络浏览器通过网络（例如 Internet）访问的应用程序”。那么这与网站有什么不同呢？

差异是主观的，但大多数人都同意网站通常只是提供信息，而网络应用程序提供功能。例如，***是一个网站；它提供信息。 Facebook 是一个网络应用程序。

不过，不要让“应用程序”这个词让您感到困惑。 Web 应用程序不需要像移动应用程序那样下载。 Web 应用程序在 Chrome、Safari 或 Firefox 等浏览器中加载，并且不会占用用户设备上的任何内存或存储空间。

它们是如何建造的？绝大多数是用 JavaScript、CSS 和 HTML5 构建的。与移动 iOS 或 Android 应用程序不同，没有可供开发人员使用的软件开发工具包 (SDK)。您可以使用 Angular、React 和 Vue.js 等模板和框架快速入门。与移动应用程序相反，开发 Web 应用程序可以简单快捷，但是，它们的简单性也是它们的缺点。这通常是在投资移动应用之前测试想法的好方法。

混合应用： 如果原生应用程序和网络应用程序结婚并生了孩子，那将是一个混合应用程序。您可以像安装本机应用程序一样安装它，但它实际上是内部的 Web 应用程序。混合应用（如 Web 应用）是使用 Javascript、HTML 和 CSS 构建的，并在称为 Webview 的东西中运行，这是您应用中的简化浏览器。

为什么要考虑混合？假设您有一个应用程序的想法，但您不知道人们是否会喜欢它。您的目标是尽快将可用的东西送到他们手中。在创业世界中，这被称为 MVP，或最小可行产品。您缺乏资源，因此您需要创建一个仍能提供价值的简单产品版本。构建 Web 应用程序可能是真正最小的选择，但不会真正让您测试人们是否会在他们的设备上下载和使用应用程序。

参考： https://www.mobiloud.com/blog/native-web-or-hybrid-apps/

【讨论】：

Progressive Web Apps 已经取得了长足的进步，现在 Firefox 和 Chrome 都支持。他们现在能够使用许多设备功能。 medium.com/dev-channel/…

【参考方案4】：

网络应用 Web 应用程序存储在远程服务器上，并通过浏览器通过 Internet 交付。 Web 应用程序不是真正的应用程序；它们确实是在许多方面看起来和感觉都像原生应用程序的网站。它们由浏览器运行，通常用 HTML5 编写。用户首先访问它们，就像他们访问任何网页一样：他们导航到一个特殊的 URL，然后可以选择通过为该页面创建一个书签将它们“安装”到他们的主屏幕上。

混合应用 混合应用程序类似于原生应用程序，在设备上运行，并使用 Web 技术（HTML5、CSS 和 JavaScript）编写。混合应用程序在本机容器内运行，并利用设备的浏览器引擎（但不是浏览器）来呈现 HTML 并在本地处理 JavaScript。 Web-to-native 抽象层允许访问在移动 Web 应用程序中无法访问的设备功能，例如加速度计、相机和本地存储。 通常，公司构建混合应用程序作为现有网页的包装器；通过这种方式，他们希望在应用商店中占有一席之地，而无需花费大量精力来开发不同的应用。混合应用程序也很受欢迎，因为它们允许跨平台开发：也就是说，相同的 HTML 代码组件可以在不同的移动操作系统上重用，从而显着降低了开发成本。 Cordova/PhoneGap 和 Sencha Touch 等工具允许人们使用 HTML 的强大功能跨平台进行设计和编码

【参考方案5】：

混合应用程序 - 它是一个原生应用程序，它还使用网络技术 (html/js/css) 来实现代码重用和易于开发。该应用程序需要从应用商店下载。 开发者无法立即推送更改，因为应用商店等应用审核存在“周期”。

Progressive Web App - 使用最新的 HTML5 技术并提供丰富的用户体验和功能的 Web 应用程序。 支持离线模式（如常规应用程序）。代码推送很容易。最好的部分是，您不需要针对 iOS、Android 和桌面的单独开发和部署过程。

【参考方案6】：

混合移动应用程序。混合开发结合了原生和 HTML5 世界中最好的（或最差的）。我们将混合定义为一个 Web 应用程序，主要使用 HTML5 和 JavaScript 构建，然后将其包装在一个瘦原生容器中，该容器提供对原生平台功能的访问。

Progressive Web Apps 是结合了最好的网络和最好的应用的体验。从第一次访问浏览器选项卡开始，它们对用户很有用，无需安装。随着用户逐渐与应用程序建立关系，它变得越来越强大。即使在不稳定的网络上，它也能快速加载，发送相关推送通知，在主屏幕上有一个图标，并作为***全屏体验加载。

一些混合移动应用平台是WaveMaker、Mendix 和 quickbase。

我个人喜欢 WaveMaker 构建混合应用程序和网络应用程序。

【参考方案7】：

渐进式网络应用或多或少只是一个网站，它可以添加到我们手机的主屏幕上，可以像应用一样运行（全屏视图）并提供原生外观和感觉。因此，用户可以在不占用太多内存的情况下获得类似移动应用的体验。

另一方面，混合移动应用程序只是另一个移动应用程序，但具有不同的开发技术。它是使用单个代码开发的（例如使用 javascript 或 typescript 在本机反应中），然后部署到不同的环境中。比如应用商店和游戏商店。与在我们需要部署的每个平台上单独开发的原生应用程序不同，混合应用程序只需开发一次，就可以部署在多个环境中。

【讨论】：

这并不完全正确。 PWA 更多的是特征的集合，首先是defined by Russell at Google。这样就可以安装了。