渐进式 Web 应用程序与原生应用程序相比如何？

在过去十年中，使用移动设备访问互联网的人数猛增。

事实上，现在人们在移动设备上消费的内容量是桌面设备的 2 倍。 2020 年，企业和网站所有者应该对此感到兴奋，因为接触和吸引移动用户的机会仍在增长。

有几种有效的方法可以实现“移动优先”并创造真正满足现代用户期望的移动体验。 首先是响应式网页设计，它创造了一种移动友好的网页体验，坦率地说，这是最低限度的。

然后是本地移动应用程序，用户可以从应用程序商店下载并添加到他们移动设备的主屏幕。 应用程序是一种更好的移动用户体验，可以更有效地利用设备的功能，尽管它们传统上构建起来既昂贵又耗时。

最近，我们看到渐进式 Web 应用程序 (PWA) 进入了这个领域，它采用了介于移动网站和移动应用程序之间的方法。 让我们更详细地看一下它们，看看它们是如何叠加的。

什么是渐进式 Web 应用程序？

Progressive Web Apps 介于响应式网站和移动应用程序之间。

它们是使用现代 JavaScript 框架构建的移动网站，旨在像原生应用程序一样工作。 它们可以通过图标添加到移动设备的主屏幕。 与应用程序一样，它们提供全屏体验来吸引用户。 但是，打开时它们仍然只是一个网站。 随着 Service Worker 的发展，PWA 确实获得了原生应用程序所拥有的更多好处，但是，这些好处仍然有限，尤其是在 iOS 上。

Google 将 PWA 定义为以下网络体验：

• 可靠——即使在不确定的网络条件下，也能立即加载并且永远不会显示网站已关闭。
• 快速– 使用丝般流畅的动画快速响应用户交互，并且没有卡顿的滚动。
• 引人入胜——感觉就像设备上的自然应用程序，具有身临其境的用户体验。

据 SD Times 报道，Progress 产品和开发者关系副总裁 Todd Anglin 认为“ PWA 旨在让 Web 成为一种更可靠、更愉快的体验，但总会有一类应用程序最好由原生服务”。

这导致我们为试图决定的企业主提出一些问题（和答案）——“什么对我的公司最有利：
渐进式网络应用程序与原生应用程序相比如何？”

渐进式 Web 应用程序与原生应用程序：有什么区别？

这似乎是一个足够简单的问题来回答：渐进式 Web 应用程序 (PWA) 和本机应用程序之间有区别吗？ （是的。）如果是这样，这些区别是什么？您如何在原生应用程序和渐进式 Web 应用程序之间进行选择以适应公司的移动业务？ （那要看。）

让我们更深入地分析一下 PWA 和原生应用程序之间的主要区别。

1. 安装
2. 跨平台可用性
3. 离线使用
4. 存储、数据和电源
5. 更新
6. 发现
7. 推送通知
8. 安全
9. 设备特点
10. 成本

1.安装

PWA 和本机应用程序之间的主要区别在于最终用户访问它们的方式。

原生应用程序是通过应用商店（例如 Google Play 或 Apple 的 iOS App Store）找到和安装的。 应用商店充当一个巨大的购物窗口，是人们在移动设备上消费的所有服务和内容的门户。

人们使用应用商店来寻找解决问题的方法，就像他们在移动网络上使用谷歌一样。

应用程序所有者的机会是巨大的。 如果您在应用商店优化 (ASO) 方面做得很好，您可以将您的品牌介绍给正在搜索相关关键字的新用户。 如果你有一个现有的品牌，你也可以指望人们在商店里寻找你，这种情况现在经常发生，应用程序是现代消费者对数字业务的期望。

安装后，该应用程序将出现在用户的主屏幕上，带有可识别的图标和文本标签，可以在用户滚动浏览主屏幕时吸引他们的注意力。 它确实是宝贵的房地产。

这一切都意味着，当你开发一个原生应用程序时，你必须将它提交给谷歌和苹果考虑。 尤其是苹果公司有相当严格的要求，需要付出一些努力才能达到他们的标准。 然后由用户来查找应用程序，阅读描述和评论，并确定是否值得在他们的设备上安装。

另一方面，PWA 可以帮助您避免处理应用商店提交的过程。 相反，PWA 在移动设备的浏览器上运行。 金融时报 PWA就是一个很好的例子：

正如您在此示例中所看到的，《金融时报》的 PWA 看起来与您期望的应用程序看起来非常相似。

用户只需在移动浏览器中输入 URL 即可访问 PWA。 如果用户不了解 PWA 的概念，他们可能会惊讶地发现网站的截断版本，而他们期望获得与常规网站相同的体验。

