结合AMP和PWA超快速移动体验

(图片来源:amp.dev)

如果你发现自己在努力构建或优化快速网页，也许有一个替代的解决方案，你作为一个开发人员。为什么不求助于一种叫做加速移动页面(AMP)的开源技术解决方案呢?AMP提供接近即时的移动页面交付(平均0.8秒)，使其成为一个理想的完美的解决方案，用户与您的网站的第一次互动。另一方面，先进的网络应用(PWA)可以提供更多的交互性和粘性功能。

AMP和PWAs实际上只是一组技术或网页，提供了实现不同目标的互补方式。在本指南中，我们将向你展示如何结合这两者来创造真正引人注目和超高速的移动网页体验。对于其他选择，考虑改变你的虚拟主机服务。在您的过程的开始?尝试一个像样的网站建设者。

要获得更多有用的建议，请查看我们的教程综述如何构建一个应用程序，确保你的云存储为你工作。

PWA的9个惊人秘密

加速移动页面

AMP提供了非常快速、平稳的着陆页面。框架本身的编码非常简单，大多数开发人员只需不到一周的时间就可以完全实现它。AMP将内容快速呈现在用户面前，加载速度比标准手机页面快85%。

只要你的页面保持“AMP有效”，你可以放心不破坏代码或牺牲性能。您可以根据使用的框架开发一个有效的AMP页面AMP HTML, AMP JS和AMP缓存然后使用AMP验证器看看你有没有漏掉什么。要了解更多关于如何构建APM的信息，请查看谷歌开发者网站。

这总是很重要的冲击试验AMP。我们建议你对AMP进行A/B测试，看看它对你的移动性能有什么影响，对流量进行50/50的测试。这样你就可以安全地看到AMP为你自己带来的结果。

PWA:进步的网络应用程序

PWAs本质上是像原生应用一样运行的网站 (图片来源:谷歌Developers)

PWA将开放web的范围与本地web应用程序的功能结合起来。它本质上是一个行为几乎像本地移动应用程序的网站。它们的加载速度很快-特别是缓存或重复移动访问-离线可用，安全，可以从您的主屏幕访问。然而，他们的第一次加载被站点的service worker(资产和应用程序外壳)阻碍了，因为在站点的后续加载中，service worker只会加速交付给重复访问者。

PWAs中的Service worker在没有网络或慢速/间歇性网络连接时能够提供可靠的体验。PWAs的一个主要好处是，他们在正确的时间使用web技术，可以取代类似应用程序的许可，推送通知，支付请求api和更好的表单交互(自动完成，输入类型等)。PWAs还可以减少用户的下载请求，这对于一般的智能手机来说是相当费力的，减少了50%的外部JavaScript请求。

与你访问的普通网站相比，PWAs实际上是将你的业务安装在消费者的指尖上(带有一个类似应用程序的图标)，并提供更丰富的体验——以及启用了推送通知功能的更具沉浸感的体验。这是通过一组技术(https, service worker和一个清单文件)来增强你的网站，甚至使它可以离线访问。

此外，它们很容易被发现，因为用户在浏览网页时，当提示“添加到主屏幕”时，更有可能下载PWA，而不是访问应用程序商店寻找应用程序。

如何结合AMP和PWA

由于AMP和PWAs实际上只是一组技术或网页，提供互补的方式来实现不同的目标，我们真的应该花点时间来承认各自的独特优势。另外，当单独实现时，这两种技术都有自己的缺点，这也应该被考虑。

AMP提供快速加载，开箱即用的内容，需要相对较低的努力，但有一些功能缺失。另一方面，PWAs提供了更高级的平台功能，可以快速加载重复访问，内容甚至在离线模式下也是可靠的。然而，在第一次内容加载期间，PWAs不如AMP强，因为它们没有AMP那么快。

AMP和PWAs可以结合起来创造一个吸引人的和超快速的移动网络体验。把它想成是完美的技术配对。以下是你需要遵循的简单的两个步骤:

01.用AMP构建你的网站

这并不一定意味着你的整个网站:你可以专注于“入口点”或登陆页面。决定你期望看到最大的增量收益从AMP的速度。如果实现正确，AMP在从谷歌Cache提供服务时应该保持闪电般的加载时间。

为了将PWA逻辑与AMP集成在一起，这一切都始于一个AMP组件，称为AMP -安装-服务工作者，它可以从任何AMP页面安装服务工作者。

这让奇迹发生了。它允许从AMP缓存中安装service worker，因此在用户访问原始站点时就安装了service worker。用户体验保持不间断，并且无论何时从发布AMP文件的源端提供AMP文件，service worker都会运行。在集成PWA功能之前，这是一个好主意，以这种方式服务AMP作为一个入口点，通过“叶页”到您的网站和预热PWA“幕后”，然后切换用户到顺利的旅程。

02.逐步增强与PWA功能

在实现AMP和service worker之后，使用PWA特性逐步增强站点，这些特性最能满足您的业务目标。PWAs在完全集成的情况下有很多好处，可以轻松取悦更多用户，提高用户粘性并增加转化率。这是一个有用的清单这解释了如何产生一个基准PWA，然后把它发展成一个典型的PWA。

最好的团队是那些愿意适应新的消费者期望的团队。AMP和PWAs可以很好地结合在一起，确保你的网站能够吸引用户的注意力，并且更具吸引力。有一件事是肯定的，我们喜欢网站是快速的，我们希望内容到达准备好，易于完成。在现代社会，几乎所有事情都可以跳过，我们可以选择脱离，我们需要专注于保持兴趣。记住:最小的屏幕代表最大的机会。