移动应用类型：原生、混合与渐进式

在课程高级 WebOps (MC-AWO)中学习这项技能。

区别所在

当您考虑投资开发移动应用时，马上就会面对一大堆术语。iOS 和 Android 有什么区别？目前有哪些移动应用类型？什么是原生应用、混合应用和网页应用？更重要的是，哪一种最适合您和您的应用？

基本概念

谈到应用开发，我们通常指的是为移动设备开发，包括智能手机和平板电脑。网页和智能手表等可穿戴设备也有不同的移动应用类型，但本文只讨论手机和平板电脑等移动设备。

大多数移动设备运行两种操作系统之一：iOS 或 Android。iOS 由 Apple 开发和支持，只用于 Apple 自家的 iPhone 和 iPad。换句话说，在 Apple 的体系里，硬件和软件都由 Apple 掌控。

Android 由 Google 开发和支持，一般被认为是比 Apple 更开放的平台。事实上，Android 是开源操作系统，任何人都可以用其代码来运行设备。Google 自己也销售少量设备，但 Android 通常运行在其他公司制造的设备上，例如 Samsung、Huawei、LG、HTC 等。

截至 2016 年第三季度，Android 占全球移动设备市场约 88%，其余大部分属于 Apple。但这并不表示您应该先为 Android 开发。我们会在本文稍后讨论这一点。

这两类设备的应用并不互通，也就是说，原生 iPhone 应用不能在 Android 手机上运行，反之亦然。例如，您虽然看到 Snapchat 在两种手机上运行，外观也非常相似，但它们其实是完全分开开发的。

智能手机和平板电脑的商业成功并没有放缓的迹象。虽然您身边似乎 人人都有智能手机，但全球智能手机用户其实只有约 20 亿。因此在未来几年，预计全球将有数十亿人拥有他们的第一部智能手机。让您的应用进入应用商店、送到数百万（甚至数十亿）人手中的机会仍在增长。

首先，我们来定义 网页应用、 原生应用和 移动应用。

Wеb Aррѕ

什么是网页应用？

根据 Wikipedia，网页应用是“通过网络（例如 互联网）在网页浏览器中访问的应用程序”。那么它与网站有什么不同？区别比较主观，但大多数人会同意：网站一般只提供信息，而网页应用提供功能。例如，Wikipedia 是网站，它提供信息；Facebook 是网页应用。

不过，别被“应用”这个词混淆。网页应用不需要像移动应用那样下载。网页应用在 Chrome、Safari 或 Firefox 等浏览器中加载，不占用用户设备的内存或存储空间。

它们是怎样开发的？绝大多数用 JavaScript、CSS 和 HTML5 开发。与 iOS 或 Android 移动应用不同，网页应用没有软件开发工具包（SDK）供开发人员使用。您可以使用 Angular、React 和 Vue.js 等模板和框架快速起步。与移动应用相比，开发网页应用可以简单快捷，但简单也是它的缺点。在投资开发移动应用之前，网页应用常常是测试想法的好方法。

渐进式网页应用

直到最近，移动网页应用仍缺少原生移动应用的许多功能，例如发送推送通知、离线运作和在主屏幕上加载。不过，浏览器和网页应用已有一些改进，可以提供这些功能。利用这些功能的应用属于一种移动应用类型，称为渐进式网页应用。

要把您的网页应用变成渐进式网页应用，需要采取几个步骤。

渐进式网页应用是正确的方向吗？这取决于您的目标。它们只能在 Google Chrome 上运作，这相当受限。如果您的目标是覆盖 Android 和 iOS 用户，那么渐进式网页应用可能不适合您。从这个 意义上说，它们不能取代移动应用，但可以作为一种方法，快速把类似移动应用的网页应用交到用户手中。如果您正在考虑把网页应用转换成渐进式网页应用，不妨改用 Canvas 之类的方案，把您的网页应用变成移动应用。这真的很容易！

移动应用

移动应用有两种类型： 原生应用 和 混合应用。本文所说的移动应用，是指您从应用商店下载的应用。

为什么要开发应用，而不是网页应用？

简单的答案是：在应用商店露面对您的公司非常重要。人们经常搜索新应用，您希望自己的应用也在其中。只要移动应用上架应用商店，您就能鼓励用户安装，并把您的图标放在他们珍贵的主屏幕上。

