PWA 与 AMP：哪个更好？它们之间有何不同？

已发表: 2018-06-06

在推出第一款 iPhone 大约十年后，移动网络终于赶上了用户的生活方式。响应式页面已消除捏合和缩放。 AMP 和本机应用程序与缓慢的加载时间作斗争……

但移动网络仍然存在一个主要问题领域：参与度。排名前 1,000 位的移动网站比排名前 1,000 位的原生应用程序覆盖的人数多 4 倍。然而，这些网站吸引用户的时间平均比移动应用程序少 20 倍。

移动网站似乎可以吸引访问者，但不能留住他们。解决这个问题的新技术之一是渐进式网络应用程序。

什么是渐进式网络应用程序？

渐进式 Web 应用程序是移动网站体验，旨在以原生移动应用程序的外观、感觉和工作方式进行设计。用户在浏览器中遇到它们就像在任何移动网站上一样。与该网站互动后，系统会提示用户在其设备上安装网络应用程序。如果他们选择安装，该应用程序将以本机应用程序的方式下载到设备。

“渐进式网络应用”一词是谷歌在 2015 年创造的。该公司表示渐进式网络应用符合三个标准：

可靠——即使在不确定的网络条件下，也能立即加载并且永远不会显示 downasaur。

快速——通过丝般流畅的动画和无卡顿的滚动快速响应用户交互。

引人入胜——感觉就像是设备上的自然应用程序，具有身临其境的用户体验。

满足这些要求后，可以向用户提供可下载的移动网络应用程序。在我们深入研究渐进式 Web 应用程序之前，让我们简要地回到表面并定义本机应用程序和另一种加速移动 Web 的技术，Accelerated Mobile Pages (AMP)。

什么是原生应用？

本机应用程序通过 App Store 或 Google Play 等市场安装，并以图标形式显示在设备的主屏幕上。它们专为特定设备设计，可以使用其所有功能，如 GPS、相机、联系人列表等。这些应用程序目前可能在您的设备上，例如 Google 地图、Gmail 或 Instagram。

什么是 AMP？

开源 Accelerated Mobile Pages 项目（简称 AMP）允许开发人员使用独特的编码语言构建可近乎即时加载的网页。该语言是 HTML 和 CSS 的精简版，它限制了 JavaScript 的使用。这些页面托管在 CDN 上，当用户访问该页面时，CDN 会提供该页面的缓存版本。

渐进式网络应用与原生应用

本机应用程序提供即时和无缝的用户体验，并且它们得到 App Store 和 Google Play 等大型市场的支持，那么为什么选择渐进式网络应用程序而不是传统的本机版本？在福布斯的一篇文章中，Andrew Gazdecki 提供了一个高级解释：

移动网站访问起来既快捷又容易，但在用户体验方面往往不太令人愉快。 本机应用程序提供最好的用户体验，但它们仅限于某些设备并且采用起来有很高的障碍。 本机应用程序需要下载，这意味着首先要从消费者那里获得可观的支持，而失去冲动行为的好处。 介于这些选项之间的是最新的移动解决方案：PWA。

为了获得更精确的解释，让我们看一下本机应用程序和渐进式网络应用程序之间的一些最大区别：

功能使用：目前，虽然网络应用程序可以利用设备的功能，但本机应用程序可以更多。诸如 GPS、推送通知和手势之类的东西在本机应用程序中更容易获得。

内容限制：为了让您的应用有机会在 Google Play 或 App Store 中竞争，您必须遵守市场规则。内容限制和费用使得一些网站很难创建成功的原生应用程序。然而，对于网络应用程序，既没有内容限制也没有施加费用，这使得任何人都可以更轻松地创建应用程序，而不管内容类型如何。

离线连接：这里的优势在于原生应用，它们提供比 HTML5 中构建的渐进式 Web 应用更完整的缓存。如果您的应用必须离线工作，目前更好的选择是原生。

安装：本机应用程序的安装需要代表用户执行大量操作。他们必须打开市场并搜索应用程序，然后下载。必须有认真的意图。对于渐进式网络应用程序的安装，摩擦要小得多。将一个添加到您的设备就像在您的主屏幕上创建一个书签。安装渐进式 Web 应用程序更容易，但过程不太熟悉，这可能会阻碍早期采用。

