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

已发表: 2018-06-06

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

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

似乎移动网站可以吸引访问者，但无法留住访问者。解决此问题的新技术之一是渐进式 Web 应用程序。

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

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

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

可靠– 即时加载，即使在不确定的网络条件下也不会出现低级现象。

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

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

在满足这些要求后，移动网络应用程序可以作为可下载的方式提供给用户。在我们深入研究渐进式 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 等大型市场的支持，那么为什么要选择渐进式网络应用程序而不是传统的本机版本呢？在 Forbes 的一篇文章中，Andrew Gazdecki 提供了一个高层次的解释：

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

为了更精确的解释，让我们看看原生应用程序和渐进式 Web 应用程序之间的一些最大区别：

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

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

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

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

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

渐进式网络应用与 AMP

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

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

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

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

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

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

但是，最终，我们真的必须选择其中之一吗？

合作大于竞争

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

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

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

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

2. AMP 到渐进式网络应用

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

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

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

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

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

从这里开始创建具有 Web 可发现性的快速、类似原生应用程序的体验，您可以在此处了解满足 Google 对 PWA 的标准所需的所有复选框。有关同时使用 AMP 和 PWA 的更多信息，请查看：

本·莫斯的演讲
埃里克·林德利 (Eric Lindley) 的演讲