但是，一旦他们确实发现了它，（理论上）很容易将 PWA 保存到主屏幕并在那里找到它，就像他们在本地应用程序中一样。

您的用户可能遇到的唯一障碍是知道如何将其添加到主屏幕。 PWA 仍然相对较新，在设备的主屏幕上添加“网站”的概念并不是普通网络用户的常态。 这与几乎每个人都熟悉的从 App Store 或 Google Play 安装移动应用程序的想法形成鲜明对比。

也就是说，最新的 Android 版本会提示用户安装 PWA（如上图所示），而 iOS 仍然依赖于旧的“添加到主屏幕”操作。

在 iOS 上，您的用户必须在 Safari 中访问您的 PWA 的 URL，然后手动按 Share，然后点击“添加到主屏幕”。 不会有任何视觉指标表明您的网站是渐进式网络应用程序。 正如您所想象的那样，这使得让 iOS 用户安装它有点棘手。

2. 跨平台可用性

由于开发人员通常专门为 iOS 或 Android 用户设计应用程序，这确保了原生应用程序中的体验是针对每个平台量身定制的。 开发人员不必担心跨浏览器或平台兼容性，而更多地担心为特定的移动设备设计他们的应用程序。 当然，这也有例外，比如如果您构建混合应用程序或使用像 React Native 这样的跨平台框架。

另一方面，渐进式 Web 应用程序通常采用不同的方法。

Twitter、Forbes 和 Flipboard 等许多大品牌（以及他们的本地应用程序）都在使用它们，它们是从已经使用多年的网络技术演变而来的。 （然而，“渐进式网络应用程序”这个词本身只是设计师 Frances Berriman 和 Google Chrome 工程师 Alex Russell 在 2015 年创造的。）

开发人员创建 PWA 的响应式实例，发布它，然后将其留给用户的浏览器以在屏幕参数内正确显示。 它只是一个需要开发的应用程序，借助现代网络技术，各种移动浏览器的用户都可以使用该应用程序。

然而，这里值得注意的一点是，PWA 的界面通常会尝试在您在响应式网站中找到的内容与您在本机应用程序中遇到的内容之间取得平衡。 以下是 FT PWA 的示例：

使用本机应用程序，开发人员有机会创建更加用户友好的体验，因为该应用程序专为移动应用程序的结构而设计。

另一方面，使用 PWA 可以显着节省时间和成本，因为可以在 iOS 和 Android 上加载单个 Web 应用程序（以及其他系统上的 Firefox 等浏览器！）。

不过，也有一些方法可以轻松构建跨平台移动应用程序。 MobiLoud Canvas 让您通过将现有网站转换为 iOS 和 Android 应用程序来启动 Google Play 和 App Store。 它为您提供原生移动应用程序的所有优势，以及 PWA 的效率——不过稍后会详细介绍。 让我们继续下一点。

3. 离线使用

移动应用程序可以为最终用户做的一件好事是让他们能够访问他们想要的信息，而无需连接到互联网。

过去是应用程序的特权，现在也出现在网络上。 PWA 是一个基于 Web 的应用程序，它安装在您的系统上，并在可能的情况下利用缓存的数据离线工作。

Service Worker 是允许在 PWA 中离线使用的最重要的技术。 Service Worker 基本上是独立于 Web 应用程序本身运行的 JavaScript 文件。

它们通过处理网络请求、缓存应用程序资源（和获取缓存的资源）来帮助提高性能和功能，最重要的是，即使用户不在线也能启用推送消息。

正如您可能想象的那样，这里有一个权衡。

当用户的设备无法连接到网络时，PWA 可以为用户提供应用程序的某些部分。 但是，PWA 无法为他们提供应用程序的所有部分； 具体来说，任何不属于页面自然缓存系统的内容都将处于脱机状态，直到连接恢复。 因此，如果用户想向福布斯提交联系表格或在 Trivago 上进行预订，他们将无法这样做。

原生应用程序肯定会在这一类别中获胜。 虽然 PWA 的技术正在迎头赶上并允许用户访问缓存的内容，这很好，但他们还没有完全能够利用移动设备保持连接。

4. 存储、数据和电力

当原生应用程序安装在移动设备上时，它将直接从设备的资源中提取。

对于“较重”的应用程序，即用户经常交互的应用程序，或者他们忘记完全关闭的应用程序——在电源/电池、存储空间和移动数据使用方面的资源使用可能很重要。