让用户第一次使用您的产品很容易，让他们回来却可能是一项挑战。只有移动应用让您能适时发送推送通知，重新吸引用户。推送通知对任何认真的应用都极其重要。根据 Localytics 的数据，选择接收推送通知的用户，打开您应用的次数比不接收的用户多 88%。

让应用增长的另一个关键，是让用户把应用本身或其中的内容分享给朋友。这在网页应用上也能做到，但 最好在移动应用上做。作为应用用户，您可以快速分享到任何应用（Email、WhatsApp、Messenger、Facebook 等），比在浏览器上容易得多。

用户在应用上花的时间远多于网页。应用的普及度大幅上升，而且仍在增长。根据 e-Marketer，普通用户“每天将花 3 小时 15 分钟使用应用，而在移动浏览器上的时间将保持在 51 分钟”。

开发移动应用而非网页应用的另一个优势是广告收入。移动应用广告的 CPM 一般高于网页应用。许多人也在网页浏览器上使用广告拦截器，这会降低您的收入，而在移动应用中则无法这样做。

这是否表示您应该总是开发应用，而不是网页应用或单纯的移动网站？不一定！一个好的经验法则是：如果您能想象相当一部分用户每天访问一次您的服务或内容，那么开发应用大概是合理的。如果您提供的东西一般只用一次就不再使用，那就不要投资开发应用，而应专注于打造良好的移动优化网站。

原生应用

一般人想到应用时，想到的就是原生应用。您移动设备上的大部分应用都是原生应用。网页应用主要用 JavaScript 编写，而原生应用则用 平台所接受的语言编写。例如，Swift 或 Objective-C 用于编写原生 iOS 应用，Java 用于编写原生 Android 应用，而 Windows Phone 应用大多使用 C#。

Apple 和 Google 为应用开发人员提供各自的开发工具、界面元素和标准化 SDK：Xcode 和 Android Studio。这让任何专业开发人员都能相对容易地开发原生应用。

原生应用例子： 大多数最受欢迎的应用，例如 Pokemon Go、Twitter 和 Waze，都是完全原生的。不过，要区分谁使用纯原生的 Swift、Objective C 和 Java 代码，谁依赖混合方案或跨平台 SDK，已变得更难。

原生应用的优点

那么，为什么大多数应用都是原生应用？原因是原生应用比其他选择有多项显著优势。它们为用户提供最快、最可靠、反应最灵敏的体验，这一点不太可能转而对网页应用有利。原生应用更容易使用设备的更多功能，包括相机、麦克风、指南针、加速计和滑动手势。用其他方案也能做到，但用原生最容易。

原生应用可以使用推送通知，在需要用户注意时提醒他们。您有机会不断把用户带回来，这是应用成功的关键。由于您可以让每个应用的 UI/UX 符合平台惯例，您更可能让用户满意。数十项 UI/UX 差异能让用户感到熟悉自在。开发原生应用，您就不必在 UI/UX 上妥协，寄望它对所有平台都友好。

原生应用的缺点

您必须为每个推出的平台分别管理一套代码，iOS 应用不能在 Android 上运行，反之亦然。大多数开发人员专攻一个平台（Android 或 iOS），因此要在两个平台上开发应用，需要两名不同的开发人员（或团队）。原生应用的开发成本一般高于混合应用。

开发跨平台原生应用

如前所述，原生应用的主要缺点是必须为每个要覆盖的平台分别开发应用。如果您坚持使用 Apple 和 Google 提供的原生 SDK，情况仍是如此。但在过去几年，已出现几种替代方案，让您获得跨平台开发的好处，同时不牺牲用户体验或对原生 API 的访问。其中两个平台是 Xamarin和 React Native，两者都值得一看。

• Xamarin

Xamarin 由 Microsoft 推出，是一个让开发人员用 C# 开发一个可在多个平台运行的应用的平台。他们也提供免费工具，用于开发、测试、分发您的应用并从中学习。Xamarin 似乎是比 PhoneGap 和 Titanium 更完整的开发环境，甚至提供测试环境，让您在推出前在数千台虚拟设备上测试应用（这对跨平台应用至关重要）。Xamarin 也提供一些预建应用，帮助您快速起步。用 Xamarin 开发应用的公司包括 Slack、Pinterest 和 Honeywell。

• React Native