速度：目前，渐进式网络应用程序落后于本机应用程序。然而，他们正在不断缩小差距。当您考虑下一个比较时尤其如此。

渐进式网络应用程序与 AMP

像 Gazdecki 这样的人相信渐进式 Web 应用程序最终会取代原生应用程序，但是 AMP 呢？加速移动页面从哪里来，两者都有一席之地吗？这两者之间的一些主要区别：

可发现性： AMP 赢得了这场战斗。 AMP 借助 Google 搜索结果中的轮播，其中渐进式 Web 应用程序无法提高搜索引擎的可发现性。

参与度：渐进式网络应用程序不限于使用 AMP HTML 或 CSS，因此它们可以包含比 AMP 更具吸引力的内容。无法使用 AMP 框架创建任何需要 JavaScript 的交互式内容。对于 AMP，动态内容不在考虑之列。

速度：这里的优势属于 AMP，原因与渐进式 Web 应用程序赢得参与度的原因相同。 AMP 只能支持轻量级内容，但这可以缩短加载时间。

在 Smashing Magazine 中，Paul Bakaus 很好地总结了两种格式之间的权衡：

为了使体验快速可靠，您在实施 AMP 页面时需要遵守一些限制条件。 当您需要高度动态的功能（例如推送通知或网络支付，或任何需要额外 JavaScript 的东西）时，AMP 就没有用了。
此外，由于 AMP 页面通常由 AMP 缓存提供，您不会在第一次点击时获得最大的 Progressive Web App 好处，因为您自己的 Service Worker 无法运行。另一方面，渐进式 Web 应用程序在第一次点击时永远不会像 AMP 一样快，因为平台可以安全且廉价地预渲染 AMP 页面——这一功能也使嵌入更简单（例如，嵌入到内联查看器中）。

但是，最终，我们真的必须二选一吗？

合作胜过竞争

您可以选择仅使用 AMP 来创建快速而简单的体验。您可以依靠渐进式 Web 应用程序来创建动态但速度较慢的用户体验。或者，您可以通过将两者结合到您的网页设计中来快速开始并保持快速。

如今，AMP 与渐进式 Web 应用程序的结合使用变得越来越普遍，开发人员通过三种方式利用这两种方法。

1. AMP 作为渐进式网络应用

如果您的内容主要是静态的，并且您可以满足于 AMP 的有限功能，则此选项允许您创建闪电般的快速体验作为渐进式网络应用程序。例如，AMP 就是这样构建的——完全由 AMP 收费的渐进式网络应用程序。它有一个允许离线访问的服务工作者，以及一个提示“添加到主屏幕”横幅的清单。

2. AMP 到渐进式网络应用

另一种同时使用 AMP 和渐进式网络应用的方法是将 AMP 页面视为您网站的挂钩。它以瞬时负载吸引用户，然后将他们卷入您的渐进式 Web 应用程序。这允许您将快速加载的 AMP 页面与比第一个选项更动态的 PWA 结合起来。

3. 渐进式网络应用中的 AMP

正如 AMP 与 PWA 的情况一样，它不必是全有或全无。您无需使用 AMP 构建所有页面；您也不需要将 AMP 和 PWA 分开作为钩子和杆。现在，您实际上可以只对单个页面的一小部分进行 AMP，从而减小其大小并缩短其加载时间，而无需完全权衡动态功能。

这涉及使用另一种形式的 AMP，称为“影子 AMP”，它允许 AMP 嵌套在网页的某个区域内。结果是 AMP 在渐进式 Web 应用程序的外壳中。要查看实际效果，请查看 Google 创建的名为 ShadowReader 的演示：

准备好创建您自己的渐进式 Web 应用程序了吗？

通过网络的可发现性创建一种快速的、类似于原生应用程序的体验从这里开始，在这里您可以了解您需要检查的所有方框以满足 Google 的 PWA 标准。有关结合使用 AMP 和 PWA 的更多信息，请查看：

Ben Morss 的演讲
Eric Lindley 的演讲