PWA 也可能导致类似的排水问题。 Safari 应用程序造成的负担几乎与手机上最常用的应用程序一样多。 真的，归结为：

• 应用程序的编码程度如何
• 应用调用了多少资源
• 用户的实际使用情况

如果您试图吸引居住在数据网络往往更昂贵且用户无法支付费用的地区的受众，那么 PWA 将是最佳选择。

谷歌强调，当 Konga 将移动网站转变为 PWA 时，Konga 将数据使用量减少了 92%。 拥有不使用太多数据的 PWA 至关重要，因为近三分之二的尼日利亚用户（Konga 的本土市场）通过 2G 网络通过移动设备访问互联网。

一些本机应用程序也可以工作并存储内容以供离线使用，这可能有助于解决不稳定的连接（但如果数据昂贵，则效果不佳）。

5. 更新

当涉及到应用程序时，有两个方面可以查看更新：用户的观点和开发者的观点。

在大多数情况下，在更新本机或渐进式 Web 应用程序时，用户真的无事可做。

原生应用程序有时可能需要手动更新，但在大多数情况下，该过程是自动化的，用户几乎不会检测到更新何时完成。
对于您的最终用户来说，这不会有太大的不同，因为大多数更新都不会被注意到。

6. 发现

对于原生应用程序，它们有两次出现在搜索结果中的机会。

• 在应用商店内
• 在搜索引擎中

但是，这两者都取决于许多表面因素，因为应用程序本身的页面无法在搜索引擎中被索引和列出。 相反，您必须执行所谓的应用商店优化 (ASO)。 这涉及应用搜索优化策略，例如：

• 确定适合您的移动应用的常用搜索关键字（在应用商店中），并将其包含在您的应用标题和说明中。
• 使用包含您选择的关键字的强大标题/标题。
• 为您的应用开发一个简洁而深思熟虑的描述。 您希望快速吸引应用商店用户，同时确保他们了解他们从应用体验中获得了什么。 确保关键字也包含在此处！
• 客户评分在原生应用程序的整体成功中发挥着重要作用，这意味着他们也将考虑到 SEO。 不要害怕联系并要求当前用户给您留下评论（您可以使用推送通知来做到这一点）。
• 您还希望看到下载量也增加了。 与下载量少或评价不高的竞争应用程序相比，这种形式的社交证明将帮助您吸引新用户。

如果您能很好地利用分类功能，应用商店也将大大有助于为您的新应用增加流量。 您的应用越是利基市场和特定标签，它出现在应用商店搜索结果中的相关性就越高。

现在，一个渐进式网络应用程序，另一方面，将在网络搜索引擎优化方面做得很好，因为它就像你在网上遇到的任何其他网站一样工作，并且它的内容被谷歌和必应索引。

正如您在此示例中所看到的，金融时报PWA 看起来就像您看到的任何其他搜索结果一样。 它还提供指向应用程序内相关页面的链接。

Cleveroad 强调，与最初在应用商店中的移动应用相比，PWA 的这种即时使用机会可能会允许更多的流量到达您的 PWA。

7.推送通知

推送通知是许多网站所有者和企业构建移动应用程序的关键原因之一。

与电子邮件等传统方法相比，它们吸引了更多的参与。 报告显示，某些行业的推送通知可以获得高达 40% 的点击率(CTR)，而电子邮件通常会产生大约 20-25% 的打开率，点击率约为 3-6% 。
总而言之，一个有效的推送通知策略将导致更多地参与您的内容和移动应用程序！

您可以从头开始构建推送通知所需的功能，或者使用第三方推送通知服务（例如 Google Firebase、PushBots 或 OneSignal）轻松地将现有推送通知解决方案集成到本机应用程序中。

由于 Service Worker 的开发，您还可以在 Progressive Web Apps 中使用推送通知。

但是，此时，推送通知支持仍仅限于 Chrome、Firefox 和 Opera 以及 Mac Safari，并且在 iOS 上不可用。 这意味着您可以开始使用推送通知在 Android 上通过 PWA 吸引观众，但如果您想对 iOS 访问者做同样的事情，您将不得不等待。

你也不应该指望 Apple 和 iOS 在不久的将来支持这一点，他们通常对通知的看法很模糊。

在推送通知方面，PWA 无疑正在取得进展，但是，原生应用程序显然是这一类别的领导者。 原生应用程序可以支持 iOS 和 Android 设备上的推送通知，使其成为任何希望通过这种强大的媒介吸引受众的网站所有者的正确选择。

8. 安全

安全和隐私是 2020 年的关键，公司需要他们的移动应用程序是安全的，保护他们的用户数据，并且也符合 GDPR。