Facebook 不甘落后，最近把他们的一个项目 React Native 开源。它让您用一套代码开发真正的原生 iOS 和 Android 应用。它不是 “移动网页应用”、“HTML5 应用”或“混合应用”。您开发的是真正的移动应用，与用 Objective-C 或 Java 开发的应用 没有分别。您只需用 JavaScript 和 React 来组建它。看看 Instagram 的这些数据：在他们用 React Native 开发的功能中，iOS 和 Android 共用的代码超过 90%！

虽然 React Native 不能让您使用设备的所有功能，但如有需要，您可以加入原生代码。一些大公司也在使用 React Native，包括 Facebook、Walmart、Tesla 和 AirBnb。您可以在这里查看一些 React Native 应用。

1. Titanium

Titanium 的最新版本与 React Native 相似：应用用 JavaScript 编写，但生成原生应用，并通过自己的一套 API 把原生 API 连接到 JavaScript。它不再依赖 webview，因此您的应用外观和手感更“原生”。Titanium 在其网站上展示了许多用其技术开发的应用。一些较知名的应用有：eBay、ZipCar、PayPal、Khan Academy。

混合应用

如果原生应用和网页应用结婚生子，孩子就是混合应用。您像安装原生应用一样安装它，但它 内里其实是网页应用。混合应用和网页应用一样，用 JavaScript、HTML 和 CSS 开发，并在一个叫 Webview 的组件中运行，Webview 是应用内部的简化浏览器。

为什么要考虑混合应用？假设您有一个应用构想，但不知道人们会不会喜欢。您的目标是尽快把可用的东西交到他们手中。在创业圈，这叫 MVP，即最小可行产品。您资源不足，因此需要开发一个仍能提供价值的简单版本。开发网页应用可能是真正最精简的选择，但无法让您测试人们是否会在设备上下载并使用应用。

混合应用的优点

混合应用的所有优点都源于一个事实：您不是开发两个应用，而是开发一个应用，再稍作 调整，让它在两个平台上都能运作。现在您只需管理一套代码。这大概只需开发两个原生应用所需开发人员的一半。或者，用同样数量的开发人员，混合应用可以用一半时间发布。

混合应用开发人员通常比原生应用开发人员便宜。  混合应用更容易扩展到另一个平台。为一个平台开发好之后，您可以在另一个平台（例如 Windows Mobile）推出。  借助 PhoneGap 等方案在原生 SDK 和应用所运行的 webview 之间搭桥，您仍能像原生应用一样使用设备功能。

混合应用的缺点

性能大概是混合应用最大的缺点。由于混合应用在一个类似浏览器、叫 webview 的组件中加载，它们的表现只能和 webview 一样好。Webview 负责显示 UI 和运行 JavaScript 代码。在移动设备的早期，Google 和 Apple 并没有让 webview 使用与其移动浏览器 Chrome 和 Safari 相同的引擎。此后 webview 已大幅改进，但仍未达到原生性能。我们会在本文稍后深入讨论性能的不同方面。

要让混合应用在每个平台上都正常运行，一般需要大量工作。在某些情况下，总成本可能与完全原生应用相当，使成本优势变得微不足道。这一切取决于您想多接近“原生用户体验”，或您的应用有多简单。

应用的 UX 会受影响。iOS 和 Android 用户往往非常忠于自己的平台，而且他们已使用多年，习惯了原生应用的运作方式。差异虽然细微，但可能让用户感到沮丧。开发混合应用，您无法同时让两边的用户满意。如果太努力按平台定制应用，最终成本可能与两个原生应用相同。有一些方法可以做到这一点，我们稍后会讨论。

混合应用平台

PhoneGap/Cordova

PhoneGap 大概是最知名的混合应用平台，对网页开发人员来说可能也是最容易上手的。Cordova 是 PhoneGap 的开源基础和引擎。它由 Adobe 支持，完全开源。它让您用 JavaScript、HTML 和 CSS 开发跨浏览器的移动应用程序。这些应用在 Web View 中运行，再用原生代码包装。PhoneGap 还提供原生插件，让您使用设备的所有功能，包括加速器、相机、指南针、文件系统、麦克风、媒体、网络、通知、地理定位和存储。应用需要打包成二进制文件，其中包括 web view 包装层和您应用的 HTML 文件，通常在设备本地加载。看看这些例子：Tripcase、Untappd。

Canvas

Canvas 是我们自己的混合应用方案。它是一项服务，让任何拥有移动网页应用或响应式网站的人，无需任何开发工作就能为其开发移动应用。与我们的 News 方案一样，它以服务形式提供，也就是说，我们会为您开发、发布和维护应用。技术上，Canvas 依靠我们自己的 iOS 和 Android 原生代码，包括用于导航的原生元素（例如标签栏）、推送通知收件箱等功能、页面内容预加载、缓存和离线支持。应用的设计是依靠一个由您掌控的远程网页应用或移动网站——您对移动网站的任何更改都会立即反映在应用中。

可以把网页应用转换成混合应用吗？

如果您是为现有网站开发应用，或者您已有一个移动网页应用，功能完全符合应用所需，只是缺少原生应用一般提供的东西（应用商店露面、推送通知、主屏幕图标、离线使用），那么把您的网站或网页应用变成原生应用，可以既快速又经济。

您不必分别管理两个平台（iOS/ Android）。您只需一个网页应用，就能通过您的应用覆盖移动网页和两大移动平台。这正是我们开发最新 Canvas 平台的目的！

如何让网页应用或混合应用感觉像原生应用

如前所述，混合应用的终极目标是感觉像原生应用。因此，如果您决定采用混合应用，您的大部分时间 将花在这件事上。您可以做许多事情，让混合应用感觉更原生。  使用启动画面，让应用打开时网页应用已完全加载，可以马上使用。  在 UI 中加入返回按钮，确保用户能直观地导航。Android 的系统界面或设备上已有返回按钮，但 iOS 需要您的应用让用户在浏览时能返回。

如果您从零开始开发应用，请使用 Onsen UI 之类的 UI 库，它不仅能加快开发时间，也会让设计决定容易得多。UX 和设计建立在惯例或用户习惯之上。像 Onsen UI 这样的库已按惯例做好所有移动组件。去掉 300ms 延迟。所有浏览器（包括 webview）在用户点击元素时通常会加上 300ms 延迟。为什么？因为它在等待第二次点击。300ms 看似不长，但足以让界面感觉迟钝。所以去掉它会有帮助。

尽可能遵循风格指南。如果您从零开始设计应用，请让您的开发人员和设计师阅读 Apple 和 Google 制定的指南。这会让他们清楚了解每个平台的用户习惯什么。让等待时间显得更短。如果无法避免加载画面时有较长的延迟，请显示加载图标或进度条。任何超过 0.1 秒的延迟都足以需要加载提示，让用户知道应用仍在运行和加载，而不是卡住了。

Canvas 已为您完成其中大部分工作，所以如果您想找更快的方法，不妨试试！

如何选择？

以下因素应能帮助您决定开发哪一种应用。

• 用户体验

UX 是用户使用您产品时的整体体验，尤其是使用起来有多容易或多愉快。用户界面就像笑话：如果需要解释，那就不太好。如果您的应用 UX 很差，人们就会停止使用。

不用说，您需要投资于 UX。对 UX 最好的做法，是开发两个独立的原生应用。如前所述，两个操作系统之间存在差异，而人们已经习惯了。如果您把 Android 手机交给忠实的 iPhone 用户，他们很可能会有点不顺手。

• 上市时间和成本

开发一个应用要多少钱？显然范围很大。价格会因复杂程度、功能和平台而不同。  快速获得估价的方法，是使用 Crew 团队制作的这个工具。  它会问一系列问题，然后估算您的应用需要多少费用。

但基本上，您的应用开发成本只由两个因素决定：所需工时和每小时成本。每小时成本大多保持不变，也容易确定，但应用所需的工时取决于您需要应用做什么。您可能需要的一些主要功能已涵盖在 Crew 制作的工具中。  关于应用开发成本，最好的数据不出所料来自应用开发公司。其中一家是 The Nine Hertz。他们在 2016 年发布了这张实用的信息图。  其中有几个重要数据，我们逐一来看。

聘请原生应用开发人员的成本

如果您开发两个（或更多）原生应用，就需要付钱给 iOS 和 Android（可能还有 Windows）开发人员。您可能认为 Android 是更普及的操作系统，所以开发成本会较低。  但事实并非如此，至少根据应用开发公司 Infinum 的这篇文章是这样。他们发现 Android 应用的代码多 40%，开发时间多 30%。

根据该信息图，北美移动开发人员的平均费用约为每小时 $150。如果您聘请印度或东欧的开发人员，价格会大幅下降，平均费用约为每小时 $30-50。