本机应用程序能够成为应用程序所有者和用户的安全解决方案。 在本机应用程序中使用多重身份验证比在 PWA 中更容易，如果应用程序具有登录功能，这将非常有用。 多因素身份验证为原生应用程序增加了一大层安全性。

原生应用还可以使用证书固定来防止某些类型的攻击，这些攻击是 PWA 等浏览器内应用无法模拟的。 尽管原生应用程序有这个优势，但 PWA 仍然通过 HTTPS 提供服务，这确实允许浏览器到服务器的加密。 只要网站所有者为 PWA 创建了一个安全的环境，它就可以像任何网站一样安全。

但是，要在 iOS 和 Android Google Play 和 iOS App Store 上发布您的原生应用程序，它们必须首先获得 Apple 或 Google 的授权。 为用户带来明显安全问题的应用程序极不可能被接受，因此在大多数情况下，从这些来源下载的应用程序是值得信赖的。

尽管为原生应用程序构建安全功能可能还有更多工作，但由于能够内置安全功能，它有可能比 PWA 更安全。 但是，在为 Web 构建任何东西时，安全性始终是一个微妙的主题。 你不能成为数据泄露的原因，所以这个将落在你的肩膀上——本机应用程序或 PWA。

9. 设备特点

构建本地移动应用程序以放置在用户移动设备上的最潜在有用的事情之一是它能够与其他设备应用程序和电话功能同步。

例如，本机应用程序可以使用：

• 相机
• 全球定位系统
• 地理围栏（用于营销目的）
• 加速度计
• 罗盘
• 联系人列表
• 警报
• 日历
• 短信和推送通知
• 近场通信和移动支付

DeeperBlue本机应用程序（使用 MobiLoud News 构建）要求用户允许将推送通知发送到他们的移动设备。

此外，与浏览器窗口在被完全阻止之前只能请求一次信息不同，像 Deeper Blue 这样的应用程序可以为用户提供在以后选择加入的选项，并且可以从他们的设置中轻松访问。

渐进式 Web 应用程序可以被认为是一个工具包，它为您提供了利用设备功能的潜力，但它们并不严格提供特定的功能集。

正如彼得·奥肖内西（Peter O'Shaughnessy）所写：

“这 [你对 PWA 功能的选择] 不是全有或全无； 你可以自由挑选。 例如，如果您不想引入推送通知，则不需要！ “

最基本形式的渐进式 Web 应用程序可以受到与标准网站相同的限制，这意味着您无需添加对设备功能的访问权限。 您可以通过 API 建立一些连接（如社交媒体登录）以改善用户体验，但存在限制。

如果您希望您的应用程序从利用原生应用程序可以使用的所有设备功能（例如指纹扫描仪、GPS 和相机）中受益，那么原生应用程序仍然是更合适的选择。 不过，对于大多数企业来说——没有必要使用这些功能！

API 集成可能会为 PWA 上的用户向其他软件开放功能，但它不会让他们能够像原生应用程序那样将他们的应用程序同步到手机。

10. 费用

最后，我们谈到了成本和发布时间的问题。

原生应用程序——如果是真正的原生应用程序——通常是用 Java 或 Android 的 Kotlin 或 iOS 的 Objective-C 或 Swift 构建的。

这种方法的缺点是它需要一个漫长的，有时是冗长的开发过程，每个平台都会重复。 此外，原生应用程序的维护成本很高。 原生应用通常需要 50,000 到 100,000 美元才能在 iOS 和 Android 上发布第一个版本，另外每年还要花费 20% 用于维护和更新。

他们也至少需要几个月的时间来建造。

有诸如 React Native 之类的跨平台开发框架，它可以通过使大部分代码在 iOS 和 Android 之间可重用来帮助弥补这些缺点。

同时，如果您的受众由两个平台上的用户组成，您将不得不完全忽略一部分用户，或者承担双重开发的额外负担。

在内部开发您的原生应用程序时，您至少需要额外招聘 2 名员工，并且现有员工至少要花时间进行评论和测试。 如果您的团队无法自行处理，您可能还必须考虑外包开发的成本。

有了这些高壁垒，构建原生应用程序对于小型企业来说是一个巨大而危险的挑战。

渐进式 Web 应用程序的核心基本上是一个以多种方式中的任何一种构建的 Web 应用程序（尽管 React.js 和其他类似框架当然很受欢迎），并添加了服务工作者。

开发人员需要复制大量原生和移动 SDK 已经提供的功能，因此这仍然意味着投资研发，就像开发原生应用程序一样。 不过，构建 PWA 比构建原生应用程序要容易得多——时间和金钱成本都反映了这一点。