开发原生应用所需的时间

根据同一张信息图，开发一个标准原生移动应用平均需要 18 周：后端 10 周，前端 8 周。但请记住，并非所有应用都有后端，有些应用可能使用后端即服务来减少开发时间和复杂度。您实际所需的时间可能与这个平均数相差很大，但如果您刚接触应用开发，这仍是很好的参考。

上市时间应如何影响您的决定？

如果您的应用看来很适合做成混合应用，这可以大大缩短上市时间。但这样做，您可能牺牲了将来难以弥补的东西。这里有一个重要术语叫“技术债”。假设您的应用表现很好，您最终必须面对早期所做的一些技术决定。一般来说，技术债将来的代价比现在更高。

另一方面，您的工作不是写出漂亮的代码，而是 交付产品，所以技术债没关系！一个人们真正用得上的 50% 好的方案，比一个没人用得上的 99% 方案解决更多问题、存活更久——因为后者还在您的实验室里，被您没完没了地打磨。

聘请混合应用开发人员的成本

由于大多数混合应用用 JavaScript 开发，混合应用开发人员基本上是具备更专门技能的网页开发人员。在美国，网页开发人员的平均时薪约为 $50，但混合应用开发人员因具备移动开发专长，收费可能稍高。开发一个可同时在 Android 和 iOS 上运行的混合应用，成本一般低于开发一个原生应用。

不过，有几点需要注意：

由于它们不是原生应用，您必须投入相当多的资金，让它感觉像原生应用。有办法做到，但不如原生应用那么容易。这可能让成本增加到相当于 2 个原生应用。Apple 的应用提交流程相当严格，会有真人使用您的应用，检查它是否符合指南。如果混合应用感觉不像 iOS 应用，就可能被拒绝，从而延迟推出（并花更多钱修改应用）。

使用设备功能

视应用的复杂程度而定，您可能想使用设备本身的各种功能，例如 加速计或相机。同样，使用这些功能的最好方法是开发完全原生的应用。但如果您用 PhoneGap 开发应用，可以使用 PhoneGap 插件来使用这些功能。您可以在这里搜索所需的任何插件。使用插件意味着依赖别人的代码，或者在找不到合适插件时自己编写插件。

性能

如果要用一个词概括用户在乎什么，那就是性能。如果他们不喜欢您应用的性能，就会直接另找一个。原生应用的整体性能最好，就是这样。在 Facebook 移动应用的早期，公司押注于 HTML5 应用。后来，Mark Zuckerberg 说那是 公司犯过的最大错误之一，因为当时这项技术太不成熟，无法提供用户期望的体验。我们来深入看看应用性能的各个方面。

由于混合应用基本上就是浏览器，它们擅长呈现模仿电脑浏览器体验的应用，也就是页面。如果您的应用只是一系列页面，没有出色的图像，混合应用可能完全适合您。但开发游戏或含大量动画的应用，就不适合用混合应用。

手势

应用应该“感觉”对。如果您朝某个方向滑动一个元素，您会期望它立即按您的意思作出反应。这在原生应用中很容易做到，在混合应用中就没那么容易。不过，开发人员可以尝试使用 Hammer.js 之类的外部库来获得类似原生的手势。

数据处理需求

当今许多最受欢迎的应用都非常依赖 CPU（处理器）。想想为视频加滤镜的 Snapchat。这类功能在混合应用中根本无法实现。应用在执行原生代码之前，必须多经过一个 JavaScript 步骤。如果这看来会是个问题，开发原生应用会好得多。

寻找开发人员

您可以聘请几类开发人员来完成工作。传统选择是聘请全职人员与您合作、聘请自由职业者，或聘请代理公司。在极端情况下，您可能会为了开发应用而自己学写代码。

寻找原生应用和混合应用开发人员的过程大致相同，只有一个主要区别。如果您决定开发两个原生应用，您很可能需要 2 名开发人员，因为大多数人只专攻一个平台。

话虽如此，要找到一名优秀的开发人员，无论是聘为自由职业者还是雇员，都真的非常难。这还是假设您有固定预算，而且预算并不大——我们不都是这样起步的吗？

因此，您可能会发现，聘请一名能为两个甚至更多平台开发应用的开发人员，比组建一个原生应用开发小团队可行得多。相信我，如果您开发原生应用并为此聘请不同的人，成本会很快累积起来。