为什么不同时？

在决定原生应用程序和渐进式 Web 应用程序时，还有许多其他重要因素——比如性能、设计质量等等。 其中大部分归结为编码质量。 不是应用程序是本机的还是存在于网络浏览器中。 如果您想了解有关渐进式 Web 应用程序的更多信息，请查看我们的详细指南，其中包含 50 个 PWA 示例。

当需要做出决定时，请确保您选择的开发路径（以及开发人员）能够与这些期望相匹配。

如果您的用户会因为感知到构建一个应用程序的高成本而失去对原生应用程序至关重要的体验（如推送通知或地理围栏），那么您可能需要重新考虑您的预算，因为花在 PWA 和原生应用程序上的钱最终可能会成为一种浪费。 另一方面——考虑到高昂的成本，你真的需要从头开始构建一个原生应用程序吗？ 你需要使用手机的加速度计和面部识别吗？

移动大声

如果您需要一种将您已经为 Web 构建的内容转换为原生应用程序形式的方法，并获得最重要的相关好处，那么有一个更好的途径 -将您的网站转换为原生移动应用程序。

我们的平台 News（适用于基于 WordPress 的数字出版商）、Commerce（适用于 WooCommerce 商店）和 Canvas（适用于任何网站或 Web 应用程序）——为您提供原生应用程序和 PWA 的优势。

你可以以更低的成本获得所有最重要的原生应用程序功能，这更符合你在 PWA 上的花费。 这是两全其美的。 如果您使用 MobiLoud 构建移动应用程序，您可能仍然有足够的资源来构建 PWA！

我们所有的解决方案的核心都是一个转换过程。 您将使用您现有的网站或网络应用程序，然后使用我们的平台将其转换为适用于 iOS 和 Android 的本机应用程序。

虽然 MobiLoud 通常用于将 WordPress 网站转换为移动应用程序，但 Canvas 实际上可以与任何网站完美配合。 Canvas 可以集成任何 WordPress 插件的功能——允许您构建 PeepSo 应用程序、LearnDash 应用程序等。 但它也非常适合构建 Bubble 移动应用程序、Webflow 应用程序、Wix 应用程序、Squarespace 应用程序——以及介于两者之间的所有应用程序！

这些应用程序将在两周内准备好发布，不到您在传统原生开发上花费的 10%。 查看 News、Canvas 或 Commerce 的更多详细信息，或安排与我们的一位应用顾问进行咨询以了解更多信息。

结论

随着技术的进步，PWA 肯定出现了一些很好的用例。 例如，大型社交媒体网站就是一个很好的例子，可以很好地作为 PWA。 Twitter Lite 和 Pinterest 等 PWA 都展示了如何使您的移动 Web 体验几乎与您的本地应用程序相当，这将有助于连接性较差或昂贵的市场。

也就是说，本机应用程序可让您为用户提供始终在线且真正个性化的体验。 它是唯一为网站所有者提供带有推送通知的全新渠道的解决方案，可在 iOS 和 Android 上使用。 这对于希望向客户和追随者提供及时更新和本地功能的新闻出版商、博客网站、电子商务公司、社交平台和电子学习网站来说尤其有用。

Native 与 PWA 的辩论仍然很重要——但它不一定是一场比赛。 两者并不相互排斥。 两者都有用例，这取决于您想要什么以及需要什么技术。 没有理由不能同时构建两者。

用于网络的 PWA 可以获取自然流量并在移动浏览器上提供出色的用户体验，iOS 和 Android 应用程序可以在应用程序商店中获得品牌影响力，有效地发送推送通知。 并为您最忠实和参与度最高的粉丝提供一个家。

传统上，这样做的努力和费用对于预算紧张的任何人来说都是令人望而却步的。

不过，使用 MobiLoud 变得更加可行。 我们不仅可以帮助您在创纪录的时间内创建出色的移动应用程序，而且我们还可以将您的网站变成高质量的 PWA，以便您以传统成本的一小部分获得两者的好处。

我们希望这篇文章能提供有用的信息。 如果您想将您的移动存在提升到一个新的水平，并且您是基于 WordPress 的数字出版商，请查看新闻。 如果您有电子商务网站、Web 应用程序或平台——无论是技术堆栈还是 CMS——请查看 Canvas。 如果您在 WooCommerce - 我们为您提供 WooCommerce 应用程序构建器！

无论您做出什么决定——我们祝您在创建成功的移动用户体验、取悦您的用户和发展您的品牌方面一切顺利。